jQuery 自定義選擇器

嚴格來說是自定義偽類選擇器，不過也相當有意思了。
昨天我學習其中一個 jquery lazy load 源碼的時候，看到末尾這么寫的。

/* Custom selectors for your convenience.  譯: 提供自定義選擇方便你使用。 */
/* Use as $("img:below-the-fold").something() or 譯: 你可以這樣使用 $("img:below-the-fold").something() 或 */
/* $("img").filter(":below-the-fold").something() which is faster 譯: $("img").filter(":below-the-fold").something() 這樣更快 */
// 簡單翻譯了下不知道准不准確。。
$.extend($.expr[":"], {
    "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
    "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
    "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
    "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
    "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
    /* Maintain BC for couple of versions. */
    "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
    "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
    "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
});

好神奇的說，有木有。。
雖然之前也有簡單的看過 jQuery 源碼，可是 Sizzle 選擇器引擎部分我直接跳過了，所以完全沒注意到這塊功能。
出於好奇心，當然要去學習下怎么自定義選擇器。

翻了下百度谷歌，只找到一篇靠譜的中文博客。。看樣子這東西確實冷門啊。。仔細想想確實沒多大必要自定義。。
不過以學習為目標，多學點總是好的。
大家可以去看下這篇文章《jQuery Custom Selector JQuery自定義選擇器》

基本格式：

$.expr[':'].test = function(obj, index, meta, stack) {
    /* obj   - is a current DOM element 當前DOM元素
       index - the current loop index in stack 當前元素在stack中的索引，
       meta  - meta data about your selector !!! 用來存參數值，詳見帶參數的自定義選擇器。
       stack - stack of all elements to loop 選擇器所選中的元素集。
   
       Return true to include current element 返回 true 就包含當前元素
       Return false to explude current element 返回 false 就拋棄當前元素
    */
};

調用方法：

$('.someClasses:test').doSomething();

帶參數調用:

$('.someClasses:test(argument)').doSomething();
$('.someClasses:test("arg1, arg2")').doSomething();
$(".someClasses:test('arg1, arg2')").doSomething();

還記得剛才 meta 參數么？
例如這樣調用：

$('.someClasses:test(argument)').doSomething();

meta 就會得到如下格式的數組：

[
    ':test(argument)', // full selector 整個自定義選擇器
    'test',            // only selector 自定義選擇器名稱
    '',                // quotes used   使用了什么引號(很明顯這里沒有)
    'argument'         // parameters    參數
]

例如調用：

$('.someClasses:test("arg1, arg2")').doSomething();

meta 就會得到如下格式的數組：

[
    ':test("arg1, arg2")', // full selector 整個自定義選擇器
    'test',                // only selector 自定義選擇器名稱
    '"',                   // quotes used   使用了什么引號(這里用的是雙引號)
    'arg1, arg2'           // parameters    參數
]

那我們來寫個簡單的選擇器，當作練習吧。
就寫個剛才那個選擇器把，帶參數好了。

$("a:test(haha)");

自定義選擇器代碼為：

$.expr[':'].test = function(obj, index, meta, stack) {
    var txt = obj.innerHTML,
        key = meta[3];
    return txt.indexOf(key) > -1;
};
// 測試
$('#navList a:test(JavaScript)').each(function () {
    console.log(this.innerHTML);
});

點擊右側運行看看。。

沒啥技術含量，不過確實是有意思的技巧。

 

其他參考資料：

http://www.cnblogs.com/webfpc/archive/2009/11/22/1605302.html
http://jquery-howto.blogspot.com/2009/06/custom-jquery-selectors.html
http://jquery-howto.blogspot.com/2009/06/jquery-custom-selectors-with-parameters.html