利用jQuery.expr創建一個自己的偽類選擇器

　　話說好久沒來園子寫博客了，哎，看來懶癌已經到晚期，得治...

　　進入正題。前段時間看到一段jQuery代碼，代碼里面用到了jQuery.expr這個對象。完全陌生又木有。翻了下jQuery的官方文檔，沒找到關於這個對象的解釋，不過搜尋了一番過后終於在jQuery的選擇器引擎——sizzle的文檔里找到了線索。如果沒猜錯的話，這個對象應該是Sizzle.selectors對象的擴展。其實要驗證這一點非常簡單，我們把兩個對象分別console.log出來對比下就知道了。頁面引入jQuery和sizzle，在控制台輸入如下代碼:

　　

 console.log('Sizzle.selectors',Sizzle.selectors);
 console.log('jQuery.expr',$.expr);

結果:

　　可以看到，jQuery.expr對象除了比Sizzle.selectors對象多了一個'::'屬性，其余屬性一模一樣（'::'屬性里包含了jQuery中已經定義好的各種偽類選擇器，如：':first'、':checked'..）。

　　所以，我們可以利用這一點在jQuery里擴展選擇器，定義出我們自己的選擇器，這里簡單舉個例子，更多的用法可以參照Sizzle的官方文檔依葫蘆畫瓢用到jQuery里就行了。

　　HTML:　　

<p class="contain">about how to define a new pseudo selector</p>
<p class="contain">do not contain</p>
<p class="contain">do not contain</p>

　　JS：

//這里定義了一個icontain自定義偽類，作用是找到包含特定文本的節點
$.expr.pseudos.icontain = $.expr.createPseudo(function(arg) {
        return function(elem) {
            return (elem.textContent
                    || elem.innerText
                    || jQuery(elem).text()
                    || '')
                            .toLowerCase()
                            .indexOf(arg.toLowerCase()) >= 0;
        };
    });

console.log($('.contain:icontain(pseudo)').length);

//輸出 1（只有第一個P標簽包含了文本pseudo）

　　這里用了$.expr.createPseudo方法，同樣，該方法的用法在sizzle的文檔里也有很詳細的解釋和示例，大家有興趣的話可以移步去看看。

　　好了，以上是本人對$.expr對象的認識，如果有理解不到位的地方，歡迎指正。