메뉴 건너뛰기

XE Guidebook

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

● jQuery()를 이용하여 jQuery object를 생성하는 방법

 

jQuery() 함수는 ()안에 셀렉터나 특별한 인자 값을 넣어 jQuery 개체를 만들 수 있다.
()안에 들어가는 형식에 따라 아래와 같이 3가지의 방법으로 처리되며,
그 역할과 기능은 전혀 다르게 이루어진다.
 
 ※ jQuery 개체 & javaScript 개체의 차이 
 
    jQuery 개체는 javaScript 개체와는 전혀 다르며, 사용법에서도 많은 차이가 난다.
    가령, $(“#id”)와 document.getElementById(“id”)를 통해 가져온 개체를 alert() 메서드를 통해 확인해 보면,
    jQuery 함수의 $(“#id”) 경우는 object 형식이며,
    javaScript의 document.getElementById(“id”) 경우는 HTML Element로 나타나는 걸 알 수 있다. 
  
  
① 첫번째 방법
 
  jQuery( selector [,context] ) 
 
jQuery() 함수 내부에 "selector"를 매개변수로 넣어 jQuery 개체를 만든다.
 
  jQuery('h1')  // DOM에서 h1 노드를 모두 선택하여 jQuery 개체로 만들어 준다.
  jQuery('ul li')  // DOM에서 ul 노드 내부에 있는 li 노드를 모두 선택하여 jQuery 개체로 만들어 준다.
 
 
② 두번째 방법
 
  jQuery( html [,ownerDocument] ) 
   
jQuery() 함수 내부에 "HTML 문자열"을 입력하여 jQuery 개체를 만든다.
 
  jQuery("<p id='test'> 안녕하세요 </p>").appendTo("body");
    // <body>태그에 <p>태그를 생성하여 추가한다.
 
  javaScript에서 노드를 동적으로 만드는 createElement() 메서드와 같은 기능을 하며,
  jQuery 내부에서는 반드시 createElement() 메서드를 사용하여 처리한다는 것을 알 수 있다.
 
 
③ 세번째 방법
 
  jQuery( callback ) 
 
jQuery() 함수의 괄호 안에 함수가 들어갈 경우,
이 함수는 웹브라우저가 HTML 문서를 읽어 DOM Tree를 생성한 직후에 실행되는
"콜백함수"가 되는데, "문서준비이벤트"라고 한다.
콜백함수는 "스스로 부르는 함수"라는 뜻으로 특정 조건을 만족하여 스스로 호출되는 함수이다.
 
이 방법은 jQuery를 <head>태그 내에 작성할 때에는 반드시 사용해야 한다.
만약 jQuery를 <head>태그 내에 작성하고 콜백함수를 사용하지 않으면,
웹브라우저는 <body>보다 <head>를 먼저 로딩하기 때문에
<body>의 내용들이 로딩되기 전이라면 jQuery가 body의 노드들을 읽을 수 없으므로
문서준비 이벤트가 반드시 필요한 것이다.
 
  jQuery ( function() {alert("문서가 모두 읽어 졌습니다.")});
 
  ☞ 문서준비이벤트 참조
 
 


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
» JQuery Core 02-02 jQuery()를 이용하여 jQuery object를 생성하는 방법 happiziger
57 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