【jQuery】jQuery源码学习笔记（一）选择器的初始

学习、使用这个利器已经半年多了。记得打开过几次，想尝试看看，总是半天摸不着北。

 

今天又打开看了一下，1.7.2 ，终于看到了一点点，做个笔记。

 

            // Are we dealing with HTML string or an ID?
            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 = quickExpr.exec( selector );
            }

这一段开始的选择器的代码，判断第一个字符是不是'<'，最后一个是不是'<'，而且长度必须大于3，然后，我想到了appendTo()这个方法，试了一下，果然：

① $('<>1>').appendTo('#msg');  // ok
② $('<b>2</b>').appendTo('#msg');  // ok
③ $('3').appendTo('#msg');  // 不会成功被append到msg盒子里面去，因为它认为前面的内容不是以'<'开头和'>'结尾的，不是html内容，而会被当作选择器来使用。

当上面的③发生后，将执行  

            else {
                match = quickExpr.exec( selector ); //quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/    /*来自源码*/
            }

于是，将用这段正则判断选择器，是否以#开头或者不是。接下来的：

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

                    // If a single string is passed in and it's a single tag
                    // just do a createElement and skip the rest
                    ret = rsingleTag.exec( selector );

                    if ( ret ) {
                        if ( jQuery.isPlainObject( context ) ) {
                            selector = [ document.createElement( ret[1] ) ];
                            jQuery.fn.attr.call( selector, context, true );

                        } else {
                            selector = [ doc.createElement( ret[1] ) ];
                        }

                    } else {
                        ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
                        selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
                    }

                    return jQuery.merge( this, selector );

                // 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;
                }

嗯，看经典的了：  

elem = document.getElementById( match[2] );

 

由此可见，用#id选择器，是多么的直接而快速。而否则的话：

呃，不好意思，我看不懂了……只看见有一句：

ret = jQuery.buildFragment( [ match[1] ], [ doc ] );

而这个方法在下面，更看不懂了……