重磅推薦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，如需轉載請自行聯系原作者