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