$(document).ready 함수는 DOM 로드가 끝나고 이미지가 로드되기 전에 실행된다.
도큐먼트가 준비되었다는 의미로 생각하면 쉬울것 같다.
보통의 html 페이지에서 -
페이지 로딩시점에서. 엘리먼트 id에 접근하여 이벤트를 발생시키려면
<head></head> 사이에 스크립트를 삽입하는것이 아니라
id를 정의한 태그 아래쪽에 스크립트를 삽입해야한다.
JQuery를 사용하여 $(document).ready 를 사용하면
<head></head>에 스크립트를 삽입하여도 DOM 트리를 로드 한 후에 실행하기때문에 정상적인 실행이 가능하다.
사용법은 다음과 같다.
});
$("#switcher").click(function() {
도큐먼트가 준비되면 해당하는 이벤트를 수행한다.
위 스크립트의 의미는
1번 페이지로딩이 끝나면 table 태그의 width를 800px로 설정하고
2번 switcher라는 아이디를 클릭했을때의 이벤트를 수행한다.(경고창이 뜨게된다.
2번은 $(document).ready 밖에 정의된 $("#switcher").click 를 실행한다.
즉 switcher 아이디를 클릭했을때와 같은 효과를 볼수있다.
도큐먼트가 준비되었다는 의미로 생각하면 쉬울것 같다.
보통의 html 페이지에서 -
페이지 로딩시점에서. 엘리먼트 id에 접근하여 이벤트를 발생시키려면
<head></head> 사이에 스크립트를 삽입하는것이 아니라
id를 정의한 태그 아래쪽에 스크립트를 삽입해야한다.
JQuery를 사용하여 $(document).ready 를 사용하면
<head></head>에 스크립트를 삽입하여도 DOM 트리를 로드 한 후에 실행하기때문에 정상적인 실행이 가능하다.
사용법은 다음과 같다.
$(document).ready(function() {
//1번
$('table').css("width","800px");
//2번
$('#switcher').trigger('click');//1번
$('table').css("width","800px");
//2번
});
$("#switcher").click(function() {
alert("클릭하였음");
});
도큐먼트가 준비되면 해당하는 이벤트를 수행한다.
위 스크립트의 의미는
1번 페이지로딩이 끝나면 table 태그의 width를 800px로 설정하고
2번 switcher라는 아이디를 클릭했을때의 이벤트를 수행한다.(경고창이 뜨게된다.
2번은 $(document).ready 밖에 정의된 $("#switcher").click 를 실행한다.
즉 switcher 아이디를 클릭했을때와 같은 효과를 볼수있다.
'Note > 그밖에' 카테고리의 다른 글
| js 많이쓰는 숫자, 문자 함수 (0) | 2011.06.30 |
|---|---|
| JQuery 엘리먼트 선택자 (0) | 2011.06.30 |
| php 날짜관련 (0) | 2011.06.23 |
| ASP 페이지를 엑셀로 다운받기 (0) | 2011.06.23 |
| ASP_<textarea> 내의 내용 줄바꿈처리(br) 방법 (0) | 2011.06.23 |