Jquery1.4.3源码分析（一）

Jquery是站在开发者的角度去考虑问题，在使用Js的时候，大部分时间都是对Dom元素进行操作，比如修改元素的属性，修改内容，修改CSS等。但是取Dom元素的，如getElementsByTag，有可能会取到一些Dom元素的集合，而又正好要这个集合的所有的元素都要进行同样的操作。如果只有一个元素，完全可以看作只有一个元素的集合。

这样只要对这个集合进行操作，就会对集合的每个元素都进行操作。jQuery就是基于这个集合而提供了众多的实用方法，包含了日常开发所需要的功能。对于这个集合，我们称为jquery对象。

我们可以通过$(params)或jquery(params)来生成Jquery对象。在Jquery文档中提供了四种方式：jQuery(expression,[context])，jQuery(html)，jQuery(elements)，jQuery(callback)四种构寻jquery对象的方式。其实Jquery的参数可以是任何的元素，如空参数，都能构成jquery对象。

那么jquery是如何实现的呢？

var jQuery = function( selector, context ) {
//jQuery对象其实就是jQuery.fn.init函数生成的对象，不是通过new jQuery生成对象。
		return new jQuery.fn.init( selector, context );
	},

现在我们看一下jQuery.fn.init函数的实现：

init: function( selector, context ) {
		var match, elem, ret, doc;
        //处理传空值的情况
		// Handle $(""), $(null), or $(undefined)
		if ( !selector ) {
			return this;
		}
         第一种情况 Handle $(DOMElement)单个Dom 元素，忽略上下文
		// Handle $(DOMElement)
		if ( selector.nodeType ) {
			this.context = this[0] = selector;
			this.length = 1;
			return this;
		}
		//如果selector为'body'，而且只存在一次，那么使用优化找到它
		// The body element only exists once, optimize finding it
		if ( selector === "body" && !context && document.body ) {
			this.context = document;
			this[0] = document.body;
			this.selector = "body";
			this.length = 1;
			return this;
		}
        //
		// Handle HTML strings
		if ( typeof selector === "string" ) {
			// Are we dealing with HTML string or an ID?
			match = quickExpr.exec( selector );

			// Verify a match, and that no context was specified for #id
			if ( match && (match[1] || !context) ) {
                 //处理$(html) -> $(array)
				// HANDLE: $(html) -> $(array)
				if ( match[1] ) {
					doc = (context ? context.ownerDocument || context : document);
                     //如果只有个一个字符串传递进来，那么直接使用createElement创建元素，跳过剩下的部分
					// 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 {
                        //$('<div>sgsgsg
</div>')解析字符串
						ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
						selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;
					}
					//把创建出来的element放进Jquery对象集合中.
					return jQuery.merge( this, selector );

				// HANDLE: $("#id") //处理$("#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: $("TAG") 处理$('p')
			} else if ( !context && !rnonword.test( selector ) ) {
				this.selector = selector;
				this.context = document;
				selector = document.getElementsByTagName( selector );
				return jQuery.merge( this, selector );

			// HANDLE: $(expr, $(...))   处理$(expr, [context])==$(content).find(expr)
			} else if ( !context || context.jquery ) {
				return (context || rootjQuery).find( selector );

			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return jQuery( context ).find( selector );
			}

		// HANDLE: $(function) 处理$(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;
		}
      // 处理$(elements)
		return jQuery.makeArray( selector, this );
	}

上面的可以看出$(xx)或Jquery(xx)得到不是真正的jQuery函数生成的对象，而是jQuery.fn.init函数生成的对象。也是就是jQuery的对象继承的是jQuery.fn.init的原型。jQuery.fn = jQuery.prototype={..}。我们基本上不用new jQuery(xx)，而是直接jQuery(xx),就是采用了new jQuery(xx)，先生成jQuery函数的对象，把原型中的继承下来，返回的也是jQuery.fn.init函数生成的对象。而jQuery函数的对象也抛弃了。可见给jQuery.prototype上增加方法的意义不大。同时也可以看出采用new jQuery(xx)的效率更低。jQuery.fn.init是通过jQuery.fn.init.prototype = jQuery.fn;来获得的。在扩展jQuery的时候，只要把相关的函数extend到jQuery.fn就可以了。

jQuery.fn.init负责对传的参数进行分析然后生成jQuery对象。它把第一个参数分成四种情况：

[img]http://dl.iteye.com/upload/attachment/369625/0891f54e-2815-3764-9354-90cf704f5931.png[/img]

[img]http://dl.iteye.com/upload/attachment/369627/e75e5275-fd30-3114-ae9c-6ad835f31a10.png[/img]
　从上面的代码和上表中，我们也可以看出构建jquery对象就是往jquery对象的集合中添加元素（一般都应该是dom元素）。添加的元素有两种形式：

　　一是单个元素，可能通过直接的dom元素的传参形式，还可以通过#id从dom文档中找元素。

　　二是集合，如jquery对象，还有数组，还有通过CSS Selector找到的Dom集合等Array-Like。

　　上表仅仅是分析传入的参数的类型，它是怎么做呢？它实现CSS1~CSS3的兼容的Selector的查寻器的功能。通过jQuery().find(selector);来进行分析String并查找到符合传入的Selector语法的Dom文档树中的元素集合。

　它实现了把html的字符串转换成Dom元素节点的集合。这个是通过jQuery.clean([match[1]], context);来实现的。

　　它实现DomReady的jQuery对象的统一入口，我们可以通过$(fn)要注册domReady的监听函数。所有的调用jQuery实现的功能代码都应该在domReady之后才运行。$(fn)是所有的应用开发中的功能代码的入口。它支持任意多的$(fn)注册。其是通过return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);来完成的。

　　找到元素之后就是构建集合了，就是通过this.setArray(jQuery.makeArray(selector));来构建jquery对象内部的集合。

在jQuery.fn.init函数中，最终的结果是把Dom元素放到jQuery对象的集合，我们可以传入单个Dom元素或Dom元素集合直接把其存到jQuery对象的集合。但是如果第一个参数是string类型的话，如#id就要把Dom文档树去查找。对于html的片断就得生成Dom元素。我们再进一步，传入的单个Dom元素或Dom元素集合参数又是从那里来的？我们可以通过Dom元素的直接或间接的查找元素的方式。

　　这一部分首先分析如何从html的片断就得生成Dom元素,然后分析jQuery是如何通过直接或间接的方式在在Dom树中找到dom元素，第三就是分析基于CSS1~CSS3的CSS selector。
3.1生成Dom元素

　　Init方法中通过ret = jQuery.buildFragment( [ match[1] ], [ doc ] );来实现把html片断转换成Dom元素，这是一个静态方法：

jQuery.buildFragment = function( args, nodes, scripts ) {
	var fragment, cacheable, cacheresults,
		doc = (nodes && nodes[0] ? nodes[0].ownerDocument || nodes[0] : document);
     //只有缓存小于0.5K的字符串,有些元素不能缓存啊 
	// Only cache "small" (1/2 KB) strings that are associated with the main document
	// Cloning options loses the selected state, so don't cache them
	// IE 6 doesn't like it when you put <object> or <embed> elements in a fragment
	// Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache
	if ( args.length === 1 && typeof args[0] === "string" && args[0].length < 512 && doc === document &&
		!rnocache.test( args[0] ) && (jQuery.support.checkClone || !rchecked.test( args[0] )) ) {

		cacheable = true;
		cacheresults = jQuery.fragments[ args[0] ];
		if ( cacheresults ) {
			if ( cacheresults !== 1 ) {
				fragment = cacheresults;
			}
		}
	}

	if ( !fragment ) {
		fragment = doc.createDocumentFragment();
		jQuery.clean( args, doc, fragment, scripts );
	}

	if ( cacheable ) {
		jQuery.fragments[ args[0] ] = cacheresults ? fragment : 1;
	}

	return { fragment: fragment, cacheable: cacheable };
};

jQuery.clean( args, doc, fragment, scripts );

 // 把html转换成Dom元素,elems多个html string 的数组    
	clean: function( elems, context, fragment, scripts ) {
		context = context || document; ;//默认的上下文是document

        //在IE中!context.createElement行不通，因为它返回对象类型
        //在IE中 typeof document.createElement返回object, firefox返回function
		if ( typeof context.createElement === "undefined" ) {
        //这里支持context为jQuery对象，取第一个元素。
			context = context.ownerDocument || context[0] && context[0].ownerDocument || document;
		}

		var ret = [];

		for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
			if ( typeof elem === "number" ) {
				elem += "";// 把int 转换成string的最高效的方法
			}

			if ( !elem ) {
				continue;
			}

			// Convert html string into DOM nodes

			if ( typeof elem === "string" && !rhtml.test( elem ) ) {
				elem = context.createTextNode( elem );//如果elem为文本，不包含元素标签

			} else if ( typeof elem === "string" ) {
				// Fix "XHTML"-style tags in all browsers
                //修改元素使得符合xhtml的标准
				elem = elem.replace(rxhtmlTag, "<$1></$2>");

				// Trim whitespace, otherwise indexOf won't work as expected
                //取得元素标签
				var tag = (rtagName.exec( elem ) || ["", ""])[1].toLowerCase(),
                    //判断是否要进行修正option, legend,thead,tr,td, col,area
					wrap = wrapMap[ tag ] || wrapMap._default,
					depth = wrap[0],
					div = context.createElement("div");

				// Go to html and back, then peel off extra wrappers
				div.innerHTML = wrap[1] + elem + wrap[2];

				// Move to the right depth   转到正确的深度,对于[1, "<table>","</table>"]，div=<table>
				while ( depth-- ) {
					div = div.lastChild;
				}

				// fragments去掉IE对<table>自动插入的<tbody>
				if ( !jQuery.support.tbody ) {
                    // 第一种情况：tags以<table>开头但没有<tbody>。在IE中生成的元素中可能会自动
                    // 加的<tbody> 第二种情况：thead|tbody|tfoot|colg|cap为tags，
                    // 那wrap[1] == "<table>" .tbody不一定是tbody,也有可能是thead等等

					// String was a <table>, *may* have spurious <tbody>
					var hasBody = rtbody.test(elem),
						tbody = tag === "table" && !hasBody ?
							div.firstChild && div.firstChild.childNodes :

							// String was a bare <thead> or <tfoot>
							wrap[1] === "<table>" && !hasBody ?
								div.childNodes :
								[];
                    // 除去<tbody>                     
					for ( var j = tbody.length - 1; j >= 0 ; --j ) {
						if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
							tbody[ j ].parentNode.removeChild( tbody[ j ] );
						}
					}

				}
                 //使用innerHTML,IE会去开头的空格节点的,加上去掉的空格节点                
				// IE completely kills leading whitespace when innerHTML is used
				if ( !jQuery.support.leadingWhitespace && rleadingWhitespace.test( elem ) ) {
					div.insertBefore( context.createTextNode( rleadingWhitespace.exec(elem)[0] ), div.firstChild );
				}

				elem = div.childNodes;
			}

			if ( elem.nodeType ) {
				ret.push( elem ); //elem放进集合里面
			} else {
				ret = jQuery.merge( ret, elem );
			}
		}

		if ( fragment ) {
			for ( i = 0; ret[i]; i++ ) {
				if ( scripts && jQuery.nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
					scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );

				} else {
					if ( ret[i].nodeType === 1 ) {
						ret.splice.apply( ret, [i + 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))) );
					}
					fragment.appendChild( ret[i] );
				}
			}
		}

		return ret;
	},

　在上面的代码中，我们可以看出对于elems, context的参数的支持是多种形式的，elems可以为（类）数组的形式，还可以采用对象的形式。数组中的元素或对象的属性可以是混合形的，如string,ojbect,甚至（类）数组的形式。对于数字类型，会转换在string形，除string形之外的都放入返回的数组中，当然对于集合的形式，那就会取集合中每个元素。

　　对于string的形式就转换成Dom元素的形式，之后存到返回的数组中。这是这个函数的主要任务。对于把html转换成Dom元素，这里采用innerHTML把html挂到Dom文档树中。这样就转换成了Dom元素。

　　有些html标签片断是有约束的,比如<td>xx</td>，它必须存在table的tr中，也就是说在要进行html的标签片断的修正。这也是上面的代码处理的重点。