首先我們給下面的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中文網其他相關文章！
