jquery源码分析(2) jQuery对象的一些方法和属性 3

本文将分析(96 , 283)  给JQ对象,添加的方法和属性


本篇将分析(101 , 194)的init()方法,源码如下

init: function( selector, context, rootjQuery ) {
		var match, elem;

		// HANDLE: $(""), $(null), $(undefined), $(false)
		if ( !selector ) {
			return this;
		}

		// Handle HTML strings
		if ( typeof selector === "string" ) {
			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 = 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 = context instanceof jQuery ? context[0] : context;

					// scripts is true for back-compat
					jQuery.merge( this, jQuery.parseHTML(
						match[1],
						context && context.nodeType ? context.ownerDocument || context : document,
						true
					) );

					// HANDLE: $(html, props)
					if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
						for ( match in context ) {
							// Properties of context are called as methods if possible
							if ( jQuery.isFunction( this[ match ] ) ) {
								this[ match ]( context[ match ] );

							// ...and otherwise set as attributes
							} 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
					if ( elem && elem.parentNode ) {
						// Inject the element directly into the jQuery object
						this.length = 1;
						this[0] = elem;
					}

					this.context = document;
					this.selector = selector;
					return this;
				}

			// HANDLE: $(expr, $(...))
			} 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 );
			}

		// HANDLE: $(DOMElement)
		} else if ( selector.nodeType ) {
			this.context = this[0] = selector;
			this.length = 1;
			return this;

		// HANDLE: $(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;
		}

		return jQuery.makeArray( selector, this );
	},

首先选择类型大概有这么几种

$('#div1'), $('.box'),$('div'),$('#div div.box')

$('<li>') ,$('<li>1</li>'<li>2</li>') ,$('<li>hello')


正式开始这几种不同的类型的走的路线

init: function( selector, context, rootjQuery ) {
var match, elem;


// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) { $(""), $(null), $(undefined), $(false) //这4种情况返回jquery对象
return this;
}


// Handle HTML strings
if ( typeof selector === "string" ) { //是字符串就进来
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { //找标签如<li>所以$('<li>') ,$('<li>1</li>'<li>2</li>') 进这里
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ]; // [ null, '<li>', null ] [ null, ‘<li>1</li>'<li>2</li>’, null ]


} else { //$('#div1'), $('.box'),$('div'),$('#div div.box') $('<li>hello')都进这里
match = rquickExpr.exec( selector ); //匹配标签加文字或者#加字符执行exec的方法得到的结果是

match = null // $('.box'),$('div'),$('#div div.box')

match = ['#div1',null,'div1'] //$('#div1')

match = ['<li>hello','<li>',null] //$('<li>hello')


支持所有的情况都已经分配完毕!


}


// Match html or make sure no context is specified for #id
if ( match && (match[1] || !context) ) { //match不为空,且第二项不为null或没有上下文 $('<li>') ,$('#div1')可进


// HANDLE: $(html) -> $(array)
if ( match[1] ) { $('<li>')标签进去,$('#div1')进else

当是标签的时候,查看他的context,上下文只能是document或者iframe的document,所以可以利用这里给指定的页面添加元素 $('<li>','contentWindow') 但是$('<li>','ul') 这样是不行的
context = context instanceof jQuery ? context[0] : context; //其实第二个参数也可以写成$('<li>',$('contentWindow')) 的形式,这一行确保context一定是个document元素


// scripts is true for back-compat
jQuery.merge( this, jQuery.parseHTML(
match[1],
context && context.nodeType ? context.ownerDocument || context : document,
true
) );


// HANDLE: $(html, props)
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] );


// ...and otherwise set as attributes
} 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
if ( elem && elem.parentNode ) {
// Inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
}


this.context = document;
this.selector = selector;
return this;
}


// HANDLE: $(expr, $(...))
} 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 );
}


// HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;


// HANDLE: $(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;
}


return jQuery.makeArray( selector, this );
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值