선택기는 getElementById 메소드의 향상된 버전으로 간주할 수 있습니다. getElementById 메소드는 HTML 요소를 반환하고 jQuery 선택기는 HTML 요소의 래퍼를 반환합니다. 이 래퍼 세트를 사용하여 jQuery는 HTML 요소에 더 조작 가능한 방법을 제공합니다. JQuery에서 핵심 함수 중 하나는 $입니다. 네, 그냥 이상한 이름을 가진 함수일 뿐입니다. 이 함수는 선택 함수이며 일반적인 사용법은

var obj=$(selector);

여기서 selector는 문자열이며, 아래에서 소개할 선택자입니다. 반환되는 것은 래핑된 요소 컬렉션입니다. 실제로 JQuery의 핵심 $ 함수의 기능은 선택기로 사용되는 것 이상입니다. 해당 매개변수가 함수인 경우 해당 기능은 페이지의 DOM 요소가 완전히 로드되면 해당 메서드가 실행됩니다. 처형되다. onload는 하나의 함수만 등록할 수 있지만 여러 번 호출할 수 있습니다. 즉, DOM이 완전히 로드된 후 실행되도록 여러 함수를 등록할 수 있으며 onload는 페이지의 모든 콘텐츠가 나타날 때까지 기다려야 합니다. 나중에 실행할 경우, 큰 사진이나 기타 내용이 있을 경우 기능 실행이 지연될 수 있습니다. $ 함수는 DOM 구조가 완전히 로드되는 한 실행될 수 있습니다. 간단한 예를 살펴보겠습니다.

p는 선택한 요소를 포함하는 배열형 객체입니다. [Methods] 노드를 열면 jQuery에서 제공하는 다양한 메서드를 볼 수 있습니다. 이 예에서는 요소가 하나만 있으므로 HTML 요소는 getElementById로 얻은 객체와 동일한 p[0]을 통해 얻을 수 있습니다.

jQuery 선택기의 장점은 브라우저가 CSS2와 호환되는지 여부에 관계없이 CSS2 선택기와 거의 완벽하게 호환된다는 것입니다. CSS 선택기에 익숙하지 않은 경우 이전 블로그인 CSS 선택기를 참조하세요. 선택된 요소에 대해 많은 메소드를 적용할 수 있습니다. 이 메소드는 이 기사의 초점이 아닙니다. 여기서는 첫 번째 메소드인 css(attr, value) 메소드가 attr 속성의 값을 제공할 수 있습니다. 래핑 요소의 CSS 속성에서 값으로 설정합니다. 아래 예제에서는 이 방법을 사용하여 페이지 요소에 약간의 글꼴 변경을 추가하여 특정 선택기에 의해 선택된 요소를 구분할 수 있습니다. 이 예제의 내용은 이전 글의 예제와 거의 동일하므로 따로 설명하지 않겠습니다. 다만, 이 글의 예제는 IE6에도 적용 가능합니다!

코드 복사