jquery 過濾器


1.基本選擇器 
基本選擇器是JQuery中最常用的選擇器,也是最簡單的選擇器,它通過元素id、class 和標簽名來查找DOM元素。這個非常重要,下面的內容都是以此為基礎,逐級提高的。 
1).“$(“#id”)”,獲取id指定的元素,id是全局唯一的,所以它只有一個成員。 
2).“$(“.class”)”,獲取class指定的元素,不同的元素可以具有相同的class屬性,所以它可能具有多個成員。 
3).“$(“element”)”,獲取element(元素名,比如div、table等)指定的元素,它可能具有多個成員。 
4).“$(“*”)”,獲取所有元素,相當於document。 
5).“$(“selector1,selector2,…,selectorN”)”,將每個選擇器匹配到的元素合並后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。 

2.層次選擇器 
什么是層次?層次就是父子關系、兄弟關系的節點。所以,層次選擇器就是用來獲取指定元素的父子節點、兄弟節點。 
1).“$(“ancestor descendant”)”,獲取ancestor元素下邊的所有元素。 
2).“$(“parent > child”)”,獲取parent元素下邊的所有子元素(只包含第一層子元素)。 
3).“$(“pre + next”)”,獲取緊隨pre元素的后一個兄弟元素。 
4).“$(“pre ~ siblings”)”,獲取pre元素后邊的所有兄弟元素。 

3.過濾選擇器 
過濾?肯定是要添加過濾條件的。通過“:”添加過濾條件,比如“$(“div:first”)”返回div元素集合的第一個div元素,first是過濾條件。 
按照不同的過濾規則,過濾選擇器可以分為基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾和表單對象屬性過濾選擇器。 

1). 基本過濾選擇器 
a) “:first”,選取第一個元素,別忘記它也是被放在一個集合里哦!因為JQuery它是DOM對象的一個集合。如,“$("tr:first")”返回所有tr元素的第一個tr元素,它仍然被保存在集合中。 
b) “:last”,選取最后一個元素。如,“$("tr:last")”返回所有tr元素的最后一個tr元素,它仍然被保存在集合中。 
c) “:not(selector)”,去除所有與給定選擇器匹配的元素。如,“$("input:not(:checked)")”返回所有input元素,但去除被選中的元素(單選框、多選框)。 
d) “:even”,選取所有元素中偶數的元素。因為JQuery對象是一個集合,這里的偶數指的就是集合的索引,索引從0開始。 
e) “:odd”,選取所有元素中奇數的元素,索引從0開始。 
f) “:eq(index)”,選取指定索引的元素,索引從0開始。 
g) “:gt(index)”,選取索引大於指定index的元素,索引從0開始。 
h) “:lt(index)”,選取索引小於指定index的元素,索引從0開始。 
i) “:header”,選取所有的標題元素,如hq、h2等。 
j) “:animated”,選取當前正在執行的所有動畫元素。 

2). 內容過濾選擇器 
它是對元素和文本內容的操作。 
a) “:contains(text)”,選取包含text文本內容的元素。 
b) “:empty”,選取不包含子元素或者文本節點的空元素。 
c) “:has(selector)”,選取含有選擇器所匹配的元素的元素。 
d) “:parent”,選取含有子元素或文本節點的元素。(它是一個父節點) 

3). 可見性過濾選擇器 
根據元素的可見與不可見狀態來選取元素。 
“:hidden”,選取所有不可見元素。 
“:visible”,選擇所有可見元素。 
可見選擇器:hidden 不僅包含樣式屬性 display 為 none 的元素,也包含文本隱藏域 (<input type=“hidden”>)和 visible:hidden 之類的元素。 

4).屬性過濾選擇器 
通過元素的屬性來選取相應的元素。 
a) “[attribute]”,選取擁有此屬性的元素。 
b) “[attribute=value]”,選取指定屬性值為value的所有元素。 
c) “[attribute !=value]”,選取屬性值不為value的所有元素。 
d) “[attribute ^= value]”,選取屬性值以value開始的所有元素。 
e) “[attribute $= value]”,選取屬性值以value結束的所有元素。 
f) “[attribute *= value]”,選取屬性值包含value的所有元素。 
g) “[selector1] [selector2]…[selectorN]”,復合性選擇器,首先經[selector1]選擇返回集合A,集合A再經過[selector2]選擇返回集合B,集合B再經過[selectorN]選擇返回結果集合。 

5). 子元素過濾選擇器 
一看名字便是,它是對某一元素的子元素進行選取的。 
a) “:nth-child(index/even/odd)”,選取索引為index的元素、索引為偶數的元素、索引為奇數的元素。 
l nth-child(even/odd):能選取每個父元素下的索引值為偶(奇)數的元素。 
l nth-child(2):能選取每個父元素下的索引值為 2 的元素。 
l nth-child(3n):能選取每個父元素下的索引值是 3 的倍數的元素。 
l nth-child(3n + 1):能選取每個父元素下的索引值是 3n + 1的元素。 
b) “:first-child”,選取第一個子元素。 
c) “:last-child”,選取最后一個子元素。 
d) “:only-child”,選取唯一子元素,它的父元素只有它這一個子元素。 

6). 表單過濾選擇器 
選取表單元素的過濾選擇器。 
a) “:input”,選取所有<input>、<textarea>、<select >和<button>元素。 
b) “:text”,選取所有的文本框元素。 
c) “:password”,選取所有的密碼框元素。 
d) “:radio”,選取所有的單選框元素。 
e) “:checkbox”,選取所有的多選框元素。 
f) “:submit”,選取所有的提交按鈕元素。 
g) “:image”,選取所有的圖像按鈕元素。 
h) “:reset”,選取所有重置按鈕元素。 
i) “:button”,選取所有按鈕元素。 
j) “:file”,選取所有文件上傳域元素。 
k) “:hidden”,選取所有不可見元素。 

7).表單對象屬性過濾選擇器 
選取表單元素屬性的過濾選擇器。 
“:enabled”,選取所有可用元素。 
“:disabled”,選取所有不可用元素。 
“:checked”,選取所有被選中的元素,如單選框、復選框。 
“:selected”,選取所有被選中項元素,如下拉列表框、列表框。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM