jquery 선택기 원리 소개($() 사용법)_jquery

jQuery 객체가 선언될 때마다 jQuery.prototype.init 객체가 반환됩니다. 많은 사람들은 init가 분명히 jQuery.fn의 메소드라는 것을 이해하지 못합니다. init.함수, js의 프로토타입 객체는 상속을 실현할 수 있고 js의 객체는 복사본이 아닌 참조일 뿐이므로 new jQuery.fn과 new jQuery.fn.init는 동일합니다. , 그러나 다르게 초기화될 때까지 실행되지 않습니다.

선택기 $(selector,content)를 사용하면 init(selectot,content)가 inti에서 어떻게 실행되는지 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

if ( typeof selector == "string" )
{
//정규 일치, HTML 코드인지 #id인지 확인
var match = QuickExpr.exec(selector);
//DOM 요소 집합, 문서 또는 jQuery가 없습니다. 찾을 개체 .
//선택기는 #id 형식입니다.
if ( match && (match[1] || !context) )
{
// HANDLE: $(html) -> (array )
//HTML 코드, HTML 코드 완성을 위해 clean 호출
if ( match[1] ){
selector = jQuery.clean( [ match[1] ], context );
}
// 예: $("#id")
else {
//id의 Dom이 로드되었는지 확인
var elem = document.getElementById( match[3] );
if ( elem ){
if ( elem.id != match[3] )
return jQuery().find( selector );
return jQuery( elem );//실행 완료 return
}
selector = [];
}
//ID가 없는 형식. 컨텍스트 또는 전체 텍스트에서 검색
}
else{
return jQuery( context ). find( selector );
}
}

즉, $('#id')로 작성된 선택자만이 가장 빠르며, 이는 getElementById를 한 번 실행하는 것과 같습니다. 후속 프로그램은 더 이상 실행이 필요하지 않습니다. 물론 우리에게 필요한 선택기는 그다지 간단하지 않은 경우가 많습니다. 예를 들어 $('#id.className') 및 $('#id')와 같은 작성 방법이 있는 id 아래에 있습니다. find('.className' ); 두 작성 방법의 실행 결과는 동일합니다. 예를 들어

는 확실히 을 반환하지만 실행 효율성은 완전히 다릅니다.

위 코드를 분석한 후 $('#id')와 같은 단순 선택자가 아닌 경우 find 함수가 실행됩니다. 그러면 find가 수행하는 작업을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

find: function( selector ) {
// 현재 객체에서
찾기 var elems = jQuery.map(this, function(elem){
return jQuery.find( selector, elem );
});
//The 아래 코드는 무시해도 됩니다. 처리만 하면 됩니다
//js 일반 객체의 정적 메서드 테스트가 여기에 적용됩니다
//indexOf("..")는 xpath의 구문을 이해해야 합니다. 선택기에 상위 노드가 포함되어 있는지 확인 쓰기
//원래 의도는 배열의 반복되는 요소를 필터링하는 것입니다.
return this.pushStack( /[^ >] [^ >]/.test( selector ) || selector.indexOf("..") > ; -1 ?
jQuery.unique( elems ) :
elems );
}

$ ('#id .className') 이와 같이 Extended find('#id .className',document)를 실행합니다. 현재 이것은 문서의 jQuery 배열이기 때문에 확장된 구현을 살펴보겠습니다. 코드가 많아서 나열하지 않겠습니다. 간단히 말해서 두 번째부터 시작하여 매개변수를 전달한 후 DOM의 첫 번째 하위 노드를 검색하고 #을 만나서 비교합니다. ClassName 및: < 및 기타 처리. 그렇다면 최적화를 원한다면 두 번째 매개변수 컨텍스트의 범위를 최소화하여 순회가 거의 없도록 하는 방법을 찾아야 할까요?

$('#id').find('.className') 이렇게 쓰면 프로그램은 처음 초기화할 때 getElementById를 실행한 다음, 이렇게만 실행됩니다. 그런 다음 find('.className', divDocument)를 실행하면 divDocument는 처음 선택한 div 태그입니다. 문서 아래에 DOM 개체가 많으면 이번에는 divDocument만 탐색하는 시간이 훨씬 줄어들까요? , 처음으로 ID를 선택하는 속도도 순회보다 훨씬 빠릅니다.

이제 모두들 이해하셔야 합니다. 즉, 1차 선택은 ID인 것이 바람직하지만, 범위를 정의하고 속도를 향상시키는 것이 목적이다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.