jQueryのセレクターとコンテキストのいくつかの呼び出しメソッドのコード例の詳細な説明

まず、次の HTML コードを与えます:

<p id="parent" class="parent">
	 <p class="child">
	  child1
	</p>
	<p class="child">
	child2
	</p>
</p>
<p id="parent1" class="parent">
	 <p class="child">
	  child1
	</p>
	<p class="child">
	child2
	</p>
</p>

メソッド 1 の呼び出し: 2 番目のパラメーターのコンテキストは DOM 要素です

var doms=$(".child",$("#parent")[0]);
console.log(doms);

このとき、2 番目のパラメーターは DOM オブジェクト, print [p.child, p.child , prevObject: jQuery.fn.init[1], context: p#parent, selector: ".child"]
メソッドの呼び出し 2: 2 番目のパラメーター context は jQuery オブジェクトです

var doms=$(".child",$($("#parent")[0]));
console.log(doms);

出力された結果は、同上 最初のケースと同じ [p.child, p.child, prevObject: jQuery.fn.init[1], context: p#parent, selector: ".child"]
メソッドの呼び出し 3: 2 番目パラメータは DOM 配列です

var doms=$(".child",[document.getElementById("#parent"),document.getElementById("#parent1")]) 
console.log(doms);

メソッド 4 の呼び出し: 2 番目のパラメータは jQuery オブジェクトの配列です

var doms=$(".child",$(".parent")) 
console.log(doms);

このメソッドの結果は 3 番目のメソッドとまったく同じです!
メソッド 5 の呼び出し: 渡されるパラメータは関数です、ready関数が呼び出されたときに関数が呼び出されます

 $(function()
  {
    console.log("dom ready");
  })

ここでソースコードからこれらの状況を分析します:

DOMが渡された場合

else if ( selector.nodeType ) {
		this.context = this[0] = selector;
		this.length = 1;
		return this;
		// HANDLE: $(function)
		// Shortcut for document ready
		}

DOM要素が渡された場合、要素は直接配置されます

jQuery オブジェクトが渡される場合

if ( selector.selector !== undefined ) {
			this.selector = selector.selector;
			this.context = selector.context;
		}

jQuery オブジェクトが渡される場合、jQuery パラメータのセレクタとコンテキストも新たにカプセル化されます。 jQueryオブジェクトを作成しました! 呼び出しメソッドは $($ ('')) のようになります!

関数が渡された場合

 else if ( jQuery.isFunction( selector ) ) {
			return typeof rootjQuery.ready !== "undefined" ?
			rootjQuery.ready( selector ) :
				// Execute immediately if ready is not present
				selector( jQuery );
		}

関数が渡された場合は、$(document).readyに直接配置されます。 () 実行を待ちます。ready 関数がない場合は、直接実行します (jQuery フレームワークが使用されている場合は、ready が存在します!)
DOM 配列または jQuery オブジェクトが渡される場合は

return jQuery.makeArray( selector, this );

jQuery.makeArray を通じてカプセル化できます。すべてのパラメータをオブジェクトに渡しますが、この関数は 2 番目です。各パラメータのデフォルトは配列オブジェクトですが、ここに jQuery オブジェクトが渡された場合、最終的に返される結果は jQuery オブジェクトです。したがって、この方法で、渡したすべての DOM 配列または jQuery オブジェクトを新しい jQuery オブジェクトにカプセル化して返します。この方法での呼び出しは次のとおりです:

 var $doms=$([document.getElementById('ql'),document.getElementById('fkl')]);
   //把上面的DOM数组封装到新创建的jQuery对象上
   console.log($doms);

次の呼び出しメソッドは、最も一般的に使用されるメソッドです。このメソッドには、選択したオブジェクトのコンテキストが含まれています:

              else if ( !context || context.jquery ) {
				return ( context || rootjQuery ).find( selector );
			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return this.constructor( context ).find( selector );
			}

このメソッドは $('li',$('ul')) に似ています。2 番目のパラメーターが jQuery オブジェクトの場合は、find メソッドを直接呼び出します。それ以外の場合は、最初に

find メソッド

を呼び出します。 2 番目のパラメーターを入力します。2 つのパラメーターの DOM オブジェクトが jQuery オブジェクトとしてカプセル化され、検索のために find メソッドが呼び出されます。呼び出しメソッドは次のとおりです:

 var doms=$(".child",$(".parent")) ;
   //这时候我们会选择class为parent元素下的所有的class为child的元素集合
   //作为jQuery对象返回
   console.log(doms);

明らかに、渡した 2 番目のパラメーターは jQuery オブジェクトです。 Sizzle の find メソッドを呼び出しました。

query

の場合、2 番目のパラメーターが DOM 配列の場合、DOM 配列は jQuery オブジェクトにカプセル化され、クエリのコンテキストとして使用されます。

このとき、言及したいと思います。このメソッドをもう一度呼び出します (2 番目のパラメータは DOM 配列にすることができます)

var doms=$(".child",$(".parent")) 
console.log(doms);

🎜 この時点で行われるのは、jQuery オブジェクトのインスタンス メソッドの検索 (完了するには Sizzle を呼び出します) なので、返されるのはすべてのDOM 配列内の各 DOM オブジェクトのセレクターを満たす子要素 のコレクションですが、これには重複はありません!🎜

以上がjQueryのセレクターとコンテキストのいくつかの呼び出しメソッドのコード例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。