CH2.認識jQuery選取器
jQuery中的選取器完全繼承CSS選取器的方式，取得到選取器後才能控制要執行的行為，也就是選取器是要被控制的目標。
jQuery的基本選取器：(請使用ex/ex2-1.html練習)
| 選取器 | 說明 | 題目 | 範例練習 |
|---|---|---|---|
| #id | 選取指定的id元素 | 改變id為one的元素的背景色 | ex2-1 |
| .class | 選取指定的類別名稱元素 | 改變class為mini的所有元素 | ex2-2 |
| element | 選取指定的標籤名稱元素 | 改變標籤為div的所有元素 | ex2-3 |
| * | 選取所有的元素 | 改變所有元素 | ex2-4 |
| selector1,selector2,...,selectorN | 同時選取多個指定的元素 | 改變所有的span元素以及id為two的元素 | ex2-5 |
jQuery的層次選取器：(請使用ex/ex2-1.html練習)
| 選取器 | 說明 | 題目 | 範例練習 |
|---|---|---|---|
| $("ancestor descendant") | 選取ancestor元素裡的所有descendant後代元素 | 改變body內所有div元素 | ex2-6 |
| $("parent>child") | 選取parent元素下的child子元素 | 改變body內子元素層的div | ex2-7 |
| $('prev+next') | 選取緊接在prev元素後的next元素 | 改變class為one的下一個(同一層)div元素 | ex2-8 |
| $('prev~siblings') | 選取prev元素之後的所有兄弟姊妹的元素 | 改變id為two後面的所有兄弟元素div | ex2-9 |
jQuery的過濾選取器：(請使用ex/ex2-1.html練習)
| 基本過濾選取器 | 說明 | 題目 | 範例練習 |
|---|---|---|---|
| :first | 選取第1個元素 | 改變第1個div元素 | ex2-10 |
| :last | 選取最後1個元素 | 改變最後1個div元素 | ex2-11 |
| :not(selector) | 去除指定的選取器後的其他選取器 | 改變class不為one的div元素 | ex2-12 |
| :even | 選取索引是偶數的所有元素(索引從0開始) | 改變索引值為偶數的div元素 | ex2-13 |
| :odd | 選取索引是奇數的所有元素(索引從0開始) | 改變索引值為奇數的div元素 | ex2-14 |
| :eq(index) | 選取索引為index的元素 | 改變索引值為3的div元素 | ex2-15 |
| :gt(index) | 選取索引大於index的元素 | 改變索引值大於3的div元素 | ex2-16 |
| :lt(index) | 選取索引小於index的元素 | 改變索引值小於3的div元素 | ex2-17 |
| :header | 選取所有的標題元素(例如:h1、h2...等) | 改變所有標題元素 | ex2-18 |
| :animated | 選取當前正在執行動畫的所有元素 | 改變當前正在執行動畫的所有元素 | ex2-19 |
| 內容過濾選取器 | 說明 | 題目 | 範例練習 |
|---|---|---|---|
| :contains(text) | 選取含有純文字內容為"text"的元素 | 改變含有純文字"test"的div | ex2-20 |
| :empty | 選取不包含子元素或者純文字的空元素 | 改變不包含子元素的空元素 | ex2-21 |
| :has(selector) | 選取含有指定選取器的元素 | 改變含有class為mini元素的div | ex2-22 |
| :parent | 選取含有子元素或者純文字的元素 | 改變含有子元素的div | ex2-23 |
| 可見性過濾選取器 | 說明 | 題目 | 範例練習 |
|---|---|---|---|
| :hidden | 選取所有不可見的元素 | 改變所有可見的div | ex2-24 |
| :visible | 選取所有可見的元素 | 讓隱藏的div元素以3秒動畫顯示出來 | ex2-25 |
| 屬性過濾選取器 | 說明 | 題目 | 範例練習 |
|---|---|---|---|
| [attribute] | 選取擁有此屬性的元素 | 改變含有屬性title的div元素的背景色 | ex2-26 |
| [attribute=value] | 選取屬性值為value的元素 | 改變屬性title值等於「test」的div元素 | ex2-27 |
| [attribute!=value] | 選取屬性值不等於value的元素 | 改變屬性title值不等於「test」的div元素 (沒有屬性title的也將被選取) |
ex2-28 |
| [attribute^=value] | 選取屬性值以value開始的元素 | 改變屬性title值以「te」開始的div元素 | ex2-29 |
| [attribute$=value] | 選取屬性值以value結束的元素 | 改變屬性title值以「est」結束的div元素 | ex2-30 |
| [attribute*=value] | 選取屬性值含有value的元素 | 改變屬性title值含有「es」的div元素 | ex2-31 |
| [selector1] [selector2] [selectorN] |
用屬性選取器合併成一個複合屬性選取器， 滿足多個條件。 每選擇一次，縮小一次範圍。 |
組合屬性選取器,首先選取有屬性id的div元素， 然後在結果中選取屬性title值含有「es」的元素 |
ex2-32 |
| 子元素過濾選取器 | 說明 | 題目 | 範例練習 |
|---|---|---|---|
| :nth-child(index/even/odd/equation) | 選取每個父元素下的第index個子元素或者奇偶元素(index從1算起) | 改變每個.one父元素下的第2個子元素 | ex2-33 |
| :first-child | 選取每個父元素的第1個子元素 | 改變每個.one父元素下的第1個子元素 | ex2-34 |
| :last-child | 選取每個父元素的最後1個子元素 | 改變每個.one父元素下的最後1個子元素 | ex2-35 |
| :only-child | 選取父元素中只有惟一的子元素 | 改變每個.one父元素下只有1個子元素 | ex2-36 |