jqueryセレクターの原理紹介($()の使い方)_jquery-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:54:39

オリジナル

1210 人が閲覧しました

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 であることが望ましいですが、目的は範囲を定義し、速度を向上させることです。