JQuery選擇器基礎教學：.基本選擇器，層次選擇器，過濾選擇器
- 伊谢尔伦原創
- 2017-06-17 15:45:091590瀏覽
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”，選取所有、