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

jQuery 대상 을 설명 할 때마다 jQuery. prototype. init 대상 으로 돌아 가면 많은 사람들 이 모 릅 니 다. init 는 jQuery. fn 의 방법 인 데 사실은 방법 이 아니 라 init 의 구조 함수 입 니 다. js 의 prototype 대상 이 계승 할 수 있 기 때 문 입 니 다. 게다가 js 의 대상 은 복사 가 아 닙 니 다. new jQuery.new jQuery. fn 과 new jQuery. fn. init 의 하위 대상 은 같 습 니 다. 다만 init 가 실행 되 었 는 지 의 차이 가 있 습 니 다.
선택 기 를 사용 할 때 $(selector, content) 는 init (selectot, content) 를 실행 합 니 다. inti 에서 어떻게 실행 되 는 지 보 겠 습 니 다.

 
  
if ( typeof selector == "string" ) 
  
{ 
  
 //    ，    HTML     #id 
  
    var match = quickExpr.exec( selector ); 
  
    //         DOM    、    jQuery   。 
  
 //selector #id    
  
 if ( match && (match[1] || !context) ) 
  
 { 
  
  // HANDLE: $(html) -> $(array) 
  
  //HTML  ,  clean  HTML   
  
  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   . context         
  
 } 
  
 else{ 
  
  return jQuery( context ).find( selector ); 
  
 } 
  
} 
  
 
 

선택 기 만 $('\ # id') 로 쓸 때 가장 빠르다 는 뜻 입 니 다. getElement ById 를 한 번 실행 한 셈 입 니 다. 뒤의 프로그램 은 더 이상 실행 하지 않 아 도 됩 니 다.물론 우리 가 필요 로 하 는 선택 기 는 이렇게 간단 하지 않 습 니 다. 예 를 들 어 우리 가 필요 로 하 는 CSS 는 className 입 니 다. 이러한 쓰기 $('\ # id. className') 와 $('\ # id'), find ('className') 가 있 습 니 다.이 두 가지 서법 의 집행 결 과 는 모두 같다. 예 를 들 어 돌아 오 는 것 은 모두 그렇지만 집행 의 효율 은 완전히 다르다.
위의 코드 를 분석 해 보 세 요. $('\ # id') 와 같은 간단 한 선택 기 가 아니라면 find 함 수 를 실행 합 니 다. find 가 도대체 사용 하 는 지 다시 한번 봅 시다.

 
  
find: function( selector ) { 
  
 //          
  
 var elems = jQuery.map(this, function(elem){ 
  
  return jQuery.find( selector, elem ); 
  
 }); 
  
 //         ，        
  
 //     js          test 
  
 //indexOf("..")      xpath   ,    selector          
  
 //              
  
 return this.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ? 
  
  jQuery.unique( elems ) : 
  
  elems ); 
  
} 
  
 
 

이렇게 $('\ # id. className') 를 쓰 면 확 장 된 find ('\ # id. className', document) 로 실 행 됩 니 다. 현재 this 는 document 의 jQuery 배열 이기 때 문 입 니 다. 확 장 된 find 의 실현 을 보고 있 습 니 다. 코드 가 많 으 면 열거 하지 않 습 니 다. 한 마디 로 두 번 째 매개 변수 전달 이 진행 되 는 dom 첫 번 째 키 노드 부터 찾 습 니 다. \ # 비교 id 를 만 나 고 만 납 니 다. ClassName 보다.그리고:
만약 우리 가 이렇게 $('\ # id'). find ('className') 를 쓴다 면, 그 프로그램 은 이렇게 만 실 행 됩 니 다. 첫 번 째 init 에서 getElement ById 를 한 단계 실행 하면 return 입 니 다. 이 어 find ('className', divDocument) 를 실행 합 니 다. divDocument 는 우리 가 처음으로 선택 한 div 태그 입 니 다. document 아래 dom 대상 이 많 을 때, 이번 에는 divDocument 만 옮 겨 다 니 는 것 이 많이 줄 어 들 지 않 았 습 니까?그리고 처음 id 를 선택 하 는 속도 도 옮 겨 다 니 는 것 보다 훨씬 빠르다.
이제 다 들 알 겠 지?즉, 1 층 선택 은 ID 가 가장 좋 고 간단 한 선택 기 는 범 위 를 정의 하고 속 도 를 높이 는 것 이 목적 이다.