javascript jQuery selector $('# foo a')는 어떻게 평가됩니까?




jquery select or (6)

jQuery 코드 ( https://coderwall.com/p/7uchvg )의 예로, $('#foo a'); 다음과 같이 동작합니다.

페이지에서 모든 a 찾은 다음 #foo 내부를 필터링하십시오.

그리고 그것은 효율적으로 보이지 않습니다.

그 맞습니까? 그리고 만약 그렇다면, 우리는 그것을 더 나은 방법으로 어떻게해야합니까?


Answer #1

내부의 #foo 요소로 필터링하는 대신 클래스에 요소를 첨부하고 $("a.class"); 와 같은 클래스 a 요소를 가져옵니다 $("a.class"); . 이것은보다 효율적입니다.


Answer #2

맞습니다 - Sizzle (jQuery의 선택기 엔진)은 CSS 선택기와 같은 방식으로 작동합니다. CSS와 Sizzle 선택자는 오른쪽에서 왼쪽 으로 평가 되므로 #foo a 모든 노드를 찾은 다음 #foo 에서 #foo 된 노드별로 필터링합니다.

일반적으로 클래스 선택 자나 ID를 부여하여 리프 선택 자의 특이성을 높임으로써이를 향상시킵니다.


Answer #3

선택기 순서를보다 세부적으로 제어하려면 find ()를 사용할 수 있습니다.

$('#foo').find('a');

물론 이것은 find ()와 filter ()를 연결할 수있는 더 복잡한 선택기를 사용하면 더욱 인상적입니다.

레코드 $('#foo').find('a') === $('a','#foo')

[업데이트] 좋아, 나중에 링크가 말하는 내용과 정확히 일치한다는 것을 깨달았습니다 ...

작년 jQuery 선택기 엔진 (Sizzle)이 리팩토링되었으므로 여기에서 자세한 설명을 볼 수 있습니다. http://www.wordsbyf.at/2011/11/23/selectors-selectoring/


Answer #4

그러나 또 다른 "스스로 해보기":

  1. jsperf : 10000 개 요소의 다양한 선택자
  2. jsperf : 300 개 요소의 다양한 선택기
  3. "더 대표적인 DOM"에있는 다양한 선택자를위한 jsperf

"평평한"DOM (1 & 2)과 큰 차이는없는 것처럼 보이지만 성능은 중첩 된 DOM에 따라 훨씬 더 다양합니다.

또한 일부 테스트 케이스는 올바른 요소 (예 : $('.a') .a $('.a') vs $('.a', context) )를 선택하지 않았 음을 유의하십시오 $('.a') 그러나 비교를 위해 원래의 테스트에서 남겨 둡니다.


Answer #5

이 예제는 foo 라는 요소에 a 모든 앵커 요소 a 를 검색하여 페이지의 모든 a를 찾은 다음 원하는 #foo를 #foo로 선택해야합니다.

$("a #foo");

이것은 요소 내부 a 모든 foo 요소를 검색합니다.


Answer #6

어떻게하면 더 잘 할 수 있을까요?

jQuery의 컨텍스트 매개 변수를 사용하십시오.

$('a', '#foo');

이제 jQuery는 id : foo를 사용하여 요소의 컨텍스트에서 모든 앵커를 검색합니다.

당신의 질의에서 문맥은 생략 될 때 문서로 디폴트된다 :

$('#foo a'); == $('#foo a', document); 

이 경우 쿼리가 실제로 효율적이지 않습니다.

이 기사를 살펴보십시오.





sizzle