jQuery의 이것과 $(this)_jquery에 대한 자세한 논의

인터넷에는 jQuery의 this와 $(this)에 대한 소개가 많이 있습니다. 대부분은 this와 $(this)의 방향을 명확히 하고 있지만 실제로는 jQuery가 멤버 함수를 호출할 때 일반화할 수 없습니다. , 이는 dom 개체를 가리킵니다.

$(this)가 jQuery 객체를 가리키는 것은 이해가 되지만, 이는 dom 객체를 가리키는 것입니다. 이는 jQuery가 특별한 처리를 했기 때문입니다.

dom의 jQuery 객체를 생성할 때 jQuery는 dom에 대한 jQuery 객체를 생성할 뿐만 아니라 생성된 객체의 배열에 dom을 저장합니다.

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

elem = document.getElementById(match[2])
if (elem && elem.parentNode) {
This.length = 1
this[0] = 요소
}

this.context = 문서
this.selector = 선택기
이것을 돌려주세요

this[0] = elem 문은 객체 배열을 구현합니다. 그래서 JavaScript는 매우 흥미로운 언어입니다. 이것을 사용하여 액세스하면 그것이 가리키는 개체의 멤버 함수에 액세스할 수 있으며 실제로 이것은 개체의 배열입니다. DOM 개체를 저장합니다.

$("p").each() -- 루프를 살펴보겠습니다

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

각각: 함수( 콜백, 인수 ) {
          return jQuery.each( this, callback, args )
}  

각 함수의 호출을 읽은 후에는 jQuery.each( this, callback, args );가 객체 배열을 호출하고 객체 배열이 dom 객체를 저장하므로 콜백 함수에서 this는 자연스럽게 dom이라는 점을 이해해야 합니다. 대상

$("p").hide()　--멤버 함수 다시 살펴보기

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

숨기기: function() { 
        return showHide( this ); 
    }, 
 함수 showHide( 요소, 표시 ) {var elem, 디스플레이, 
        값 = [], 
        색인 = 0, 
        길이 = 요소.길이; 
    for ( ; 색인         elem = 요소[ 인덱스 ]; 
        if ( !elem.style ) { 
            계속하다; 
        } 
        값[ index ] = jQuery._data( elem, "olddisplay" ); 
        if ( 표시 ) { 
            // 이 요소의 인라인 디스플레이를 재설정하여 요소가 올바른지 확인합니다.
            // 계단식 규칙에 의해 숨겨졌는지 여부 
            if ( !values[ index ] && elem.style.display === "none" ) { 
                elem.style.display = ""; 
            } 
            // 디스플레이로 재정의된 요소 설정: 없음 
            // 기본 브라우저 스타일에 관계없이 스타일시트에서 
            // 그러한 요소의 경우 
            if ( elem.style.display === "" && isHidden( elem ) ) { 
                값[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) ); 
            } 
        } else { 
            display = curCSS( elem, "display" ); 
            if ( !values[ index ] && display !== "none" ) { 
                jQuery._data( elem, "olddisplay", 디스플레이 ); 
            } 
        } 
    } 
    // 두 번째 루프에서 대부분의 요소 표시 설정 
    // 지속적인 리플로우를 방지하기 위해 
    for( 색인 = 0; 색인         elem = 요소[ 인덱스 ]; 
        if ( !elem.style ) { 
            계속하다; 
        } 
        if ( !show || elem.style.display === "없음" || elem.style.display === "" ) { 
            elem.style.display = 표시? 값[ 인덱스 ] || "" : "없음"; 
        } 
    } 
    요소를 반환합니다. 
} 

最后看看$("p").bind()　--　事件

复主代码 代码如下:

바인딩: 함수( 유형, 데이터, fn ) { 
        return this.on(types, null, data, fn); 
    }, 

复主代码 代码如下:

on: 함수( 유형, 선택기, 데이터, fn, /*INTERNAL*/ one ) {
// 이 부분은 코드 생략
           return this.each( function() {                                        jQuery.event.add(this, 유형, fn, 데이터, 선택기
         });
},

bind 함수는 on 함수를 호출하고, on 함수는 Each 함수를 통해 jQuery.event.add를 구현합니다. 따라서 jQuery.event.add의 this는 dom 객체이기도 합니다. 따라서 이벤트의 this도 dom 객체입니다.

이상 내용은 jQuery의 $(this)에 대한 개인적인 이해입니다. 혹시 잘못된 부분이 있으면 연락주시거나 메시지를 남겨주세요