4-4. 認識 jQuery 選取物件的方法
jQuery的選取器
其餘選取器請參看： 【參看w3schools英文版】 【參看runoob簡中版】 【參看w3school簡中版】 【參看JQ官網版】
| 基本選取器 | 說明 |
|---|---|
| #id | 選取指定id名稱的元素 |
| .class | 選取指定類別名稱的元素 |
| element | 選取指定標籤名稱的元素 |
| * | 選取所有的元素 |
| selector1,selector2,...,selectorN | 同時選取多個指定名稱的元素 |
| 層次選取器 | 說明 |
|---|---|
| ancestor descendant | 選取ancestor元素裡的所有descendant後代元素 |
| parent > child | 選取parent元素下的child子元素 |
| prev + next | 選取緊接在prev元素後的next元素 |
| prev ~ siblings | 選取prev元素之後的所有兄弟姊妹的元素 |
| 基本過濾選取器 | 說明 |
|---|---|
| :first | 選取第1個元素 version deprecated: 3.4 已棄用 |
| :last | 選取最後1個元素 version deprecated: 3.4 已棄用 |
| :not(selector) | 去除指定的selector之後的其他元素 |
| :even | 選取索引號碼是偶數的所有元素(索引從0開始) version deprecated: 3.4 已棄用 |
| :odd | 選取索引號碼是奇數的所有元素(索引從0開始) version deprecated: 3.4 已棄用 |
| :eq(index) | 選取索引號碼為index的元素 version deprecated: 3.4 已棄用 |
| :gt(index) | 選取索引號碼大於index的元素 version deprecated: 3.4 已棄用 |
| :lt(index) | 選取索引號碼小於index的元素 version deprecated: 3.4 已棄用 |
| :header | 選取所有的標題元素(例如:h1、h2...等) |
| :animated | 選取目前正在執行動畫的所有元素 |
| 內容過濾選取器 | 說明 |
|---|---|
| :contains(text) | 選取含有純文字內容為"text"的元素 |
| :empty | 選取不包含子元素或者純文字的空元素 |
| :has(selector) | 選取含有指定選取器的元素 |
| :parent | 選取含有子元素或者純文字的元素 |
| 屬性過濾選取器 | 說明 |
|---|---|
| [attribute] | 選取擁有指定屬性的元素 |
| [attribute=value] | 選取指定屬性值等於value的元素 |
| [attribute!=value] | 選取指定屬性值不等於value的元素 |
| [attribute^=value] | 選取指定屬性值以value開始的元素 |
| [attribute$=value] | 選取指定屬性值以value結束的元素 |
| [attribute*=value] | 選取指定屬性值包含有value的元素 |
| [attribute|=value] | 選取指定屬性值等於value的元素, 通常會用在語言屬性 |
| [attribute~=value] | 選取指定屬性值等於value的元素, 可包含空格 |
| [selector1] [selector2] [selectorN] |
用屬性選取器合併成一個複合屬性選取器， 滿足多個條件，每選擇一次縮小一次範圍。 |
| 子元素過濾選取器 | 說明 |
|---|---|
| :nth-child(index/even/odd/eq) | 選取每個父元素下的第index個子元素或者奇偶元素(index從1算起) |
| :first-child | 選取每個父元素的第1個子元素 |
| :last-child | 選取每個父元素的最後1個子元素 |
| :only-child | 選取父元素中只有惟一的子元素 |
jQuery相對性選取的方法
其餘相對性選取的方法請參看： 【w3schools-Traversing】 【runoob-遍历】 【w3school-遍历】 【JQ官網-Traversing】
認識 jQuery 相對選取的方法
- 參考英文版 w3schools -------- 觀念介紹 -------- 參考整理表
- 參考簡中版 RUNOOB -------- 觀念介紹 -------- 參考整理表
- 參考簡中版 w3school -------- 觀念介紹 -------- 參考整理表
- 參考 jQuery 官網 -------- 有關家族關係 -------- 有關過濾關係
家族關係舉例
- next()----------同一層下一個
- prev()----------同一層上一個
- parent()--------上一層(父層)
- children()------下一層(子層)
- parents()-------目前以上的外層(父層或祖先層)
- find()-----------往目前以下的子孫層尋找
- siblings()------------同一層除了自己以外的兄弟
- nextAll()-------------同一層自己以後的弟弟們
- nextUntil()-----------同一層自己以後的弟弟們直到指定的元素
- prevAll()-------------同一層自己以前的哥哥們
- prevUntil()-----------同一層自己以前的哥哥們直到指定的元素
過濾關係舉例
- eq()-------------指定第幾個，以 0 編號開始
- first()----------符合指定元素的第一個...
- last()-----------符合指定元素的最後一個...
- filter()----------符合指定元素指定條件的過濾出來...
- not()-------------排除掉符合not指定的條件...
- is()--------------判斷是否符合...