jQuery 핵심 - jQuery() 메서드
예제
div 요소의 자식 요소로 belonging하는 p 요소를 찾아 그들의 경계 속성을 설정합니다：
$("div > p").css("border", "1px solid gray");
정의와 용법
jQuery() 메서드는 CSS 선택자를 포함한 문자열을 받아들이며 요소 집합을 매칭합니다。
jQuery() 함수는 세 가지 문법을 가집니다：
문법 1
CSS 선택자를 포함한 문자열을 받아들이며 요소 집합을 매칭합니다：
jQuery(selector, [context]
문법 2
원시 HTML 문자열을 사용하여 DOM 요소를 생성합니다：
jQuery(html,ownerDocument]
문법 3
DOM 문서가 로드된 후에 실행되는 함수를 바인딩합니다：
jQuery( callback )
jQuery( selector, [ context ] )
이 문법은 다음과 같은 용법이 있습니다:
용법 1: 선택자 환경 설정
문법
jQuery(selector, [context]
기본적으로, 선택자는 문서의 루트에서 DOM을 검색합니다. 그러나 $()에 선택 가능한 context 매개변수를 설정할 수 있습니다.
예를 들어, callback에서 요소를 찾고 싶다면 다음과 같이 검색할 수 있습니다：
예제
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
span 선택자를 this 환경에 제한했기 때문에, 클릭된 요소 중에서만 span이 추가된 클래스를 받습니다.
선택자 환경은 내부적으로 .find() 메서드를 통해 구현됩니다. 따라서 $("span", this)는 $(this).find("span")와 동일합니다.
jQuery의 핵심 기능은 모두 이 함수를 통해 구현됩니다. jQuery의 모든 것이 이 함수에 기반하고, 이 함수를 어떤 방식으로든 사용하는 것입니다. 이 함수의 가장 기본적인 사용법은, CSS 선택자로 구성된 표현식을 전달하고, 해당 표현식에 따라 모든 일치하는 요소를 찾는 것입니다.
기본적으로, context 매개변수가 지정되지 않으면, $()는 현재 HTML 문서에서 DOM 요소를 찾습니다; context 매개변수가 지정되면(예: DOM 요소 집합이나 jQuery 객체), 해당 context에서 찾습니다. jQuery 1.3.2 이후, 반환되는 요소 순서는 context에서 등장한 순서와 일치합니다.
용법 2: DOM 요소 사용
문법
jQuery(element)
이 함수는 다른 방법으로 찾은 DOM 요소를 사용하여 jQuery 객체를 생성할 수 있습니다. 이 기능의 일반적인 사용법은, this 키워드를 통해 callback 함수에 전달된 요소에 jQuery 메서드를 호출하는 것입니다:
예제
$("div.foo".click(function() {
$(this).slideUp();
});
이 예제는 요소가 클릭될 때 슬라이딩 애니메이션을 사용하여 요소를 숨기는 데 사용됩니다. 처리기가 this 키워드에 의해 전달받은 클릭된 요소가 순수한 DOM 요소라면, jQuery 메서드를 호출하기 전에 이 요소를 jQuery 객체로 포장해야 합니다.
이 함수는 XML 문서와 Window 객체(그들도 DOM 요소가 아니지만)를 유효한 매개변수로 받을 수 있습니다.
XML 데이터가 Ajax 호출에서 반환되면, $() 함수를 사용하여 jQuery 객체로 데이터를 포장할 수 있습니다. 작업이 완료되면, .find() 및 다른 DOM 탐색 메서드를 사용하여 XML 구조 중 단일 요소를 가져올 수 있습니다.
용법 3: jQuery 객체 복사
문법
jQuery(jQuery 객체)
jQuery 객체를 $() 함수에 매개변수로 전달하면, 해당 객체의 복사본이 생성됩니다. 초기 객체와 마찬가지로 새로운 jQuery 객체는 동일한 DOM 요소를 참조합니다.
용법 4: 빈 콜렉션 반환
문법
jQuery()
jQuery 1.4에서는 매개변수가 없는 jQuery() 메서드 호출이 빈 jQuery 콜렉션을 반환합니다. 이전 버전의 jQuery에서는 이렇게 호출하면 document 노드가 포함된 콜렉션을 반환합니다.
jQuery( html, [ ownerDocument ] )
이 문법은 다음과 같은 용법이 있습니다:
용법 1: 새로운 요소 생성
문법
jQuery(html,ownerDocument]
수동으로 작성된 HTML 문자열이나 템플릿 엔진이나 플러그인으로 생성된 문자열, 또는 AJAX를 통해 로드된 문자열을 전달할 수 있습니다. 하지만 input 요소를 생성할 때는 제한이 있으므로 두 번째 예시를 참고하십시오.
물론 이 문자열은 슬래시(/)나 반슬래시()를 포함할 수 있습니다. 단일 요소를 생성할 때, 닫힌 태그나 XHTML 형식을 사용하십시오. 예를 들어, span을 생성하려면 $("<span/>") 또는 $("<span></span>")를 사용할 수 있지만, $("<span>")는 권장하지 않습니다. jQuery에서는 이 문법이 $(document.createElement("span"))와 동일합니다.
String을 매개변수로 전달하는 경우, jQuery는 문자열이 HTML인지 확인합니다(예를 들어, 문자열의 일부 위치에 태그가 있는지). 아닌 경우, 문자열을 선택자 표현식으로 해석합니다. 하지만 문자열이 HTML 부분이면, jQuery는 해당 HTML 부분이 설명하는 DOM 요소를 생성하려고 시도합니다. 그런 다음, 해당 DOM 요소를 참조하는 jQuery 객체를 생성하고 반환합니다:
예제
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
HTML 부분이 속성이 없는 간단한 태그보다 복잡하다면, 예를 들어 위의 예시와 같은 HTML, 요소의 실제 생성 과정은 브라우저의 innerHTML 메커니즘에 의해 완료됩니다. 구체적으로, jQuery는 새로운 <div> 요소를 생성한 후, 전달된 HTML 부분에 요소의 innerHTML 속성을 설정합니다. 매개변수가 간단한 태그일 때, 예를 들어 $("<img />") 또는 $("<a></a>")와 같이, jQuery는 내장된 JavaScript createElement() 함수를 통해 요소를 생성합니다.
플랫폼 간 호환성을 보장하기 위해, 단편의 구조는 양호해야 합니다. 다른 요소를 포함할 수 있는 태그는 반드시 짝이 맞아야 하며(닫는 태그를 포함),
$("<a href="http://jquery.com"></a>");
하지만, jQuery는 XML과 유사한 태그 문법도 허용합니다：
$("<a/>");
다른 요소를 포함할 수 없는 태그는 닫을 수도 있고 닫지 않을 수도 있습니다：
$("<img />");
$("<input>");
사용법 2: 속성과 이벤트 설정
문법
jQuery(html,props)
jQuery 1.4에서는 두 번째 매개변수에 속성 매핑을 전달할 수 있습니다. 이 매개변수는 .attr() 메서드에 전달할 수 있는 속성의 확장 집합을 받아들입니다. 또한, 어떤 이벤트 유형을 전달할 수 있으며, 아래의 jQuery 메서드를 호출할 수 있습니다: val, css, html, text, data, width, height, 또는 offset.
참고로, Internet Explorer는 input 요소를 생성하고 타입을 변경하지 않게 합니다. 예를 들어, "<input type="checkbox" />"와 같이 타입을 지정해야 합니다.
예제
type 속성, 속성 값, 그리고 일부 이벤트를 설정하면서 <input> 요소를 생성합니다.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
DOM 문서가 로드된 후에 실행될 함수를 바인딩할 수 있습니다.
이 함수의 역할은 $(document).ready()와 같지만, 이 함수를 사용할 때는 페이지에서 DOM 로드가 완료된 후에 실행되어야 할 다른 $() 연산자를 모두 이 함수 안에 포함해야 합니다. 기술적으로는 연결 가능하지만, 이렇게 연결하는 경우는 많지 않습니다.
예제
DOM이 로드된 후, 그 안의 함수를 실행합니다：
$(function(){
// 문서 준비 완료
});
