jQuery syntax selectors, 이것이 똑같은 것입니까?

Question

선택 구문에 대해 다음과 같은 선호도가 있습니다.

 $('#mydiv > a.selectMe').hide();
 $('#mydiv').children('a.selectMe').hide();

나에게 jQuery에 대한 문서가 약간 모호하기 때문에 약간 혼란스러워 보입니다.

"부모> 자식 반환 : 배열은"부모 "에 의해 지정된 요소의"자식 "으로 지정된 모든 자식 요소와 일치합니다.

그리고

"어린이 (Expr) 반환 : jQuery는 일치하는 각 요소 세트의 모든 고유 한 직계 어린이를 포함하는 일련의 요소를 얻습니다."

내 마음 속에 명확히해야 할 질문은 첫 번째 형태가 모든 어린이/손자를 반환하는지 또는 두 번째 형태가 나타내는 직계 자녀가 사실인지 여부입니다. 이 중 하나는 jQuery 문서 페이지에서 "선택기"형식이고 다른 하나는 "횡단"형식이며, 나에게는 비슷한 기능적 작업이지만 정확히 같은 것은 아닙니다.

따라서 여기의 질문은 다음과 같습니다.
어떤 형태가 더 빠르나요? 그들은 실제로 같은 것을 선택합니까, 아니면 '부모> 자녀'양식이 직대 자녀뿐만 아니라 자녀를 선택합니까?

Answer 1

$ ( '#mydiv a.selectme') - ID "mydiv"가있는 태그의 댄스 인 클래스 'selectme'로 모든 앵커를 찾습니다. 이것들은 깊이 둥지를 틀 수 있습니다.

$ ( '#mydiv> a.selectme') - 직계 자녀를 찾습니다.

직계 자녀를 얻는 두 가지 예 사이에 어느 것이 더 빠른지에 대해서는 ... 나는 테스트 할 시간 시험을했다.

나는 'mydiv'가있는 div 내에 클래스 'selectme'가있는 10,000 개의 앵커 태그가있는 페이지를 가지고있었습니다.

$("#mydiv").children("a.selectMe") - 485ms
$("#mydiv > a.selectMe") - 374ms

기본적으로 선택기를 사용하여 모든 작업을 수행하는 것이 지속적으로 빠르지 만 무시할만한 차이입니다. 페이지에 10k 앵커가 있다면 완전히 다른 문제에 직면 해 있습니다. :-)