首頁 > web前端 > js教程 > 主體

JQuery選擇器基礎教學:.基本選擇器,層次選擇器,過濾選擇器

伊谢尔伦
發布: 2017-06-17 15:45:09
原創
1592 人瀏覽過

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 的元素,也包含文字隱藏域 ()和 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”,選取所有