12个很棒的jQuery选择器扩张

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");

?