关闭

jQuery源码阅读之获取jQuery对象

标签: jquery
321人阅读 评论(0) 收藏 举报
分类:

在阅读jQuery源码之前,先看下面这段简单的代码

(function(window){
    var jQuery = function(select){
        //返回jQuery对象
        return new jQuery.fn.init(select);
    }
    jQuery.fn = jQuery.prototype = {
        init:function(select){
            this.selector = select;
        },
        selector:'',
        getSelector:function(){
            return this.selector.toLocaleUpperCase();
        }
    };
    jQuery.fn.init.prototype = jQuery.fn;
    window.$ = jQuery;
})(window);

为什么上面的一句return new jQuery.fn.init(select);可以返回jQuery对象呢?

我们知道,JavaScript创建对象有原型模式。这个模式大致是这样创建对象的:

var person = function(personName,personAge){
    this.name = personName;
    this.age = personAge;
};
person.prototype = {
    getName: function(){
        return this.name;
    },
    getAge: function(){
        return this.age;
    }
};
var p1 = new person('blackFez',23);

回到最开始的那段代码,里面的jQuery.fn.init就跟原型模式代码里面的person一样。由于有jQuery.fn.init.prototype = jQuery.fn; 所以,jQuery.fn.init的原型就是jQuery.fn,也就是jQuery.prototype。

所以,当new一个jQuery.fn.init对象后,这个对象里面有什么呢?它有init函数里面用到的selector属性,还有jQuery原型中的属性。

有了上面的讲解,现在再来看,当我们执行到$(‘#blackFez’)时,是怎么获取jQuery对象的呢。看下jQuery源码:

(function( window, undefined ) {
var
    ......
    rquickExpr = /^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/,
    ......
    jQuery = function(selector, context){
        //一切都从这里开始,使用原型模式创建jQuery对象
        return new jQuery.fn.init( selector, context, rootjQuery );
    },
    .....;

jQuery.fn = jQuery.prototype = {
    jquery: core_version,
    constructor: jQuery,
    init: function(selector, context, rootjQuery) {
        var match, elem;
        if (typeof selector === "string") {
            if (selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3) {
                ......
            } else {
                match = rquickExpr.exec( selector );
            }
            //在这里,我们传入的selector是'#blackFez'
            //所以得到的match是:
            //["#blackFez", undefined, "blackFez", index: 0, input: "#blackFez"]
            if ( match && (match[1] || !context) ) {
                if ( match[1] ) {
                    ......
                } else {//最终会执行这个if分支
                    elem = document.getElementById( match[2] );
                    if ( elem && elem.parentNode ) {
                        if ( elem.id !== match[2] ) {
                            return rootjQuery.find( selector );
                        }
                        this.length = 1;
                        this[0] = elem;
                    }
                    this.context = document;
                    this.selector = selector;
                    return this;
                }
            }else if(!context || context.jquery){
                ......
            }else{
                ......
            }
        }else{
            ......
        }
    },
    ......
};
jQuery.fn.init.prototype = jQuery.fn;
......
window.jQuery = window.$ = jQuery;

上面贴的代码,是就是jquery的源码,很多我们这里不需要的代码,我用省略号表示。简化了代码后,我们会发现,跟我在文章最开始贴的那段代码是不是大同小异。主要的差别就是jQuery.fn.init这个函数。那jQuery源码在这个函数里面做了什么事呢?

当我们向这个函数传入’#blackFez’这个参数后,程序做了一些判断,最终会执行下面这段代码:

elem = document.getElementById( match[2] );
if ( elem && elem.parentNode ) {
    if ( elem.id !== match[2] ) {
        return rootjQuery.find( selector );
    }
    this.length = 1;
    this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;

可以看到,他会先获取id为blackFez的html元素,然后将这个元素赋给this[0],然后返回this。所以,最终得到的对象是一个:以jQuery.prototype为原型创建的对象,并且第一个属性是id为blackFez的html元素的对象。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:39129次
    • 积分:715
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:5篇
    • 译文:1篇
    • 评论:0条
    文章分类
    最新评论