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

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

WBOY

풀어 주다： 2016-05-16 16:54:39

원래의

1199명이 탐색했습니다.

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인 것이 바람직하지만, 범위를 정의하고 속도를 향상시키는 것이 목적이다.