首頁 > web前端 > js教程 > 主體

jQuery中$()函數的使用方法

不言
發布: 2018-07-21 10:56:05
原創
3709 人瀏覽過

這篇文章要跟大家分享的是關於jQuery中$()函數的使用方法,內容很不錯,有需要的朋友可以參考一下,希望可以幫助到大家。

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 );
    }
登入後複製

init方法的定義

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非空,先處理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開始查找,否則全域查找,將查找結果作為回傳值。

selector是DOM元素

接著處理傳入參數是Dom元素的情況。將this[0]指向Dom元素,設定jq物件長度為1,並傳回this

selector是函數

最後處理$(function(){}),如果存在ready則呼叫傳入函數呼叫 ready(f()),否則傳入jQuery,直接呼叫函數,呼叫makeArray,將其結果作為傳回值。

修改init的原型

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上的各種變數和方法。

相關推薦:

透過Ajax如何要求下載Execl檔案

在JS中用slice封裝數組方法

以上是jQuery中$()函數的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板