jqueryセレクターの原理紹介($()の使い方)_jquery

jQuery オブジェクトが宣言されるたびに、jQuery.prototype.init オブジェクトが返されます。init が明らかに jQuery.fn のメソッドであることを理解していません。実際、これはメソッドではなく、jQuery.fn の構造です。 js のプロトタイプ オブジェクトは継承を実現でき、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 はありません見つかるオブジェクト。
//セレクターは #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 フォーム。コンテキストまたはフルテキストで検索します
}
else{
return jQuery( context )。 find( selector );
}
}

これは、$('#id') として記述されたセレクターのみが最速であることを意味し、これは getElementById を 1 回実行するのと同等であり、後続のプログラムはこれ以上実行する必要はありません。もちろん、多くの場合、必要なセレクターはそれほど単純ではありません。たとえば、id の下の 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 の通常のオブジェクトの静的メソッドのテストがここに適用されます
//indexOf("..") は xpath の構文を理解する必要があります。セレクターに親ノードが含まれているかどうかを判断します。 Writing
//本来の目的は、配列の繰り返し要素をフィルターすることです
return this.pushStack( /[^ >] [^ >]/.test( selector ) || selector.indexOf("..") > ; -1 ?
jQuery.unique( elems ) :
elems );
}

$ と書くと('#id .className') このように、Extended find('#id .className',document) が実行されます。現在の this はドキュメントの jQuery 配列であるため、拡張された関数の実装を見てみましょう。 find. コードはたくさんあるので列挙しません。つまり、パラメータを渡した後、DOM の最初の子ノードの検索を開始し、# と一致して ID を比較します。 ClassName、および: < - およびその他の処理。 それでは、最適化したい場合は、走査がほとんどなくなるように、2 番目のパラメーターのコンテキストの範囲を最小限に抑える方法を見つけるべきでしょうか?
$('#id').find('.className') をこのように書くと、プログラムは最初の init 時に getElementById を実行してから戻ります。次に、find('.className', divDocument) を実行します。 divDocument は、初めて選択する div タグです。ドキュメントの下に多数の DOM オブジェクトがある場合、今回は divDocument のみを走査する回数が大幅に減ります。 、最初に ID を選択する速度も、横断するよりもはるかに高速です。

もう誰もが理解するはずです。つまり、第 1 レベルの選択は ID であることが望ましいですが、目的は範囲を定義し、速度を向上させることです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。