[置顶] jQuery乱谈（三）
昨天说到了jQuery（）的实现，还差一处理HTML字符串的部分没有分析完，今天继续。
创新互联长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为鄯善企业提供专业的成都做网站、成都网站设计、成都外贸网站建设，鄯善网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
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; doc= ( context && context.nodeType ? context.ownerDocument || context : document ); // scripts is true for back-compat selector = jQuery.parseHTML( match[1], doc, true ); if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { this.attr.call( selector, context, true ); } 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; } // 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 ); } } 下面我们来一段一段分析：
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 ); }selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3这一句用于判断selector字符串是否由"<"开始，">"结尾，而且selector字符串的长度不小于3.就是类似于：$('
My new text
')这样的情况。如果selector是html标签组成的话，直接match = [ null, selector, null ];而不用正则检查。否则的话需要match = rquickExpr.exec( selector );。rquickExpr变量是在前面定义的一个正则式字面量：rquickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/ 。这段正则式只是一种检查HTML字符串的简便方式，优先检测#id,防止XSS通过location.hash***，利用检查正则表达式HTML字符串还是元素ID字符串。match = rquickExpr.exec( selector )这一句把字符串中的匹配正则表达式的文本保存到match数组里。这里用到了我们前面提到的正则表达式quickExpr，match其实是一个数组，第0个元素是与正则表达式相匹配的文本，第1个元素是与正则表达式的第1个子表达式相匹配的文本(如果有的话)，第2个元素是第2个子表达式相匹配的文本(如果有的话)，第3个元素是第3个子表达式相匹配的文本(如果有的话)，这里就是元素的ID，不包含#。注：XSS***请参看：http://baike.baidu.com/view/2161269.htm； exec（）方法请参看：http://www.w3school.com.cn/js/jsref_exec_regexp.asp
后面的一部分我将以注释的形式解释：
/**
* 正则表达式匹配到了内容,并且 match[1]不为空,或者context为空。
* match[1]不为空的时候selector是HTML字符串，也就是你可以用$("xland")把对象包装成jQuery对象
* context为空的时候selector是页面元素ID
*/
if ( match && (match[1] || !context) ) { // 处理$(html) -> $(array),选择器为html字符串 if ( match[1] ) { context= context instanceof jQuery ? context[0] : context; // 不好意思，这句话我也不理解
/**
* ownerDocument属性返回节点所属的根元素。下面的JS语句保证了上下文（作用域）为根节点
*
*/ doc= ( context && context.nodeType ? context.ownerDocument || context : document );
/**
*jQuery.parseHTML方法接受三个参数 （data, context, scripts）。data表示HTML字符串；
* context表示是作用域，默认是document，可选；scripts
* 是一个boolean值，如果是true的话，就会把HTML字符串里面的脚本也正确解析
*
*/
selector = jQuery.parseHTML( match[1], doc, true ); if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { this.attr.call( selector, context, true ); } return jQuery.merge( this, selector ); // 选择器为ID，处理形如$("#first") } else { elem= document.getElementById( match[2] ); // match[2]得到ID的值如：first if ( elem && elem.parentNode ) { if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); // 找到元素 } // 否则直接把元素插入到爆jquery对象 this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // 处理 形如 $("div .container")的表达式字符串 } else if ( !context || context.jquery ) { return ( context || rootjQuery ).find( selector ); // 处理 形如 $("div .container"，$('#asd'))的表达式字符串,
// 相当于$(context).find(expr) ，就是在context上下文中查找
} else { return this.constructor( context ).find( selector );
}
jQuery核心函数分析完毕，感觉还是有很多不满意的地方，慢慢改正吧。
--------------------------------------------添加---------------------------------------------------
jQuery核心函数里面涉及到了merge（）、find（）函数。我简单解释一下这俩货吧，先说merge（）：
merge: function( first, second ) {var l = second.length, i= first.length, j= 0; if ( typeof l === "number" ) { for ( ; j < l; j++ ) { first[ i++ ] = second[ j ]; } }else { while ( second[j] !== undefined ) { first[ i++ ] = second[ j++ ]; } } first.length= i; return first; }
该方法用于合并两个jQuery对象（因为jQuery对象中有length属性）或者数组内容到第一个对象或数组。使用方法为：jQuery.merge( first, second )。其中first数组是用来合并的数组或jQuery对象，元素是从第二数组或jQuery对象加进来的；second数组或jQuery对象合并到第一，保持不变。内部代码比较简单，主要是判断提供的第二个参数是jQuery对象（因为jQuery对象中有length属性）还是数组。其中：
if ( typeof l === "number" ) { for ( ; j < l; j++ ) { first[ i++ ] = second[ j ]; } }当第二个参数的length属性是number类型时，直接循环遍历把第二个参数的每一项添加到第一个参数的后面。接着：
else { while ( second[j] !== undefined ) { first[ i++ ] = second[ j++ ]; } }当第二个参数的length属性不是number类型时，循环把第二个参数的每一项添加到第一个参数的后面，一直到第二个参数的一项为undefined，也就是没有定义时结束。
find（）方法代码如下：
find: function( selector ) {var i, l, length, n, r, ret, self= this; // 处理jQuery对象或DOM元素if ( typeof selector !== "string" ) { return jQuery( selector ).filter(function() { for ( i = 0, l = self.length; i < l; i++ ) { if ( jQuery.contains( self[ i ], this ) ) { return true; } } }); } // 把DOM元素集合加入到jQuery堆栈中 ret= this.pushStack( "", "find", selector ); // 处理选择器字符串，循环把选择的元素添加到堆栈for ( i = 0, l = this.length; i < l; i++ ) { length= ret.length; jQuery.find( selector,this[i], ret ); if ( i > 0 ) { // Make sure that the results are unique for ( n = length; n < ret.length; n++ ) { for ( r = 0; r < length; r++ ) { if ( ret[r] === ret[n] ) { ret.splice(n--, 1); break; } } } } } return ret; } 该方法可以获得当前元素匹配集合中每个元素的后代，选择性筛选的选择器。使用方法如下：
![[置顶] jQuery乱谈（三）](/upload/otherpic56/2012120216220071.gif)
如果一个jQuery对象表示一个DOM元素的集合， .find()方法允许我们能够通过搜索DOM树中的这些元素的后代元素从匹配的元素构造一个新的jQuery象。find()和children()方法是相似的，但后者只是旅行的DOM树向下一个层级（就是只查找子元素，而不是后代元素）。该方法选择性地接受同一类型选择表达，我们可以传递给$()函数。如果紧随兄弟匹配选择器，它在新建成的jQuery对象中留下；否则，它被排除在外。
分享文章：[置顶] jQuery乱谈（三）
本文链接：http://6mz.cn/article/gpcccs.html