jQuery中selector,context幾種呼叫方式程式碼實例詳解

首先我們給下面的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：第二個參數context是DOM元素

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

這時候第二個參數是DOM對象，列印[p.child, p.child, prevObject: jQuery.fn.init[1], context: p#parent, selector: ".child"]
呼叫方式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：第二個參數是一個DOM陣列

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

呼叫方式4：第二個參數是一個jQuery物件數組

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

這種方式的結果和第三種方式是完全一樣的!
呼叫方式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物件上面，同時把length自增!

如果傳入了jQuery物件

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

如果傳入了jQuery對象，那麼也是把參數jQuery的selector和context直接封裝到新建立的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我們可以把所有的參數封裝到一個對像上面，但是這個函數第二個參數預設是數組對象，但是這裡傳入了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'))第二個參數如果是jQuery對象，那麼直接呼叫find方法，否則先把第二個參數的DOM物件封裝為jQuery物件然後呼叫find方法進行查找!這種呼叫方式如下：

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

很顯然，我們傳入的第二個參數是jQuery對象，那麼我們呼叫了Sizzle的find方法來進行查詢，如果第二個參數是一個DOM數組，也會該DOM數組封裝成為jQuery對象然後以此為上下文進行查詢!

這時候我又要提一下這種呼叫方式(第二個參數可以是DOM數組)

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

這時候透過的就是jQuery物件具有的find實例方法來完成的(呼叫Sizzle來完成)，所以返回的就是DOM數組中每一個DOM對象的所有的滿足selector的子元素組成的集合，但是這是去重的!

以上是jQuery中selector,context幾種呼叫方式程式碼實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！