前面分析了選擇器的結構和幾個解析函數(shù)，接下來分析jQuery對象的偽類選擇器。這里所謂的jQuery對象的偽類選擇器就是從已有的jQuery對象（元素集合）中篩選出指定的集合出來。

4. ? ?jQuery的偽類選擇函數(shù)

---

?

　　先混個臉熟，把所有能找到的jQuery的偽類選擇器都列出來。

　　jQuery.fn.eq（函數(shù)用于獲取當前jQuery對象所匹配的元素中指定索引的元素，并返回封裝該元素的jQuery對象）

　　jQuery.fn.first（函數(shù)用于獲取當前jQuery對象所匹配的元素中的第一個元素，并返回封裝該元素的jQuery對象）

　　jQuery.fn.last（函數(shù)用于獲取當前jQuery對象所匹配的元素中的最后一個元素，并返回封裝該元素的jQuery對象）

　　jQuery.fn.slice（函數(shù)用于選取匹配元素中一段連續(xù)的元素，并以jQuery對象的形式返回）

　　jQuery.fn.map（函數(shù)用于處理當前jQuery對象匹配的所有元素，并將處理結果封裝為新的數(shù)組。返回封裝該數(shù)組的jQuery對象）

　　jQuery.fn.end（函數(shù)用于返回最近一次"破壞性"操作之前的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（函數(shù)用于篩選出符合指定表達式的元素，并以jQuery對象的形式返回）

　　jQuery.fn.has（函數(shù)用于篩選出包含特定后代的元素，并以jQuery對象的形式返回）

　　jQuery.fn.not（函數(shù)用于從匹配元素中刪除符合指定表達式的元素，并以jQuery對象的形式返回保留的元素）

　　jQuery.fn.add（函數(shù)用于向當前匹配元素中添加符合指定表達式的元素，并以jQuery對象的形式返回，與not相反）

　　jQuery.fn.addBack（函數(shù)用于將之前匹配的元素加入到當前匹配的元素中，并以新的jQuery對象的形式返回）

　　jQuery.fn.children（函數(shù)用于選取每個匹配元素的子元素，并以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（函數(shù)用于選取當前匹配元素的所有子節(jié)點(包括文本節(jié)點、注釋節(jié)點等)，并以jQuery對象的形式返回）

　　jQuery.fn.offsetParent（函數(shù)用于查找離當前匹配元素最近的被定位的祖輩元素，所謂"被定位的元素"，就是元素的CSS?position屬性值為absolute、relative或fixed(只要不是默認的static即可)）

　　可以看到，我將刷選的所有操作分成了兩個部分。第一個部分是這一節(jié)要分析的內(nèi)容，后面的選擇器等分析完Sizzle后再來分析。

?

在分析之前需要一點準備知識

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

---

jQuery.fn.pushStack機制

　　jQuery每次遍歷方法最終都會調(diào)用pushStack方法，把原來的對象綁到新對象的prevObject上，然后將新對象返回。舉個例子

　　var p = $(p);var peq = p.eq(0);//p.eq(0)過程中執(zhí)行了this.prevObject = p;peq.prevObject == p;//true

?

　　我們來看一下源碼：

　　pushStack: function( elems ) {// 創(chuàng)建一個新的jQuery對象并將elems綁在上面var ret = jQuery.merge( this.constructor(), elems );ret.prevObject = this;// 把老的對象賦值給prevObjectret.context = this.context;　　return ret;// 返回新對象}

　　好處顯而易見，我想要回溯到上一個jQuery對象就有門路了。

回溯jQuery.fn.end

　　源碼比較簡單，直接返回prevObject即可

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

　　原理是比較簡單，但是用處可不小。舉個例子：

　　我們知道獲取某個標簽（例如p標簽）的某個樣式（比如top）的值是使用$("p").css("top"),得到的是一個字符串，不能再使用鏈式調(diào)用設置該標簽的子節(jié)點(例如span節(jié)點)的樣式（比如設置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對象；而且一句話就搞定，簡介多了（可能該例子沒有體現(xiàn)出來，但是如果是設置更多的屬性就體現(xiàn)出來了，前者需要很多行才能實現(xiàn)）

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

---

　　eq()函數(shù)的源碼比較簡單，直接沖jQuery對象（是一個數(shù)組）取對應下表的元素節(jié)點即可。和直接使用下標或者get方法獲得到DOM節(jié)點對象不同，eq獲取的元素節(jié)點最后調(diào)用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函數(shù)基于eq函數(shù)，分別返回this.eq( 0 )和this.eq( -1 )的結果即可。

　　slice函數(shù)也比較簡單，因為jQuery對象本身就是一個類數(shù)組，使用apply方法使用數(shù)組的slice方式實現(xiàn)。源碼如下：

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

c.jQuery.fn.map(callback)

---

　　遍歷jQuery對象的每個元素并將每個元素的信息作為參數(shù)到回調(diào)函數(shù)中執(zhí)行回調(diào)，最終生成包含所有回調(diào)的返回值的新的 jQuery 對象。

　　查看jQuery.fn.map源碼可以看到，底層調(diào)用jQuery.map實現(xiàn)將遍歷jQuery對象，將每個元素的信息作為參數(shù)到回調(diào)函數(shù)中執(zhí)行回調(diào)并收集回調(diào)結果。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 )函數(shù)，該函數(shù)的第二個參數(shù)callback起到傳遞分解后的單個jQuery元素的功能；arg 內(nèi)部使用，不用管。源碼如下：

　　jQuery.map: function( elems, callback, arg ) {var value,i = 0,length = elems.length,isArray = isArraylike( elems ),ret = []; // 如果elems是數(shù)組則循環(huán)執(zhí)行回調(diào)將結果保存在ret中if ( isArray ) {for ( ; i < length; i++ ) {value = callback( elems[ i ], i, arg );if ( value != null ) {ret[ ret.length ] = value;}}// 對單個元素/對象，遍歷元素/對象將回調(diào)結果保存在ret中} else {for ( i in elems ) {value = callback( elems[ i ], i, arg );if ( value != null ) {ret[ ret.length ] = value;}}}return core_concat.apply( [], ret ); // 拼合任何嵌套的數(shù)組},

?

　　舉例：

　　<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>

?

　　如果覺得本文不錯，請點擊右下方【推薦】！

轉載于:https://www.cnblogs.com/chuaWeb/p/jQuery-1-9-1-jQuery-selector3.html

總結

以上是生活随笔為你收集整理的jQuery-1.9.1源码分析系列（二）jQuery选择器续2——筛选的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。