jQuery源码研究分析学习笔记-jQuery.fn.init()(五)

$()=jQuery(),二者即是返回的构造函数jQuery.fn.init()实例对象

jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
    //selector:只有undefined、DOM元素、字符串、函数、jQuery对象、普通js对象是有效的,其他类型的值接受没有意义
    //context:可选值,传入DOM元素、jQuery对象、普通js对象
    //roootjQuery:包含了document对象的jQuery对象,用于document.getElementById()查找失败、selector是选择器表达式且未定context、selctor是函数的情况
        var match, elem, ret, doc;

        // 如果可以转换成false,例如 $(""), $(null), or $(undefined)
        if ( !selector ) {
            return this;
        }

        // 如果selector有nodeType属性,则此是DOM元素
        if ( selector.nodeType ) {
        //手动设置第一个元素和属性context指向该DOM元素
            this.context = this[0] = selector;
            this.length = 1;  //设置length值为1
            return this;  //返回包含了该dom元素引用的jq对象
        }

        // 如果selector是字符串"body"
        if ( selector === "body" && !context && document.body ) {
        //手动设置属性context指向document对象
            this.context = document;
            this[0] = document.body; //设置第一个元素指向body元素
            this.selector = selector;
            this.length = 1;
            return this;
        }

        // 参数selector是其他字符串
        if ( typeof selector === "string" ) {
            // 检测selector是html代码还是#id
            if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
                // 如果参数selector以"<"开头、以">"结尾,且长度大于等于3,则此字符串是html片段
                match = [ null, selector, null ];

            } else {
            //正则quickExpr检测参数selector是否是稍微复杂一些html代码或者#id,匹配结果存放在数组match中
                match = quickExpr.exec( selector );
            }

            //参数selector是单独标签,
            if ( match && (match[1] || !context) ) {

                // 参数selector是HTML代码
                if ( match[1] ) {
                //先修正context、doc
                    context = context instanceof jQuery ? context[0] : context;
                    doc = ( context ? context.ownerDocument || context : document );

                    // rsingleTag检测HTML代码是否是单独标签,匹配结果放在数组ret中
                    // just do a createElement and skip the rest
                    //rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/
                    ret = rsingleTag.exec( selector );

                    if ( ret ) {
                    //参数是context是普通对象,则调用jQuery方法.attr()并传入参数context,同时把参数contect中的属性、事件设置到新创建的DOM元素上
                        if ( jQuery.isPlainObject( context ) ) {
                            selector = [ document.createElement( ret[1] ) ];
                            jQuery.fn.attr.call( selector, context, true );

                        } else {
                            selector = [ doc.createElement( ret[1] ) ]; //参数selector是单独标签,调用document.createElement()创建标签对应的DOM元素
                        }

                    } else {
                        ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
                        selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;   //创建过程
                    }
    //将新创建的DOM元素数组合并到当前jQuery对象中并返回
                    return jQuery.merge( this, selector );

                // 参数selector是#id
                } else {
                    elem = document.getElementById( match[2] );

                    // 检查parentNode属性,因为Blackberry4.6会返回已经不存在文档中的DOM节点
                    // nodes that are no longer in the document #6963
                    if ( elem && elem.parentNode ) {
                        // Handle the case where IE and Opera return items
                        // 所找到元素属性id值与传入的值不相等,则调用Sizzle查找并返回一个含有选中元素的新jQuery对象
                        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;
                }

            // 参数selector是选择器表达式
            } 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 );
            }

        // 参数selector是函数
        // 绑定ready事件
        } else if ( jQuery.isFunction( selector ) ) {
            return rootjQuery.ready( selector );
        }
        //若参数selector含有属性selector,则认为其是jQuery对象
        if ( selector.selector !== undefined ) {
            this.selector = selector.selector;
            this.context = selector.context;
        }
        //返回当前jQuery对象
        return jQuery.makeArray( selector, this );
    }
};

你可能感兴趣的:(jQuery,源码研究)