本文共 4445 字，大约阅读时间需要 14 分钟。

3.1 源码

init: function( selector, context, rootjQuery ) {		var match, elem, ret, doc;		// Handle $(""), $(null), or $(undefined)        //如果selector为空格，！selector为false		if (!selector) {            //此时this为空jQuery对象			return this;		}		// Handle $(DOMElement)        //nodeType节点类型，利用是否有nodeType属性来判断是否是DOM元素		if ( selector.nodeType ) {            //将第一个元素和属性context指向selector			this.context = this[0] = selector;			this.length = 1;			return this;		}		// The body element only exists once, optimize finding it        //因为body只出现一次，利用!context进行优化		if ( selector === "body" && !context && document.body ) {            //context指向document对象			this.context = document;			this[0] = document.body;			this.selector = selector;			this.length = 1;			return this;		}		// Handle HTML strings		if ( typeof selector === "string" ) {		    // Are we dealing with HTML string or an ID?            //以
   <开头以>
    结尾，且长度大于等于3，这里假设是HTML片段，跳过queckExpr正则检查			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 );			}			// Verify a match, and that no context was specified for #id			if ( match && (match[1] || !context) ) {				// 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) {                        //如果context是普通对象					    if (jQuery.isPlainObject(context)) {                            //之所以放在数组中，是方便后面的jQuery.merge()方法调用						    selector = [document.createElement(ret[1])];                            //调用attr方法，传入参数context							jQuery.fn.attr.call( selector, context, true );						} else {							selector = [ doc.createElement( ret[1] ) ];						}                    //复杂HTML的处理方法					} 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					    //即使是documen.getElementById这样核心的方法也要考虑到浏览器兼容问题，可能找到的是name而不是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: $(expr, $(...))            //没有指定上下文，执行rootjQuery.find()，制定了上下文且上下文是jQuery对象，执行context.find()			} else if ( !context || context.jquery ) {				return ( context || rootjQuery ).find( selector );			// HANDLE: $(expr, context)			// (which is just equivalent to: $(context).find(expr)            //如果指定了上下文，且上下文不是jQuery对象			} else {                //先创建一个包含context的jQuery对象，然后调用find方法				return this.constructor( context ).find( selector );			}		// HANDLE: $(function)		// Shortcut for document ready		} else if ( jQuery.isFunction( selector ) ) {			return rootjQuery.ready( selector );		}        //selector是jquery对象		if ( selector.selector !== undefined ) {			this.selector = selector.selector;			this.context = selector.context;		}        //合并到当前jQuery对象		return jQuery.makeArray( selector, this );	},
   

1、其中用到了两个正则表达式：

（1）quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;

解释：?:是非捕获组的意思，非捕获组只参与匹配，但不会把匹配到的内容捕获到组里，降低了内存的占用。

[^#<]*匹配除#<以外的任意字符，且出现0次或多次

(<[\w\W]+>):

\w表示匹配字母数字、下划线，\W正好相反，这里匹配的是以字母数字下划线作为第一个字母的一个标签，比如<div>

[^>]*匹配除>之外的所有字符，且出现0次或多次，$结束，表示结束时不能为>字符

#(\w\-]*)$  #id的匹配，id只能为字母、数字、下划线和减号

（2）rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;

解释：^<(\w+)\s*\/?>：

^<：以<开头

(\w+)：匹配的字母、数字、下划线

\s*：匹配空格符0次或多次，比如可以匹配<div  >这样的

\/?>：匹配/符号0次或1次，比如匹配<img    />这样的

(?:<\/\1>)：\1表示的是前面的()，这里指的就是(\w+)，比如前面是<div>，这里就要是</div>

最后的?$表示的是此元素为截止符，要么截止在</div>，要么没有就是前面的<img >或者是<img />

到此就把所有的单独的标签的情况考虑完全了。

学以致用

转载地址：http://givvi.baihongyu.com/