這篇文章要跟大家分享的是關於jQuery中$()函數的使用方法，內容很不錯，有需要的朋友可以參考一下，希望可以幫助到大家。
一般我們使用jQuery的時候，都是使用$()，$指向全域的 jQuery，所以其實是呼叫了jQuery()，結果是回傳一個jq對象，但我們使用時卻不需使用new建立對象，所以可以推測$()是一個工廠函數。
jQuery()在src/core.js中定義，若在該方法中呼叫 return new jQuery()則陷入循環，所以呼叫init()協助建構實例。值得一提的是，jQuery.fn在/src/core.js指向了jQuery.prototype。
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
}jQuery.fn.init()在src/core/init.js中定義。方法接受三個參數selector, context, root，在方法內部，先判斷是否有參數，無參數時回傳false。
init = jQuery.fn.init = function( selector, context, root ) {
var match, elem;
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
// Method init() accepts an alternate rootjQuery
// so migrate can support jQuery.sub (gh-2101)
root = root || rootjQuery;
// Handle HTML strings
// < xxx > 或 $(#id)
if ( typeof selector === "string" ) {
if ( selector[ 0 ] === "<" &&
selector[ selector.length - 1 ] === ">" &&
selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
// match[1]是html字符串，match[2]是匹配元素的id
// selector是id选择器时match[1]为undefined，match[2]是匹配元素的id
// selector是html字符串，match[1]是html字符串，match[2]为undefined
match = rquickExpr.exec( selector );
}
// Match html or make sure no context is specified for #id
// 匹配结果非空 且 存在匹配字符串或context空时执行
// 未为id选择器限定查找范围
if ( match && ( match[ 1 ] || !context ) ) {
// HANDLE: $(html) -> $(array)
if ( match[ 1 ] ) {
context = context instanceof jQuery ? context[ 0 ] : context;
// Option to run scripts is true for back-compat
// Intentionally let the error be thrown if parseHTML is not present
// 生成dom节点并合并到this上
jQuery.merge( this, jQuery.parseHTML(
match[ 1 ],
context && context.nodeType ? context.ownerDocument || context : document,
true
) );
// HANDLE: $(html, props)
// 遍历props，添加属性或方法
if ( rsingleTag.test( match[ 1 ] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] );
// ...and otherwise set as attributes
} else {
this.attr( match, context[ match ] );
}
}
}
return this;
// HANDLE: $(#id)
// 处理id选择器且无context
} else {
elem = document.getElementById( match[ 2 ] );
if ( elem ) {
// Inject the element directly into the jQuery object
this[ 0 ] = elem;
this.length = 1;
}
return this;
}
// HANDLE: $(expr, $(...))
// selector是选择器 context为undefined或context.jquery存在时执行。
// $(#id,context)或$(.class [, context])等情况
} else if ( !context || context.jquery ) {
return ( context || root ).find( selector );
// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
}
// HANDLE: $(DOMElement)
// 传入DOM元素
} else if ( selector.nodeType ) {
this[ 0 ] = selector;
this.length = 1;
return this;
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return root.ready !== undefined ?
root.ready( selector ) :
// Execute immediately if ready is not present
selector( jQuery );
}
return jQuery.makeArray( selector, this );
};如果有selector非空，先處理selector是字串的情況，分為html字串、 $(selector)、$(expr, $(...))和$(expr, context)四。如果selector是字串類型，根據傳入的字串回傳產生的dom節點，處理時先用正規匹配，找出html字串或id。符合結果非空且有符合字串或context空時說明selctor是html字串或selector是id選擇器且未限定查找上下文。執行處理html字串時，先確定生成後的節點要插入的document是哪個(即context參數)，預設是載入jQuery的document，呼叫$.parseHTML()產生dom節點並加入this；如果context是對象，則是$(html, props)的調用，將屬性或方法掛載到dom上，傳回產生的jq物件。如果符合到$(#id)的呼叫且context空時，則直接呼叫document.getElementById尋找元素，當元素存在時將this [0]指向該元素，傳回尋找結果。
如果selector不是id選擇器或context非空，呼叫find進行查找，如果context非空，則從context開始查找，否則全域查找，將查找結果作為回傳值。
接著處理傳入參數是Dom元素的情況。將this[0]指向Dom元素，設定jq物件長度為1，並傳回this。
最後處理$(function(){})，如果存在ready則呼叫傳入函數呼叫 ready(f())，否則傳入jQuery，直接呼叫函數，呼叫makeArray，將其結果作為傳回值。
init = jQuery.fn.init = function( selector, context, root ) {
...
}
// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;在原型上定義方法init，然後將init的原型指向jQuery的原型，如果不這麼做，則創建的實例的原型是init.prototype，不是jQuery.fn，其實是init的實例而不是jQuery的實例，無法呼叫在core.js中定義在jQuery.fn上的各種變數和方法。
相關推薦：
以上是jQuery中$()函數的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
