重磅推薦12款jQuery編寫的選擇器

2021-09-21 10:17:08 字數 3015 閱讀 3179

我最近開始編寫自己的jquery選擇器,我越來越開始意識到這是一種不錯而簡潔的完成某些特定任務的方式,而以往我使用的是迭代器。

這些選擇器中如果不是你一直在尋找的,你也許根本將不會碰到。所以我決定寫下乙個簡單的教程來告知你用jquery寫出自己的選擇器是一件相當輕鬆的事。

下面是乙個用jquery編寫選擇器的模版檔案,你需要的全都在這裡:

$.extend($.expr[':'],02,

0708

selectorname2: function(el, i, m)

0912

});下面是兩種呼叫乙個選擇器的方法,一種帶有乙個引數而另一種則沒有引數:

$("#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[':'],

0207}08

09$('img').load(function());

10$('img:loaded');

2.width

選擇所有寬度大於或小於指定值的元素:

01$.extend($.expr[':'],

0206

return m[3].substr(0,1) === '>' ?

07$(el).width() > m[3].substr(1) : $(el).width() < m[3].substr(1);08}

09}1011

$('#container :width(>100)');

3.height

選擇所有高度大於或小於指定值的元素:

01$.extend($.expr[':'],

0206

return m[3].substr(0,1) === '>' ?

07$(el).height() > m[3].substr(1) : $(el).height() < m[3].substr(1);08}

09}1011

$('#container :height(<100)');

4.leftof

選擇在指定元素左邊的所有元素

01$.extend($.expr[':'],

0210}11

12$('#container :leftof(#element)');

5、rightof

選擇在指定元素右邊的所有元素

01$.extend($.expr[':'],

0210}11

12$('#container :rightof(#element)');

6、external

選擇所有帶外站鏈結的錨點標籤

01$.extend($.expr[':'],

0206

return el.hostname && el.hostname !== window.location.hostname;07}

08}0910

$('#container :external');

7、target選擇指定target屬性的錨點標籤

01$.extend($.expr[':'],

0206

return (m[3] === '_self' && ($(el).attr('target') == '' || !el.target)) ||

07(m[3] === $(el).attr('target'));08}

09}1011

$('#container :target(_self)');

8、inview

選取位於可視視窗內的所有元素

01$.extend($.expr[':'],

0214}15

16$('#container :inview');

9、largerthan

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

01$.extend($.expr[':'],

0206

return $(el).width() * $(el).height() > $(m[3]).width() * $(m[3]).height();07}

08}0910

$('#container :largerthan(#element)');

10、isbold

選擇font-weight為700的所有元素

1$.extend($.expr[':'],27

}89$('#container :isbold');

11、color

選擇顏色為指定rgb值的所有元素

01$.extend($.expr[':'],

0206

return $(el).css('color') === m[3];07}

08}0910

$("#container :color(rgb(255, 0, 0))");

12、hasld

選擇存在id屬性的所有元素

1$.extend($.expr[':'],27

}89$("#container :hasid");

35款jQuery外掛程式(推薦)

23 4567 891011 1213 1415 1617 1819 2021 2223 2425 2627 2829 3031 3233 3435 3637 3839 4041 4243 4445 4647 4849 5051 5253 5455 5657 5859 6061 6263 6465 ...

非常流行的十款 jQuery 外掛程式推薦

本文列舉了10款最流行的 jquery 外掛程式,有驗證使用者輸入的,有以真正使用者友好的方式顯示多 和影象的,有使資料以視覺化的圖形和圖表的形式展示的等等。相信這十大流行的 jquery 外掛程式將有助於你的開發專案。1.validate 這個 jquery 外掛程式讓瑣碎的客戶端驗證變得簡單,提...

2023年最新的12款超棒jQuery外掛程式

今天我們將分享12款精心挑選最新jquery外掛程式,包含了演講,排序及其社交內容等等,很多外掛程式在gbin1以前的jquery文章中我們都介紹過,希望大家喜歡!impress.js是乙個基於css3過渡和變形的演講稿外掛程式,如果你不是很喜歡使用ppt的話,它是個不錯的選擇。reveal.js是...