当前位置： 文江博客文章教程详情

jQuery 源码 $ 的若干种使用方法

发布于 2021-08-01 12:07:04 字数 14132 浏览 1492 评论 0

学习 jQuery 源码，第一步是了解 jQuery 整体核心代码结构。第二步，当然就是了解无比强大无所不能的 $。根据平常使用 jQuery 的经验，你会发现，几乎所有的语句都是以 $ 开头的，比如：

$(function(){
    console.log('dom ready 啦！！');
});

又比如：

$('#casper').addClass('handsome');

当然还有其他。翻开 jQuery 的源码你会发现，里面就一行代码：

jQuery = function( selector, context ) {
  // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );   //就是这货
},

于是，我们接下来的任务就是一探 jQuery.fn.init 的究竟：里面究竟是什么东东，能够让符号 $ 如此强大以至于无处不在。

初探 jQuery.fn.init

老规矩，打开编辑器，定位到 jQuery.fn.init这个方法。如果是用 sublime 的话，可以试下 ctrl+r，然后输入 init，第一个出来的搜索结果就是。

相信很多童鞋跟我的第一反应是：oh my god！将近90行代码！不过还可以接受啦，工作中还见别人写过 300++ 行的方法，想想90行也算不得可怕。

然而，当你再往下看，可能就会有种想死的心——怎么这么多 if、else！

不卖关子之所以会有那么多 if、else，是因为——$ 有将近 10 种用法，文章最开头列举的不过是最常见的两种用法而已。

以下为 jQuery.fn.init 的源码，瞄一眼感受下这代码的可怕就可以了，可以暂时忽略其中的实现细节，安心进入下一节。

init: function( selector, context, rootjQuery ) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if ( !selector ) {
        return this;
    }

    // Handle HTML strings
    if ( typeof selector === "string" ) {
        if ( selector.charAt(0) === "<" && selector.charAt( 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 = rquickExpr.exec( selector );
        }

        // Match html or make sure no context is specified for #id
        if ( match && (match[1] || !context) ) {

            // HANDLE: $(html) -> $(array)
            if ( match[1] ) {
                context = context instanceof jQuery ? context[0] : context;

                // scripts is true for back-compat
                jQuery.merge( this, jQuery.parseHTML(
                    match[1],
                    context && context.nodeType ? context.ownerDocument || context : document,
                    true
                ) );

                // HANDLE: $(html, 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)
            } else {
                elem = document.getElementById( match[2] );

                // Check parentNode to catch when Blackberry 4.6 returns
                // nodes that are no longer in the document #6963
                if ( elem && elem.parentNode ) {
                    // Handle the case where IE and Opera return items
                    // by name instead of ID
                    if ( elem.id !== match[2] ) {
                        return rootjQuery.find( selector );
                    }

                    // Otherwise, we inject the element directly into the jQuery object
                    this.length = 1;
                    this[0] = elem;
                }

                this.context = document;
                this.selector = selector;
                return this;
            }

        // HANDLE: $(expr, $(...))
        } 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 );
        }

    // HANDLE: $(DOMElement)
    } else if ( selector.nodeType ) {
        this.context = this[0] = selector;
        this.length = 1;
        return this;

    // HANDLE: $(function)
    // Shortcut for document ready
    } else if ( jQuery.isFunction( selector ) ) {
        return rootjQuery.ready( selector );
    }

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

    return jQuery.makeArray( selector, this );
},

$ 的 n 种用法

上面提到，$ 的用法有将近 10 种，也就是说，jQuery.fn.init 这一个函数需要处理的情况有将近10种。那究竟都是哪些情况呢？如果想从它的源码直接看出来的话，那最好放弃。当然并不是说此路不通，只不过有更好的方法而已。

jQuery 之所以这么受欢迎，其中一个原因是它的文档很齐全，这个时候果断可以去看它的API文档，请猛击 这里

jQuery 的API文档里面很详细地将各种情况都列了出来，可以看到，里面共列举了三大种、八小种情况。至于每种情况的作用、参数、返回值，可自行查看API说明，这里不赘述。

jQuery( selector [, context ] )
    jQuery( selector [, context ] )
    jQuery( element )
    jQuery( elementArray )
    jQuery( object )
    jQuery( jQuery object )
    jQuery()
jQuery( html [, ownerDocument ] )
    jQuery( html [, ownerDocument ] )
    jQuery( html, attributes )
jQuery( callback )
    jQuery( callback )

$的n种用法——更直观的例子

上面我们已经将$的n种用法非常详细地列举出来了，但这只是第一步，因为对着jQuery.fn.init错综复杂的逻辑分支，你有可能依旧手忙脚乱，不知如何下手。里面比较明显能够看出来的是下面这几种情况：

jQuery()
jQuery( element )
jQuery( callback )

除了上面这三种情况外，其他五种情况依旧无法在代码里直观地看出来。那么肿么办呢？其实我也没有特别好的方法，但可以将自己的经验分享一下，分两步：

  1. 把 jQuery 的 API 文档详细地过一遍，了解 $ 的多种用法以及细节，可 点击这里
  2. 断点调试，针对上面列出的几种情况，编写最简单的代码试例，然后断点进去看看都跑到了哪些逻辑分支

断点用例

于是我们开始编写用例，下面提到的用例都基于下面的html片段

<div id="id_container" class="container">
    <div class="header"></div>
</div>

直接上具体的用例。对于这些用例的具体分析会在下面再讲到。

//
$('#id_container')
$('.container')

//
$('.header', $('#id_container')[0])
$('.header', $('#id_container'))

//
$(document.getElementsByTagName('div'))
$(document.getElementsByTagName('div')[0])
$($('.header'))
$({name:'casper', age:25})

//
$('<div class="content"><span>casper</span></div>')
$('<div class="content"><span>casper</span></div>', document)
$('<div></div>', {'class':'content'})
$('<div/>', {'class':'content'})

//
$(function(){
    console.log('$(callback)');
});

jQuery()

灰常简单，直接返回this（jQuery对象）

init: function( selector, context, rootjQuery ) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if ( !selector ) {
        return this;
    }

$(callback)

这个很简单，直接跑进下面这个分支然后就return了

else if ( jQuery.isFunction( selector ) ) {
            return rootjQuery.ready( selector );
        }

jQuery( element )

同样很简单，跑到这个分支里去了

else if ( selector.nodeType ) {
            this.context = this[0] = selector;
            this.length = 1;
            return this;
        }

jQuery( elementArray )

这个比较费解，似乎前面所有的if、else都不符合，没错，其实只有下面这么句话

return jQuery.makeArray( selector, this );

jQuery( jQuery object )

跳过代码细节，先了解下面的背景知识，看下面的代码。对于$(selector)返回的jQuery对象，上面都会附加一个selector属性，作用不介绍。

$('.header').selector

于是乎，华丽丽地跑进下面这个分支，其实作用就是：创建一个jQuery对象，并将参数jQuery对象里的dom节点拷贝到新创建的jQuery对象里

if ( selector.selector !== undefined ) {
    this.selector = selector.selector;
    this.context = selector.context;
}
return jQuery.makeArray( selector, this );

jQuery( selector [, context ] )

这个的话，情况比较多，分开讲

jQuery('#casper')

init: function( selector, context, rootjQuery ) {
    //各种省略
        } else {    //先跑到这个分支里去鸟
            match = rquickExpr.exec( selector );  //这里，match==['#casper', undefined, 'casper']
        }
    //各种省略
            // HANDLE: $(#id)   //然后跑到这个分支了，其实源码的注释这里也说了~~
            } else {
                elem = document.getElementById( match[2] );

                // Check parentNode to catch when Blackberry 4.6 returns
                // nodes that are no longer in the document #6963
                if ( elem && elem.parentNode ) {
                    // Handle the case where IE and Opera return items
                    // by name instead of ID
                    if ( elem.id !== match[2] ) {
                        return rootjQuery.find( selector );
                    }

                    // Otherwise, we inject the element directly into the jQuery object
                    this.length = 1;
                    this[0] = elem;
                }

                this.context = document;
                this.selector = selector;
                return this;
            }

        // HANDLE: $(expr, $(...))
        }     // 下面全部省略

jQuery('#casper', docuemnt)

//首先进入这个分支
match = rquickExpr.exec( selector );  //['#casper', undefined, 'casper']

//然后进入这个分支
} else {
                return this.constructor( context ).find( selector );
            }

jQuery('.header')

//先进入这个分支
match = rquickExpr.exec( selector );  // match==null

//然后进入这个分支~
else if ( !context || context.jquery ) {
                return ( context || rootjQuery ).find( selector );

            // HANDLE: $(expr, context)
            // (which is just equivalent to: $(context).find(expr)
            }

jQuery('.header', document)

//首先进入这里
match = rquickExpr.exec( selector );  // match==null

//然后进入这里
// HANDLE: $(expr, context)
            // (which is just equivalent to: $(context).find(expr)
            } else {
                return this.constructor( context ).find( selector );
            }

jQuery('.header', $('#id_container'))

//首先进入这里
match = rquickExpr.exec( selector );  // match==null

//然后进入这里
// HANDLE: $(expr, $(...))
            } else if ( !context || context.jquery ) {
                return ( context || rootjQuery ).find( selector );

jQuery(html, attribute)

具体例子 jQuery('<div></div>', {style: 'background:red;'})，或者 jQuery('<div/>', {style: 'background:red'})

//首先进入这里
        // Handle HTML strings
        if ( typeof selector === "string" ) {
            if ( selector.charAt(0) === "<" && selector.charAt( 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 ];  //[null, '<div></div>', null]

            }
//然后进入这里
            // Match html or make sure no context is specified for #id
            if ( match && (match[1] || !context) ) {

                // HANDLE: $(html) -> $(array)
                if ( match[1] ) {
                    context = context instanceof jQuery ? context[0] : context;  // context == {style:{background:red}}

                    //先把创建好的dom借点复制到this里
                    // scripts is true for back-compat
                    jQuery.merge( this, jQuery.parseHTML(
                        match[1],
                        context && context.nodeType ? context.ownerDocument || context : document,
                        true
                    ) );
                    //然后将{style: 'background:red'}等属性添加到创建好的dom节点上
// HANDLE: $(html, 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)
                }

jQuery('<div><span>casper</span></div>')

这个应该是我们经常用到的。。。

        //首先华丽丽进入这个分支
        if ( typeof selector === "string" ) {
            if ( selector.charAt(0) === "<" && selector.charAt( 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 ];

            }
            //然后进入这个分支
            // Match html or make sure no context is specified for #id
            if ( match && (match[1] || !context) ) {

                //在进入这个分支
                // HANDLE: $(html) -> $(array)
                if ( match[1] ) {
                    context = context instanceof jQuery ? context[0] : context;

                    // scripts is true for back-compat
                    jQuery.merge( this, jQuery.parseHTML(
                        match[1],
                        context && context.nodeType ? context.ownerDocument || context : document,
                        true
                    ) );
// 木有赋值
                    return this;

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群
更多

你可能也喜欢

Maven 中 optional 关键字

JWT Authentication for WP REST API 授权验证问题

PHP 插入数据库处理和注意事项

Sass 3.3 新特性之连体符 ＆

使用 PHP 获取 Memcache 内存缓存的运行状态以及各个参数的中文含义

React.js 最佳实践 2016

查看 Linux 内核路由表 以及 route 命令的使用

Linux 中 route 命令使用和介绍

上一篇：

下一篇：

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态，并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
发私信
更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_Yqvrrd

文章 0 评论 0

2503248646

文章 0 评论 0

浮生未歇

文章 0 评论 0

养猫人

文章 0 评论 0

第七度阳光i

文章 0 评论 0

新雨望断虹

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文