jQuery-1.9.1源码分析系列（二）jQuery选择器续2——筛选

前面分析了选择器的结构和几个解析函数，接下来分析jQuery对象的伪类选择器。这里所谓的jQuery对象的伪类选择器就是从已有的jQuery对象（元素集合）中筛选出指定的集合出来。

4.    jQuery的伪类选择函数

 

　　先混个脸熟，把所有能找到的jQuery的伪类选择器都列出来。

　　jQuery.fn.eq（函数用于获取当前jQuery对象所匹配的元素中指定索引的元素，并返回封装该元素的jQuery对象）

　　jQuery.fn.first（函数用于获取当前jQuery对象所匹配的元素中的第一个元素，并返回封装该元素的jQuery对象）

　　jQuery.fn.last（函数用于获取当前jQuery对象所匹配的元素中的最后一个元素，并返回封装该元素的jQuery对象）

　　jQuery.fn.slice（函数用于选取匹配元素中一段连续的元素，并以jQuery对象的形式返回）

　　jQuery.fn.map（函数用于处理当前jQuery对象匹配的所有元素，并将处理结果封装为新的数组。返回封装该数组的jQuery对象）

　　jQuery.fn.end（函数用于返回最近一次"破坏性"操作之前的jQuery对象）

 

　　jQuery.fn.find（选取每个匹配元素的符合指定表达式的后代元素，并以jQuery对象的形式返回）

　　jQuery.fn.has（筛选出包含特定后代的元素，并以jQuery对象的形式返回）

　　jQuery.fn.is（判断当前jQuery对象所匹配的元素是否符合指定的表达式。只要其中有至少一个元素符合该表达式就返回true，否则返回false）

　　jQuery.fn.hasClass（指示当前jQuery对象所匹配的元素是否含有指定的css类名(elem.className)，只需要其中有一个元素有即返回true）

　　jQuery.fn.closest(从当前匹配元素开始，逐级向上级选取符合指定表达式的第一个元素，并以jQuery对象的形式返回)。

　　jQuery.fn.filter（函数用于筛选出符合指定表达式的元素，并以jQuery对象的形式返回）

　　jQuery.fn.has（函数用于筛选出包含特定后代的元素，并以jQuery对象的形式返回）

　　jQuery.fn.not（函数用于从匹配元素中删除符合指定表达式的元素，并以jQuery对象的形式返回保留的元素）

　　jQuery.fn.add（函数用于向当前匹配元素中添加符合指定表达式的元素，并以jQuery对象的形式返回，与not相反）

　　jQuery.fn.addBack（函数用于将之前匹配的元素加入到当前匹配的元素中，并以新的jQuery对象的形式返回）

　　jQuery.fn.children（函数用于选取每个匹配元素的子元素，并以jQuery对象的形式返回。你还可以使用选择器进一步缩小筛选范围，筛选出符合指定选择器的元素）

　　jQuery.fn.parent（选取每个匹配元素的父元素，并以jQuery对象的形式返回）

　　jQuery.fn.parents（选取每个匹配元素的祖先元素，并以jQuery对象的形式返回）

　　jQuery.fn.parentsUntil（选取每个匹配元素的祖先元，直到遇到符合指定表达式的元素为止，并以jQuery对象的形式返回）

　　jQuery.fn.next（筛选每个匹配元素之后紧邻的同辈元素，并以jQuery对象的形式返回）

　　jQuery.fn.prev（筛选每个匹配元素之前紧邻的同辈元素，并以jQuery对象的形式返回）

　　jQuery.fn.nextAll（选取每个匹配元素之后的所有同辈元素，并以jQuery对象的形式返回）

　　jQuery.fn.prevAll（选取每个匹配元素之前的所有同辈元素，并以jQuery对象的形式返回）

　　jQuery.fn.nextUntil（选取每个匹配元素之后所有的同辈元素，直到遇到符合指定表达式的元素为止，并以jQuery对象的形式返回）

　　jQuery.fn.prevUntil（选取每个匹配元素之前所有的同辈元素，直到遇到符合指定表达式的元素为止，并以jQuery对象的形式返回）

　　jQuery.fn.siblings（选取每个匹配元素的所有同辈元素(不包括自己)，并以jQuery对象的形式返回）

　　jQuery.fn.contents（函数用于选取当前匹配元素的所有子节点(包括文本节点、注释节点等)，并以jQuery对象的形式返回）

　　jQuery.fn.offsetParent（函数用于查找离当前匹配元素最近的被定位的祖辈元素，所谓"被定位的元素"，就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)）

　　可以看到，我将刷选的所有操作分成了两个部分。第一个部分是这一节要分析的内容，后面的选择器等分析完Sizzle后再来分析。

 

在分析之前需要一点准备知识

a.jQuery.fn.pushStack机制和回溯jQuery.fn.end

jQuery.fn.pushStack机制

　　jQuery每次遍历方法最终都会调用pushStack方法，把原来的对象绑到新对象的prevObject上，然后将新对象返回。举个例子

　　var p = $(p);
　　var peq = p.eq(0);//p.eq(0)过程中执行了this.prevObject = p;
　　peq.prevObject == p;//true

 

　　我们来看一下源码：

　　pushStack: function( elems ) {// 创建一个新的jQuery对象并将elems绑在上面
　　　　var ret = jQuery.merge( this.constructor(), elems );
　　　　ret.prevObject = this;// 把老的对象赋值给prevObject
　　　　ret.context = this.context;　　

　　　　return ret;// 返回新对象
　　}

　　好处显而易见，我想要回溯到上一个jQuery对象就有门路了。

回溯jQuery.fn.end

　　源码比较简单，直接返回prevObject即可

　　end: function() {
　　　　return this.prevObject || this.constructor(null);
　　}

　　原理是比较简单，但是用处可不小。举个例子：

　　我们知道获取某个标签（例如p标签）的某个样式（比如top）的值是使用$("p").css("top"),得到的是一个字符串，不能再使用链式调用设置该标签的子节点(例如span节点)的样式（比如设置left为10px），写法如下：

　　var pTop = $("p").css("top");
　　$("p").find("span").css("left","10px"）;
　　//而使用回溯end:
　　var pTop = $("p").find("span").css("left","10px").end().css("top");

　　比较两者，从效率上来讲后者要高，毕竟不用两次初始化jQuery对象；而且一句话就搞定，简介多了（可能该例子没有体现出来，但是如果是设置更多的属性就体现出来了，前者需要很多行才能实现）

b. jQuery.fn.eq/first/last/slice

　　eq()函数的源码比较简单，直接冲jQuery对象（是一个数组）取对应下表的元素节点即可。和直接使用下标或者get方法获得到DOM节点对象不同，eq获取的元素节点最后调用pushStack组装成jQuery对象返回。源码如下

　　eq: function( i ) {
　　　　var len = this.length,
　　　　　　j = +i + ( i < 0 ? len : 0 );
　　　　return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
　　}

　　first/last函数基于eq函数，分别返回this.eq( 0 )和this.eq( -1 )的结果即可。

　　slice函数也比较简单，因为jQuery对象本身就是一个类数组，使用apply方法使用数组的slice方式实现。源码如下：

　　slice: function() {
　　　　//core_deletedIds = [],core_slice = core_deletedIds.slice,
　　　　return this.pushStack( core_slice.apply( this, arguments ) );
　　}

c.jQuery.fn.map(callback)

　　遍历jQuery对象的每个元素并将每个元素的信息作为参数到回调函数中执行回调，最终生成包含所有回调的返回值的新的 jQuery 对象。

　　查看jQuery.fn.map源码可以看到，底层调用jQuery.map实现将遍历jQuery对象，将每个元素的信息作为参数到回调函数中执行回调并收集回调结果。jQuery.fn.map的源码如下：

　　jQuery.fn.map: function( callback ) {
　　　　return this.pushStack( jQuery.map(this, function( elem, i ) {
　　　　　　return callback.call( elem, i, elem );
　　　　}));
　　}

　　关键是jQuery.map( elems, callback, arg )函数，该函数的第二个参数callback起到传递分解后的单个jQuery元素的功能；arg 内部使用，不用管。源码如下：

　　jQuery.map: function( elems, callback, arg ) {
　　　　var value,
　　　　　　i = 0,
　　　　　　length = elems.length,
　　　　　　isArray = isArraylike( elems ),
　　　　　　ret = []; 

　　　　// 如果elems是数组则循环执行回调将结果保存在ret中
　　　　if ( isArray ) {
　　　　　　for ( ; i < length; i++ ) {
　　　　　　　　value = callback( elems[ i ], i, arg );
　　　　　　　　if ( value != null ) {
　　　　　　　　　　ret[ ret.length ] = value;
　　　　　　　　}
　　　　　　}
　　　　// 对单个元素/对象，遍历元素/对象将回调结果保存在ret中
　　　　} else {
　　　　　　for ( i in elems ) {
　　　　　　　　value = callback( elems[ i ], i, arg );
　　　　　　　　if ( value != null ) {
　　　　　　　　　　ret[ ret.length ] = value;
　　　　　　　　}
　　　　　　}
　　　　}
　　　　return core_concat.apply( [], ret ); // 拼合任何嵌套的数组
　　},

 

　　举例：

　　<input type='text' value='1'> 
　　<input type='text' value='2'>

　　<script>
　　var t = $("input").map(function(){
　　　　if($(this).val() == 1){
　　　　　　return this;
　　　　};
　　});//返回<input type='text' value='1'>的DOM对象的jQuery封装结果，等同于$("input[value='1']");当然他们是两个对象,对象比较是基于引用的，使用==符号比较肯定是false.
　　</script>

 

　　如果觉得本文不错，请点击右下方【推荐】！