jQuery 1강 - jQuery 연동부터 $(document).ready() 이해하기
안녕하세요 jQuery 강좌 첫번째 시간입니다.
jQuery 심플하게 설명하여 jquery 입문자들의 이해를 돕고자
시작하게 되었습니다.
해당 강좌는 jQuery를 설치하지 않고 CDN을 통하여 진행하도록 하겠습니다.^^
우선은 CDN URL을 스크립트태그의 src속성에 적용을 해주시면 되겠습니다.
jquery 최초 쓰던 버전이 1.3 버전이었는데 벌써 1.11에다가 2.x 버전까지 나왔네요!!
2.x 버전은 뭔지 추후에 확인 해봐야 겠습니다 ㅋ
우선은 간단 예제를 들기위한 것이므로 단순하게 1.11.0 버전은로 진행을 하겠습니다.
웹파일을 하나 생성 후 jQuery CDN 스크립트 태그를 include 해주는 것을 우선해주세요
위치는 <body> 태그내에 혹은 <head> 태그내에 상관은 없겠지만
기본적으로 저는 <head></head> 태그 사이에 넣도록 하겠습니다 .
jQuery CDN INCLUDE
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
다음으로는 $(document).ready()에 대하여 설명을 드리겠는대요
$(function(){
// code insert
});
위와 같이 더욱 간결하게 사용하실수도 있습니다.
자바스크립트를 사용하셨던분이시라면 window.onload와 동일한 기능이라고 생각하시면 되겠는대요.
물론 window.onload, $(function(){}) , $(document).ready() 의 onload 스크립트 코드들은 body태그의 모든 태그들이
출력된 다음에 호출이 되는 코드입니다.
onload 라고 해서 모두 같은 1순위인건 아닙니다.
호출순서는
1. $(document).ready() = $(function(){})
2. window.onload
위 순서입니다.
즉, 둘이 동일하게 body 태그내의 모든 코드를 읽은 후 호출되는 onload 기능들이어도
순수 window.onload 코드가 가장 나중에 호출이 된다는 것입니다.
그렇다면 HTML 태그가 읽히는 예제를 한번 들어보도록 하겠습니다.
ONLOAD 순서 이해하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
alert("HEAD ALERT 경고창");
window.onload = function(){
alert("window.onload ALERT 경고창");
}
$(document).ready(function(){
alert("$(document).ready ALERT 경고창");
})
</script>
</head>
<body>
<script type="text/javascript">
alert("BODY ALERT 경고창");
</script>
</body>
</html>
샘플로 작성한 HTML 코드는 위와 같습니다.
총 4개의 ALERT이 화면에 뜨도록 작성해보았는대요
결과를 미리 예상해보자면
1차 ALERT 메시지 : HEAD ALERT 경고창
2차 ALERT 메시지 : BODY ALERT 경고창
3차 ALERT 메시지 : $(document).ready ALERT 경고창
4차 ALERT 메시지 : window.onload ALERT 경고창
코드 순서로 따지자면 결과가 위처럼 나올거 같습니다.
호출순서가
위 -> 아래 -> $(document).ready() -> window.onload 형태라고 말씀을 드렸으니까...
그렇다면 실제로 html 코드를 실행해보도록 하겠습니다.
실행결과 예상대로 결과값이 정상적으로 나왔습니다.
^^ 그럼 다음 포스팅으로 돌아오겠습니다~
by 개발로짜