JQuery日记 5.31 JQuery对象的生成

JQuery对象的生成

1 selector为不论什么可转换false的空值

  返回空JQuery对象

2 selector为字符串

  2.1 selector为html字符串或有id属性的标签

      2.2.1 selector为html字符时

            转换html字符为DOM元素并放入当前JQuery的数组

            当context參数为js对象时,迭代器属性

            (1)当前属性相应此JQuery对象的某个函数时,调用此JQuery对象的此函数,參数为当前属性的值.

            (2)其它设置HTML属性

      2.2.2 selector有id时

            直接getElementById

  2.2 selector为选择器表达式

      修正context在context上调用find方法

3 selector为DOM元素

  包装此DOM为JQuery对象

4 selector为函数

  此函数作为ready时间监听器

5 selector为函数及不满足前四个分支的情况

  将此selecotr放入当前JQuery对象数组中

	init = jQuery.fn.init = function( selector, context ) {
		var match, elem;

		// HANDLE: $(""), $(null), $(undefined), $(false)
		// 返回空JQuery对象
		if ( !selector ) {
			return this;
		}

		// Handle HTML strings
		if ( typeof selector === "string" ) {
			// 假设selector以'<'开头以'>'结尾而且长度大于3觉得其是HTML字符串,不进行rquickExpr匹配
			if ( selector[0] === "<" && selector[ 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 = rquickExpr.exec( selector );
			}

			// Match html or make sure no context is specified for #id
			if ( match && (match[1] || !context) ) {

				// HANDLE: $(html) -> $(array)
				if ( match[1] ) {
					// 假设context是jquery对象,取第一个DOM元素
					context = context instanceof jQuery ? context[0] : context;
					// scripts is true for back-compat
					// Intentionally let the error be thrown if parseHTML is not present
					// 将HTML转换后的DOM元素合并当到当前jquery对象
					jQuery.merge( this, jQuery.parseHTML(
						match[1],
						context && context.nodeType ? context.ownerDocument || context : document,
						true
					) );

					// HANDLE: $(html, props)
					// 处理第一个參数为HTML字符串第二个參数为JS对象
					if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
						// for-each context中元素
						for ( match in context ) {
							// Properties of context are called as methods if possible
							// 假设当前JQuery对象match属性是函数
							if ( jQuery.isFunction( this[ match ] ) ) {
								// 运行match函数
								this[ match ]( context[ match ] );

							// ...and otherwise set as attributes
							// 否则,设置HTML属性
							} else {
								this.attr( match, context[ match ] );
							}
						}
					}

					return this;

				// 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
					// Blackberry 4.6缓存过度，不在document中的node仍然查找的到
					if ( elem && elem.parentNode ) {
						// Inject the element directly into the jQuery object
						this.length = 1;
						this[0] = elem;
					}
					// 设置上下文对象为document
					this.context = document;
					this.selector = selector;
					return this;
				}

			// HANDLE: $(expr, $(...))
			// 处理没有context參数或context參数是JQuery对象
			} else if ( !context || context.jquery ) {
				// 假设没有context參数则在document范围内调用find方法查找
				// 假设有context參数则在本context范围内查找
				return ( context || rootjQuery ).find( selector );

			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			// 处理selector为expr,第二个參数也为context的selector的情况
			} else {
				// 对context进行选择再find
				return this.constructor( context ).find( selector );
			}

		// HANDLE: $(DOMElement)
		// 将DOM元素包裹为JQuery对象
		} else if ( selector.nodeType ) {
			this.context = this[0] = selector;
			this.length = 1;
			return this;

		// HANDLE: $(function)
		// Shortcut for document ready
		// 假设selector是function
		// 将function绑定为ready监听,或马上运行(rootjQuery.ready === "undefined")
		} else if ( jQuery.isFunction( selector ) ) {
			return typeof rootjQuery.ready !== "undefined" ?
				rootjQuery.ready( selector ) :
				// Execute immediately if ready is not present
				selector( jQuery );
		}
		// 假设selctor是函数或对象时。且有selector元素时
		if ( selector.selector !== undefined ) {
			this.selector = selector.selector;
			this.context = selector.context;
		}
		// 将selector放入当前JQuery对象的数组里
		return jQuery.makeArray( selector, this );
	};