我最近開始編寫自己的jQuery選擇器，我越來越開始意識到這是一種不錯而簡潔的完成某些特定任務的方式，而以往我使用的是迭代器。
這些選擇器中如果不是你一直在尋找的，你也許根本將不會碰到。所以我決定寫下一個簡單的教程來告知你用jQuery寫出自己的選擇器是一件相當輕鬆的事。
下面是一個用jQuery編寫選擇器的模版文件，你需要的全都在這裏：
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
selectorName: function(el,
i, m) |
04 |
{ |
05 |
return true/false; |
06 |
}, |
07 |
|
08 |
selectorName2: function(el,
i, m) |
09 |
{ |
10 |
return true/false; |
11 |
} |
12 |
}); |
下面是兩種調用一個選擇器的方法，一種帶有一個參數而另一種則沒有參數：
1 |
$("#container
:selectorName"); |
2 |
$("#conainert
:selectorName(#element)"); |
3 |
$("#conainert
:selectorName(>300)"); |
i與m參數可以是缺省的，當傳入一個集合，他們只是用來匹配一個參數的當前元素的索引。當你傳入一個參數時，匹配器便開始工作了，這是一個正則表達式匹配器，返回類似如下信息：
1 |
[":width(>100)", "width", "", ">100"] |
你會經常使用到m[3]的值，至此，便由你決定如何處理傳入的參數。下面給出了一系列的例子。
我們可以與jQuery已有的選擇器一起進行鏈式的調用，這是相當有意思的：
1 |
$("#container
:isBold:even"); |
2 |
$("#container
:leftOf(#element):width(>100):height(>100)"); |
你可以在此下載該庫和文檔
以下列出12個自定義的選擇器實例，你可以在這些選擇器中放入任何內容，只要你根據當前元素是否通過選擇器測試返回true或者false值即可。
1、：loaded
選擇所有加載完的圖片：
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
loaded: function(el) |
04 |
{ |
05 |
return $(el).data('loaded'); |
06 |
} |
07 |
} |
08 |
09 |
$('img').load(function(){
$(this).data('loaded', true);
}); |
10 |
$('img:loaded'); |
2、：width
選擇所有寬度大於或小於指定值的元素：
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
width: function(el,
i, m) |
04 |
{ |
05 |
if(!m[3]||!(/^(<|>)\d+$/).test(m[3]))
{return false;} |
06 |
return m[3].substr(0,1)
=== '>' ? |
07 |
$(el).width()
> m[3].substr(1) : $(el).width() < m[3].substr(1); |
08 |
} |
09 |
} |
10 |
11 |
$('#container
:width(>100)'); |
3、：height
選擇所有高度大於或小於指定值的元素：
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
height: function(el,
i, m) |
04 |
{ |
05 |
if(!m[3]||!(/^(<|>)\d+$/).test(m[3]))
{return false;} |
06 |
return m[3].substr(0,1)
=== '>' ? |
07 |
$(el).height()
> m[3].substr(1) : $(el).height() < m[3].substr(1); |
08 |
} |
09 |
} |
10 |
11 |
$('#container
:height(<100)'); |
4、：leftOf
選擇在指定元素左邊的所有元素
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
leftOf: function(el,
i, m) |
04 |
{ |
05 |
var oe
= $(el).offset(); |
06 |
var om
= $(m[3]).offset(); |
07 |
08 |
return oe.left
+ $(el).width() < om.left; |
09 |
} |
10 |
} |
11 |
12 |
$('#container
:leftOf(#element)'); |
5、：rightOf
選擇在指定元素右邊的所有元素
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
rightOf: function(el,
i, m) |
04 |
{ |
05 |
var oe
= $(el).offset(); |
06 |
var om
= $(m[3]).offset(); |
07 |
08 |
return oe.left
> om.left + $(m[3]).width(); |
09 |
} |
10 |
} |
11 |
12 |
$('#container
:rightOf(#element)'); |
6、：external
選擇所有帶外站鏈接的錨點標籤
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
external: function(el) |
04 |
{ |
05 |
if(!el.href)
{return false;} |
06 |
return el.hostname
&& el.hostname !== window.location.hostname; |
07 |
} |
08 |
} |
09 |
10 |
$('#container
:external'); |
7、：target
選擇指定target屬性的錨點標籤
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
target: function(el,
i, m) |
04 |
{ |
05 |
if(!m[3])
{return false;} |
06 |
return (m[3]
=== '_self' &&
($(el).attr('target')
== '' ||
!el.target)) || |
07 |
(m[3]
=== $(el).attr('target')); |
08 |
} |
09 |
} |
10 |
11 |
$('#container
:target(_self)'); |
8、：inView
選取位於可視窗口內的所有元素
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
inView: function(el) |
04 |
{ |
05 |
var offset
= $(el).offset(); |
06 |
07 |
return !( |
08 |
(offset.top
> $(window).height() + $(document).scrollTop()) || |
09 |
(offset.top
+ $(el).height() < $(document).scrollTop()) || |
10 |
(offset.left
> $(window).width() + $(document).scrollLeft()) || |
11 |
(offset.left
+ $(el).width() < $(document).scrollLeft()) |
12 |
) |
13 |
} |
14 |
} |
15 |
16 |
$('#container
:inView'); |
9、：largerThan
選取比指定元素大的所有元素
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
largerThan: function(el,
i, m) |
04 |
{ |
05 |
if(!m[3])
{return false;} |
06 |
return $(el).width()
* $(el).height() > $(m[3]).width() * $(m[3]).height(); |
07 |
} |
08 |
} |
09 |
10 |
$('#container
:largerThan(#element)'); |
10、：isBold
選擇font-weight爲700的所有元素
1 |
$.extend($.expr[':'], |
2 |
{ |
3 |
isBold: function(el) |
4 |
{ |
5 |
return $(el).css("fontWeight")
=== '700'; |
6 |
} |
7 |
} |
8 |
9 |
$('#container
:isBold'); |
11、：color
選擇顏色爲指定RGB值的所有元素
01 |
$.extend($.expr[':'], |
02 |
{ |
03 |
color: function(el,
i, m) |
04 |
{ |
05 |
if(!m[3])
{return false;} |
06 |
return $(el).css('color')
=== m[3]; |
07 |
} |
08 |
} |
09 |
10 |
$("#container
:color(rgb(255, 0, 0))"); |
12、：hasId
選擇存在id屬性的所有元素
1 |
$.extend($.expr[':'], |
2 |
{ |
3 |
hasId: function(el) |
4 |
{ |
5 |
return $(el).attr('id')
!== undefined && $(el).attr('id')
!== ''; |
6 |
} |
7 |
} |
8 |
9 |
$("#container
:hasId"); |
via:websanova.com,OSChina原創編譯