我最近開始編寫自己的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
??????? return true/false;
11
??? }
12
});

?

　　下面是兩種調用一個選擇器的方法，一種帶有一個參數而另一種則沒有參數：

$("#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、Hasld

　　選擇存在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");
?

轉載于:https://blog.51cto.com/wws5201985/806982

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的重磅推荐12款jQuery编写的选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。