jQuery 3가지 호출방법
1. jQuery의 핵심은 jQuery() 함수이다. 모든 jQuery의 시작은 jQuery()함수를 거쳐햐 한다. 이 함수를 통해 리턴되는 결과는 모두 jQuery 객체로서
jQuery의 수많은 기능들을 사용할 수 있게 된다. jQuery 명령들을 잘 사용하기 위해서는 함수의 용도와 사용법에 대해 잘 알고 있어야 한다.
2. jQuery()함수는 ()안에 들어가는 형식에 따라 3가지로 처리된다.
2-1. jQuery()함수 내부에 selector를 매개 변수로 넣어 jQuery 객체를 만들 수 있다.
jQuery('h1') // DOM에서 h1 노드를 모두 선택하여 jQuery 객체로 만들어 준다.
jQuery('ul h1') // DOM에서 ul 노드 내부에 있는 li 노드를 모두 선택하여 jQuery 객체로 만들어 준다.
2-2. jQuery()함수 내부에 HTML 문자열을 입력하면 jQuery 객체를 직접 만들 수 있다.
// <body> 태그에 <p>태그를 생성하여 추가한다.
jQuery('<p id="hello"> 안녕하세요 </p>').appendTo('body');
Javascript에서 노드를 동적으로 만드는 createElement() 메서드와 같은 기능을 한다. jQuery 내부에서는 반드시 createElement()메서드를 사용하여
처리를 한 것을 알 수 있다.
2-3. jQuery()의 괄호 안에 함수가 들어가는 경우
(문서 준비 이벤트) 이 함수는 웹 브라우저가 HTML문서를 읽어 DOM Tree를 생성한 직후에 실행되는 콜백함수*
*콜백함수: 스스로 부르는 함수, 특정 조건을 만족하여 스스로 호출되는 함수
이 방법은 jQuery를 <head> 태그 내에서 작성할 때에 반드시 사용해야 한다. 왜내하면 웹 브라우저는 <body>보다 <head>를 먼저 로딩하기때문에
<body>의 내용들이 로딩 전이라면 jQuery가 body의 노드들을 읽을 수 없기 때문이다.
*jQuery
jQuery(function() { alert("문서가 모두 읽어졌습니다.")} );
*Javascript
window.onload = function() { alert("문서가 모두 읽어졌습니다."); };
*jQuery vs Javascript 차이점
window.onload - HTML 로딩이 끝난 후에 실행되는 것으로, 이미지와 같은 콘텐츠가 모두 불려진 후에 콜백함수 호출
jQuery(function) - 웹브라우저가 DOM Tree를 생성하게 될 때에 콜백함수가 호출된다. 이는 HTML의 뼈대만 읽고 콜백함수를 호출하고 난 후, 이미지나 콘텐츠 등을 나중에 Load하는 것이다.
'개발 및 관리 > Javascript' 카테고리의 다른 글
| jQuery 호출 및 표기방법 (0) | 2022.10.23 |
|---|---|
| jQuery 명령어 잘 정리된 사이트 (0) | 2022.10.22 |
| 자바스크립트 객체 생성 3가지 방법 (0) | 2022.10.20 |
| 자바스크립트 배열 생성 방법 (0) | 2022.10.20 |
| Javascript Selector (0) | 2022.05.19 |
