献给和我合作的过得前端童靴们:jquery源码分析--核心函数(创建选择器筛选document元素)

来源:互联网 发布:mac系统复制粘贴快捷键 编辑:程序博客网 时间:2024/05/17 03:34

接上篇。

直接上代码了:

init = jQuery.fn.init = function( selector, context, root ) {    var match, elem;    root = root || rootjQuery;    if ( typeof selector === "string" ) {        rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;        match = rquickExpr.exec( selector );        /*$('#id')*/        if ( /* 如果正则匹配出“id” */ ) {            elem = document.getElementById( match[ 2 ] );            if ( elem && elem.parentNode ) {                /* IE和Opera 返回的是name 不是id */                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 ) {            /* $(expr, $(...)) */            return ( context || root ).find( selector );        } else {            /*  $(expr, context) */            return this.constructor( context ).find( selector );        }    }};

如果匹配是“#id”这样的直接使用document.getElementById找出需要的document元素,并包装(包装过程“this.length = 1;this[ 0 ] = elem;this.context = document;this.selector = selector;”), 最后返回自己。
如果不是,先得到jquery对象,然后调用jquery对象的find方法。

jQuery.fn.extend( {    find: function( selector ) {        var i,            ret = [],            self = this,            len = self.length;        /**        * http://sizzlejs.com/        * 选择器引擎,等选择器的时候分析该引擎。        **/        jQuery.find = Sizzle;        for ( i = 0; i < len; i++ ) {            jQuery.find( selector, self[ i ], ret );        }        /* jQuery.unique 过滤重复元素 */        jQuery.uniqueSort = jQuery.unique = Sizzle.uniqueSort;        ret = this.pushStack( len > 1 ? jQuery.unique( ret ) : ret );        ret.selector = this.selector ? this.selector + " " + selector : selector;        return ret;    },    /**    * 创建一个新的jQuery对象,并返回。    **/    pushStack: function( elems ) {        var ret = jQuery.merge( this.constructor(), elems );        ret.prevObject = this;        ret.context = this.context;        return ret;    },} );

jQuery对象的find方法,调用了jQuery.find方法(即“jQuery.find = Sizzle;jQuery.find( selector, self[ i ], ret );”),得到查询的结果集,并对该结果集去重。
创建一个新的jQuery对象“this.constructor()”,然后包装结果集到新对象中,最后返回该对象。

0 0
原创粉丝点击