重磅推荐12款jQuery编写的选择器

我最近开始编写自己的jQuery选择器，我越来越开始意识到这是一种不错而简洁的完成某些特定任务的方式，而以往我使用的是迭代器。

　　这些选择器中如果不是你一直在寻找的，你也许根本将不会碰到。所以我决定写下一个简单的教程来告知你用jQuery写出自己的选择器是一件相当轻松的事。

　　下面是一个用jQuery编写选择器的模版文件，你需要的全都在这里：

$.extend($.expr[':'],

02

{

03

    selectorName: function(el, i, m)

04

    {

05

        return true/false;

06

    },

07

08

    selectorName2: function(el, i, m)

09

10

11

    }

12

});

　　下面是两种调用一个选择器的方法，一种带有一个参数而另一种则没有参数：

$("#container :selectorName");

$("#conainert :selectorName(#element)");

$("#conainert :selectorName(>300)");

　　i与m参数可以是缺省的，当传入一个集合，他们只是用来匹配一个参数的当前元素的索引。当你传入一个参数时，匹配器便开始工作了，这是一个正则表达式匹配器，返回类似如下信息：

1

[":width(>100)", "width", "", ">100"]

　　你会经常使用到m[3]的值，至此，便由你决定如何处理传入的参数。下面给出了一系列的例子。

　　我们可以与jQuery已有的选择器一起进行链式的调用，这是相当有意思的：

$("#container :isBold:even");

$("#container :leftOf(#element):width(>100):height(>100)");

　　你可以在此下载该库和文档

　　以下列出12个自定义的选择器实例，你可以在这些选择器中放入任何内容，只要你根据当前元素是否通过选择器测试返回true或者false值即可。

　　1、：loaded

　　选择所有加载完的图片：

    loaded: function(el)

        return $(el).data('loaded');

}

$('img').load(function(){ $(this).data('loaded', true); });

$('img:loaded');

　　2.Width

        选择所有宽度大于或小于指定值的元素：

    width: function(el, i, m)

        if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;}

        return m[3].substr(0,1) === '>' ?

            $(el).width() > m[3].substr(1) : $(el).width() < m[3].substr(1);

$('#container :width(>100)');

　　3.Height

       选择所有高度大于或小于指定值的元素：

    height: function(el, i, m)

            $(el).height() > m[3].substr(1) : $(el).height() < m[3].substr(1);

$('#container :height(<100)');

        4.leftOf

　　选择在指定元素左边的所有元素

    leftOf: function(el, i, m)

        var oe = $(el).offset();

        var om = $(m[3]).offset();

        return oe.left + $(el).width() < om.left;

$('#container :leftOf(#element)');

　　5、RightOf

       选择在指定元素右边的所有元素

    rightOf: function(el, i, m)

        return oe.left > om.left + $(m[3]).width();

$('#container :rightOf(#element)');

6、External

选择所有带外站链接的锚点标签

external: function(el)

if(!el.href) {return false;}

return el.hostname && el.hostname !== window.location.hostname;

$('#container :external');

7、target选择指定target属性的锚点标签

target: function(el, i, m)

if(!m[3]) {return false;}

return (m[3] === '_self' && ($(el).attr('target') == '' || !el.target)) ||

(m[3] === $(el).attr('target'));

$('#container :target(_self)');

8、inView

　　选取位于可视窗口内的所有元素

inView: function(el)

var offset = $(el).offset();

return !(

(offset.top > $(window).height() + $(document).scrollTop()) ||

(offset.top + $(el).height() < $(document).scrollTop()) ||

(offset.left > $(window).width() + $(document).scrollLeft()) ||

(offset.left + $(el).width() < $(document).scrollLeft())

)

13

14

15

16

$('#container :inView');

　　9、largerThan

选取比指定元素大的所有元素

largerThan: function(el, i, m)

return $(el).width() * $(el).height() > $(m[3]).width() * $(m[3]).height();

$('#container :largerThan(#element)');

10、isBold

　　选择font-weight为700的所有元素

isBold: function(el)

return $(el).css("fontWeight") === '700';

$('#container :isBold');

　　11、Color

选择颜色为指定RGB值的所有元素

color: function(el, i, m)

return $(el).css('color') === m[3];

$("#container :color(rgb(255, 0, 0))");

12、Hasld

　　选择存在id属性的所有元素

hasId: function(el)

return $(el).attr('id') !== undefined && $(el).attr('id') !== '';

$("#container :hasId");

本文转自 wws5201985 51CTO博客，原文链接：http://blog.51cto.com/wws5201985/806982，如需转载请自行联系原作者