這篇文章要跟大家分享的是關於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中文網其他相關文章!