jQuery の this と $(this)_jquery の詳細な説明

jQuery の this と $(this) に関する紹介はインターネット上にたくさんありますが、そのほとんどは this と $(this) の方向を明確にしているだけであり、jQuery がメンバー関数を呼び出す際には一般化できません。 、これは dom オブジェクトを指します。

$(this) が jQuery オブジェクトを指しているのは理解できますが、これは 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() -- ループを見てみましょう

コードをコピーします コードは次のとおりです: 各: function( callback, args ) {

return jQuery.each( this, callback, args ); }

各関数の呼び出しを読んだ後、 jQuery.each( this, callback, args ); がオブジェクトの配列を呼び出し、オブジェクトの配列には dom オブジェクトが格納されるため、コールバック関数内の this は当然 dom であることが理解できるはずです。ターゲット

$("p").hide() をもう一度見てください -- メンバー関数

コードをコピー

コードは次のとおりです:

非表示: function() {
        return showHide( this ); 
    }、
 function showHide( elements, show ) {var elem, display,
        値 = [],
        インデックス = 0,
        長さ = 要素.長さ; 
    for ( ; インデックス         elem = 要素[インデックス]; 
        if ( !elem.style ) {
            続く; 
        }
        値[インデックス] = jQuery._data( elem, "olddisplay" ); 
        if (表示) {
            // この要素のインライン表示をリセットして、
であるかどうかを確認します。             // カスケードルールによって隠蔽されているかどうか
            if ( !values[index ] && elem.style.display === "none" ) {
                elem.style.display = ""; 
            }
            // display: none でオーバーライドされた要素を設定します
            // デフォルトのブラウザ スタイルに合わせてスタイルシート内で
            // そのような要素の場合
            if ( elem.style.display === "" && isHidden( elem ) ) {
                値[インデックス] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) ); 
            }
        } else {
            表示 = curCSS( elem, "表示" ); 
            if ( !values[index ] && display !== "none" ) {
                jQuery._data( elem, "olddisplay", display ); 
            }
        }
    }
    // 2 番目のループでほとんどの要素の表示を設定します
    // 継続的なリフローを避けるため
    for ( インデックス = 0; インデックス         elem = 要素[インデックス]; 
        if ( !elem.style ) {
            続く; 
        }
        if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
            elem.style.display = 表示 ?値[インデックス] || "" ： "なし"; 
        }
    }
    要素を返します。 
}

上のページのコードから、このオブジェクトの数を取得するには、このオブジェクトの数が、dom オブジェクトではなく、jQuery のオブジェクトの数であるため、showHide 関数が取得されていることがわかります。 1 つの dom オブジェクト。

最後に見る$("p").bind() -- イベント

复制代 代码如下:

バインド: function( タイプ, データ, fn ) {
        return this.on(types, null, data, fn ); 
    }、

复制代码代码如下:

on: function( タイプ, セレクター, データ, fn, /*INTERNAL*/ one ) {
// コードのこの部分は省略されています
return this.each( function() { jQuery.event.add(this、types、fn、data、selector ); });
}、

bind 関数は on 関数を呼び出し、on 関数は each 関数を通じて jQuery.event.add を実装します。したがって、jQuery.event.add( の this も dom オブジェクトです。したがって、イベントの this も dom オブジェクトです。

上記は、jQuery の this と $(this) についての私の個人的な理解です。間違いがある場合は、私に連絡するか、メッセージを残してください。