$(document).ready() 와 웹페이지의 실행순서에 대해 알아보자.
[소개]
$(document).ready() 는 jQuery를 사용할 때 가장 먼저 배워야 하는 것이다.
페이지 시작 시에 어떠한 이벤트를 발생시키려 하거나
버튼 클릭 등의 이벤트를 구현하려 할때 $(document).ready() function 안에 있는 것들을
불러오게 된다.
[실행시점]
$(document).ready()는 DOM (Document Object Model) 이 load 된 후에 즉시 실행 되게 된다.
참고1) document.ready() 와 window.load(), <body onload>의 실행 시점
$(document).ready() 와 <body onload>는 개념상 동일 시점에서 실행된다.(DOM load후 즉시)
jQuery API를 보면 <body onload>와 호환되지 않으니 하나만 사용하는 것이 좋다고 나와있다.
$(window).load() 는 DOM실행 후 이미지나 기타 리소들이 모두 load된 후에 실행되게 된다.
실행 순서를 정리하면 다음과 같다.
DOM load => $(document).ready() => <body onload> => image, resource load => $(window).load()
[사용방법]
<html>
<head>
<script type="text/javascript" src="../../js/jquery-1.7.1.js"></script>
</head>
<body>
<input type='button' id="btn" value="테스트버튼"></input>
<script>
$(document).ready(function() {
alert("Welcome to jQuery world");
$("#btn").click(function(){
alert("버튼 클릭시 이벤트");
});
});
</script>
</body>
</html>
처음 페이지가 실행될 때 "Wlecome to jQuery world"가 뜨고 테스트버튼 클릭 시 "버튼 클릭시 이벤트" 라는 문구가 뜨는 것을 확인 할 수 있다.
$(function(){ }); 도 $(document).ready() 같은 기능을 한다.
'Programing > jQuery' 카테고리의 다른 글
| jqeury reset 초기화 버튼 이벤트 구현 (0) | 2014.04.17 |
|---|---|
| jQuery Selector 셀렉터 사용법 (1) | 2014.04.17 |
| jQuery each 에 대해 알아보자. 제이쿼리 반복문 jQuery for while (0) | 2014.04.17 |
| jQuery 전체선택 해제 체크박스 이벤트 구현 방법 (0) | 2014.04.14 |
| jQuery 란 무엇인가? & jQuery 다운로드 (0) | 2014.04.14 |
댓글