12个很棒的jQuery选择器扩展

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

$.extend($.expr[':'],{    selectorName: function(el, i, m)    {        return true/false;    },        selectorName2: function(el, i, m)    {        return true/false;    }});

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

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

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

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

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

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

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

1、：loaded

选择所有加载完的图片：

$.extend($.expr[':'],{    loaded: function(el)    {        return $(el).data('loaded');    }}$('img').load(function(){ $(this).data('loaded', true); });$('img:loaded');

2、：width

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

$.extend($.expr[':'],{    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

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

$.extend($.expr[':'],{    height: function(el, i, m)    {        if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;}        return m[3].substr(0,1) === '>' ?             $(el).height() > m[3].substr(1) : $(el).height() < m[3].substr(1);    }}$('#container :height(<100)');

4、：leftOf

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

$.extend($.expr[':'],{    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

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

$.extend($.expr[':'],{    rightOf: function(el, i, m)    {        var oe = $(el).offset();        var om = $(m[3]).offset();        return oe.left > om.left + $(m[3]).width();    }}$('#container :rightOf(#element)');

6、：external

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

$.extend($.expr[':'],{    external: function(el)    {        if(!el.href) {return false;}        return el.hostname && el.hostname !== window.location.hostname;    }}$('#container :external');

7、：target

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

?

$.extend($.expr[':'],{    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

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

?

$.extend($.expr[':'],{    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())        )    }}$('#container :inView');

9、：largerThan

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

$.extend($.expr[':'],{    largerThan: function(el, i, m)    {        if(!m[3]) {return false;}        return $(el).width() * $(el).height() > $(m[3]).width() * $(m[3]).height();    }}$('#container :largerThan(#element)');

10、：isBold

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

$.extend($.expr[':'],{    isBold: function(el)    {        return $(el).css("fontWeight") === '700';    }}$('#container :isBold');

11、：color

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

$.extend($.expr[':'],{    color: function(el, i, m)    {        if(!m[3]) {return false;}        return $(el).css('color') === m[3];    }}$("#container :color(rgb(255, 0, 0))");

12、：hasId

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

$.extend($.expr[':'],{    hasId: function(el)    {        return $(el).attr('id') !== undefined && $(el).attr('id') !== '';    }}$("#container :hasId");

?