메뉴 건너뛰기

XE Guidebook

조회 수 10 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

● jQuery 스크립트의 작성 위치와 문서준비이벤트의 사용

 

문서준비이벤트란 jQuery Events 단원에서 배우게 될 "ready" 이벤트를 말한다.
 
이 이벤트는 웹브라우저가 HTML의 DOM을 모두 로드할 때를 알려 주는 이벤트로
<head> 태그 내에 jQuery 코드를 작성할 경우에는 반드시 문서준비이벤트를 사용해야 한다.
 
HTML을 동적으로 조작하기 위해서는 HTML 문서를 모두 로딩해야만
그 다음에 동작을 가하는 jQuery나 javaScript 코드가 정상적으로 작동을 하게 된다.
 
웹브라우저가 HTML 문서를 로딩할 때는 <body>보다 <head>를 먼저 로딩을 한다.
만약 <body>에 동작을 가하는 jQuery를 <head>태그 내에 작성해 놓았다면
jQuery는 <body>의 내용들이 로딩되기 전에는 body의 노드들을 읽을 수 없게 되고
jQuery가 작동을 하지 않게 된다.
따라서 jQuery를 <head>태그 내에 작성할 경우에는 문서준비 이벤트가 반드시 필요한 것이다.   

jQuery() 함수로 ready 이벤트와 똑같은 역할을 수행시키기 위한 표현형식은
jQuery() 함수의 괄호 안에 매개변수로 직접 함수를 넘겨주면 된다. 
이렇게 되면 이 함수는 HTML 문서의 DOM이 모두 로딩되고 난 후에 정상적으로 실행이 된다.
 

그 사용 형식은 아래의 구문 중에서 하나를 선택하여 사용하면 되고,
3개는 똑같은 뜻을 가지고 있다.
 
   jQuery(document).ready( function( ) { ...... } );
 = jQuery( function( ) { ...... } );
 = $( function( ) { ...... } );

※ <body> 문서의 맨 마지막 </body> 바로 앞에
   jQuery나 javaScript 코드를 삽입하게 되는 경우에는 문서준비 이벤트를 사용하지 않아도 된다.
   필요한 HTML 문서가 모두 로딩된 후에
   jQuery나 javaScript 코드가 실행되기 때문에 문서준비 이벤트는 필요없다.
 


List of Articles
번호 분류 제목 글쓴이
63 JQuery 개요 01-01 jQuery란? file happiziger
62 JQuery 개요 01-02 jQuery 기능 happiziger
61 JQuery 개요 01-03 jQuery 라이브러리의 설치와 사용 file happiziger
60 JQuery 개요 01-04 jQuery 맛보기 예제 file happiziger
59 JQuery Core 02-01 jQuery Core file happiziger
58 JQuery Core 02-02 jQuery()를 이용하여 jQuery object를 생성하는 방법 happiziger
» JQuery Core 02-03 jQuery 스크립트의 작성 위치와 문서준비이벤트의 사용 happiziger
56 JQuery Core 02-04 jQuery의 단축 표현인 “$” 변경하기 file happiziger
55 Selector 03-01 jQuery Selector 의의와 종류 happiziger
54 Selector 03-02 기본 셀렉터(Basic Selector) file happiziger
53 Selector 03-03 계층 선택자 (Hierarchy selector) file happiziger
52 Selector 03-04 속성 선택자 (Attribute Selector) file happiziger
51 Selector 03-05 기본 필터 선택자 (Basic Filter) file happiziger
50 Selector 03-06 내용 필터 선택자 (Content Filter) file happiziger
49 Selector 03-07 보임 필터 선택자 (Visibility Filter) file happiziger
48 Selector 03-08 자식 요소 필터 선택자 (Child Filter) file happiziger
47 Selector 03-09 폼 선택자 happiziger
46 Traversing 04-01 Traversing(탐색)의 개념 happiziger
45 Traversing 04-02 트리 구조 탐색 (Tree Traversal) file happiziger
44 Traversing 04-03 필터링 (Filtering) file happiziger
Board Pagination Prev 1 2 3 4 Next
/ 4