jQuery 참조 예제 2.0 정보 jQuery_Basic 지식으로 요소 선택

jQuery Cookbook(O'Reilly 2009)에서 번역됨 2장 jQuery로 요소 선택, 2.0 소개

jQuery의 핵심은 이름, 속성, 상태 등을 기준으로 문서의 요소를 필터링하는 데 사용되는 선택기 엔진입니다. CSS가 널리 사용됨에 따라 jQuery에서 CSS 선택기 구문을 사용하는 것이 자연스러운 선택이 되었습니다. CSS1-3 사양의 대부분의 선택기를 지원하는 것 외에도 jQuery는 동시에 일부 특수 상태를 기반으로 요소를 선택하기 위해 많은 사용자 정의 선택기를 추가했으며 자체 선택기를 작성할 수도 있습니다.

문서에서 요소를 찾는 가장 쉬운 방법은 다음과 같은 jQuery 래퍼 함수와 CSS 선택기를 사용하는 것입니다.

<span class="pln">jQuery</span><span class="pun">(</span><span class="str">'#content p a'</span><span class="pun">);</span><span class="pln">
</span><span style="COLOR: #333399" class="com">//选择所有#content元素内的p元素中的a元素</span>

요소를 선택한 후 해당 요소에 대해 jQuery 메서드를 호출할 수 있습니다. 예를 들어 선택한 모든 링크 요소에 selected class 속성을 추가합니다.

<span class="pln">jQuery</span><span class="pun">(</span><span class="str">'#content p a'</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'selected'</span><span class="pun">);</span>

jQuery는 DOM 트리를 탐색하여 요소를 선택하는 데 도움이 되는 next(), prev(), parent() 등과 같은 다양한 메서드를 제공합니다. 이러한 메서드는 선택한 요소 집합을 필터링하기 위한 유일한 인수로 선택기 표현식을 허용합니다. 따라서 jQuery(...) 외에도 CSS 선택기도 여러 곳에서 사용됩니다.

선택기를 구축할 때 성능을 향상하려면 규칙을 따를 수 있습니다. 즉, 선택기 작성을 최대한 단순화합니다. 선택기 문자열이 복잡할수록 jQuery를 처리하는 데 더 오랜 시간이 걸립니다. jQuery는 내부적으로 브라우저의 기본 DOM 메서드를 사용하여 요소를 선택합니다. 따라서 선택기를 직접 사용하여 요소를 선택하는 것은 추상 캡슐화의 결과일 뿐입니다. 선택기를 직접 사용하는 데는 문제가 없지만 작성 중인 코드의 성능을 이해하는 것이 중요합니다. 다음은 선택기를 과도하게 사용하는 예입니다.

<span class="pln">jQuery</span><span class="pun">(</span><span class="str">'body div#wrapper div#content'</span><span class="pun">);</span>

더 정확한 위치 지정이 코드가 더 빠르게 실행된다는 의미는 아닙니다. 위의 선택기는 다음과 같이 다시 작성할 수 있습니다:

<span class="pln">jQuery</span><span class="pun">(</span><span class="str">'#content'</span><span class="pun">);</span>

이전 예와 비교할 때 이 코드는 동일한 작업을 수행하지만 성능 오버헤드를 많이 절약합니다. 때로는 선택기의 컨텍스트를 지정하여 성능을 더욱 향상시킬 수 있다는 점은 주목할 가치가 있습니다.