보다 효율적인 jQuery 선택기를위한 5 가지 팁

jQuery의 핵심은 쿼리에 있습니다. CSS 선택기 구문을 사용하여 DOM 요소를 찾고 이러한 요소 컬렉션에서 메소드를 실행합니다. JQuery는 기본 브라우저 API 방법을 사용하여 DOM 컬렉션을 검색합니다. 최신 브라우저는 ,

및

를 지원하며 CSS 구문을 구문 분석 할 수 있습니다. 그러나 이전 브라우저는 getElementsByClassName 및 만 제공합니다. 최악의 경우 jQuery의 지글 지글 엔진은 선택기 문자열을 구문 분석하고 일치하는 요소를 찾아야합니다. 다음은 jQuery 선택기를 최적화하는 데 도움이되는 5 가지 팁입니다. querySelector querySelectorAll ID 선택기를 사용하는 것이 선호합니다 getElementById getElementByTagName

html id 속성은 각 페이지에서 고유하며 오래된 브라우저조차도 개별 요소를 매우 빨리 찾을 수 있습니다.

1. 클래스 선택기 만 사용하지 마십시오 다음 클래스 선택기는 현대식 브라우저에서 매우 빠르게 실행됩니다.

그러나 IE6/7 및 Firefox 2와 같은 이전 브라우저에서는 jQuery가 페이지의 모든 요소를 ​​확인하여 "MyClass"가 적용되는지 확인해야합니다. 태그 이름으로 자격을 갖추면 선택기가 더 효율적입니다.

jQuery는 이제 검색을 div 요소로 제한 할 수 있습니다.

$("#myelement");

선택기를 간단하게 유지하십시오

2. 지나치게 복잡한 CSS 선택기를 피하십시오. HTML 문서가 매우 복잡하지 않으면 2 ~ 3 개 이상의 예선이 필요하지 않습니다. 다음의 복잡한 선택기를 고려하십시오 :
는 독특해야하므로 선택기를 단순화 할 수 있습니다.

선택기 특이성을 왼쪽에서 오른쪽으로 향상시킵니다

$(".myclass");

JQuery의 선택기 엔진이 어떻게 작동하는지 이해하는 것이 유용합니다. 마지막 선택기에서 작동하므로 이전 브라우저에서는 다음과 같은 쿼리입니다.

는 모든

$("div.myclass");

요소를 배열에로드합니다. 그런 다음 각 노드의 상위 노드를 통해 위쪽으로 반복하고 찾을 수없는 노드를 거부합니다. 페이지에 수백 개의

태그가있는 경우 쿼리가 특히 비효율적입니다. 문서에 따라 가장 자격을 갖춘 선택기를 먼저 검색하여 쿼리를 최적화 할 수 있습니다. 그런 다음 하위 선택자의 시작점으로 사용할 수 있습니다.

3. 선택기의 복제를 피하십시오 동일한 선택기를 두 번 사용하는 것은 드 rare니다. 다음 코드는 각 P 태그를 세 번 선택합니다. jQuery는 체인 작업을 지원합니다. 따라서 동일한 코드를 다시 작성하여 단일 선택기에만 적용 할 수 있습니다.
동일한 요소 세트를 여러 번 사용해야하는 경우 jQuery 객체를 변수로 캐시해야합니다.

$("#myelement");

표준 DOM 컬렉션과 달리 jQuery 컬렉션은 동적이지 않으며 문서에서 단락 태그가 추가되거나 제거 될 때 객체가 업데이트되지 않습니다. DOM 컬렉션을 작성하여 필요할 때 jQuery 함수로 전달 하여이 제한을 해결할 수 있습니다.

다른 jQuery 선택기 최적화 팁이 있습니까?

$(".myclass");

효율적인 JQuery Selectors (FAQ)

에 대한 질문이 자주 묻습니다 (FAQ 부품은 원래 FAQ 함량으로 매우 복제되어서 여기에서 생략되며, 유사 원인 성이 어렵고 너무 길다. 일부 FAQ 문제는 필요에 따라 선택적으로 유지되거나 다시 작성 될 수있다.)

.

위 내용은 보다 효율적인 jQuery 선택기를위한 5 가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!