# [jQuery] 選擇器
###### tags: `jQuery`
[TOC]
:::warning
部分偽類過濾器在 3.4 已不推薦使用，需改由相對應的方法進行篩選。
:::
<style>
table th:first-of-type {
width: 40%;
}
table th:nth-of-type(2) {
width: 60%;
}
</style>
## 指令表
### 基本
|基本選擇器|說明|
|-|-|
| `$('*')` | 全體選擇器|
| `$('element')` | 元素選擇器、標籤選擇器|
| `$('.class')` | 類別選擇器|
| `$('#id')` | ID 選擇器|
| `$('selector1,mselector,selectorN')` | 群組選擇器|
| `$('parent > child')` | 子代選擇器|
| `$('ancestor descendant')` | 後代選擇器|
| `$('prev + next')` | 兄弟或相鄰選擇器|
| `$('prev ~ siblings')` | 同層全體選擇器|
### 元素
|元素選擇器|說明|
|-|-|
| `element[name]` | 有 name 屬性的元素|
| `element[name = 'value']` | name 屬性值為 value 的元素|
| `element[name ~= 'value']` | 有多個 name 屬性，且其中一個的值為 value 的元素|
| `element[name ^= 'value']` | name 屬性值開頭為 value 的元素|
| `element[name = 'value']` | name 屬性值為 value 的元素，或屬性值開頭為 value 的元素|
| `element[name *= 'value']` | name 屬性值包含 value 的元素|
| `element[name $= 'value']` | name 屬性值結尾為 value 的元素|
| `element[name != 'value']` | name 屬性值不為 value 的元素|
| `element[name = 'value'][name2 = 'value2']` | 屬性值符合多項指定條件的元素|
### Child
|Child 過濾器<br/>(CSS 的 child 或 type 這類的選擇器)|說明|
|-|-|
|`:first-child` | 只能選擇父元素的第一個子元素，等同於 nth-child (1)|
|`:last-child` | 只能選擇父元素的最後一個子元素|
|`:nth-child(n)` | 選擇父元素之下的第 n 個子元素|
|`:first-of-type` | 元素的同種類元素之中第 1 個子元素|
|`:last-of-type` | 元素的同種類元素之中最後 1 個子元素|
|`:nth-of-type(n)` | 元素的同種類元素之中第 n 個子元素|
|`:nth-last-child(n)` | 元素之下倒數第 n 個子元素|
|`:nth-last-of-type(n)` | 元素的同種類元素之中，倒數第 n 個子元素|
|`:only-child` | 元素之下僅有 1 個的子元素|
|`:only-of-type` | 元素的同種類元素之中，僅有 1 個的子元素|
### Content
|Content 過濾器|說明|
|-|-|
|`:contains(‘text’)` | 選取文字內容包含 text 字串的元素|
|`:empty` | 選取無子元素沒有內容的元素，與:parent 相反|
|`:parent` | 選取擁有子元素或文字內容的元素，與:empty 相反，:parent 不是 CSS 規範|
### Form
|Form 過濾器|說明|
|-|-|
| `:text` | type 屬性值為 text 的 input 元素 (單行文字)，使用 [type=”input”] 會有較佳的效能 |
| `:radio` | type 屬性值為 radio 的 input 元素 (單選核取方塊) |
| `:checkbox` | type 屬性值為 checkbox 的 input 元素 (多選核取方塊)，使用 $(‘[type=”checkbox”]’) 會有較佳的效能 |
| `:password` | type 屬性值為 password 的 input 元素 (密碼輸入) ，使用 $(‘input:password’) 會有較佳效能 |
| `:file` | type 屬性值為 file 的 input 元素 (檔案選擇) |
| `:image` | type 屬性值為 image 的 input 元素 (圖片按鈕) ，使用 [type=”image”] 會有較佳的效能 |
| `:submit` | type 屬性值為 submit 的 input 元素 (送出按鈕)，使用 [type=”submit”] 會有較佳的效能 |
| `:reset` | type 屬性值為 reset 的 input 元素 (清除重填按鈕) |
| `:input` | input 元素、textarea 元素、select 元素、button 元素，使用.filter (“:input”) 會有較佳效能 |
| `:hidden` | type 屬性值為 hidden 的 input 元素 (隱藏欄位) |
| `:button` | 選取 button 與 inpput 元素的 type 屬性值為 button |
| `:checked` | 已核選的元素 (單選核取方塊或多選核取方塊) |
| `:disabled` | 無法輸入停用的元素 |
| `:enabled` | 可輸入已起用的元素 |
| `:focus` | 選取目前聚焦的元件。$(document.activeElement) 會有較佳的效能 |
| `:selected` | select 元素裡 option 元素中被選擇的項目，在.filter () 中使用 CSS 樣式選擇器會有較佳的效能，.filter (“:selected”)
### Visibility
|Visibility 過濾器|說明|
|-|-|
| `:hidden` | 隱藏的元素 |
| `:visible` | 顯示的元素 |
## DOM 篩選方法 - 常見
### .slice(index)、.slice(start, end)
起始值為0，負數表示從最後面開始。
表示從 index 後面一位開始，選擇全部亦或選擇某範圍。
```=jQuery
$('#test p').slice(1) // 選擇2之後的全部
$('#test p').slice(0, 3) // 選擇1~3
```
### .eq(index)
起始值為0，負數表示從最後面開始(-1表示選擇倒數第一個)。
* 空字串 "" 表示選擇第一個。
* true 會轉換為 eq (1)，選擇到第二個。
```=jQuery
$('#menu li').eq(0) // jQuery 物件
$('#menu li')[0] // JavaScript 的原生 DOM
$('#menu li').get(0) // JavaScript 的原生 DOM
```
### .first()
取得集合物件的第一個元素
### .last()
取得集合物件的最後一個元素
### .odd()
起始值為0。取得集合物件索引值(index)為奇數元素
### .even()
起始值為0。取得集合物件索引值(index)為偶數元素
### .not(selector)
選擇不符合 selector 條件的元素
### .filter(selector)
選擇符合 selector 條件的元素
selector 可使用 function 來篩選，回傳布林值表示是否符合篩選條件，如:
```=jQuery
$('li')
.filter(function (index, element) {
return $('strong', this).length == 1
})
```
### .find(selector)、.find(selector, selector, selector)
### .has(selector)
### .is()
### .contents()
獲取裡面所有的子元素並存入 jQuery 物件陣列，包含 text 與 comment nodes。
### .end()
當 jQuery 對象物件因為操作而被改變目標後，可利用 end () 結束目前處理並回傳上一次所選的 jQuery 物件。
## DOM 篩選方法 - 兄弟（同層）
### .next()
選擇與指定對象同層的後一個弟元素，如果有指定參數 CSS 選擇器，則只有在與這個 CSS 選擇器匹配且也為弟弟時，才會有效果。如同 JavaScript 的 .nextElementSibling。
```=jQuery
$(selector).next([selector])
```
### .nextAll
選擇與指定對象同層的後面所有弟元素，如果有指定參數 CSS 選擇器，則只有在與這個 CSS 選擇器匹配且也為弟弟時，才會有效果。
```=jQuery
$(selector).nextAll([selector])
```
### .nextUntil()
選擇與指定對象同層的後一個到 nextUntil (selector) 選擇器之間的弟元素，不包括指定對象本身。
### .prev()
選擇與指定對象同層的前一個兄元素。如果有指定參數 CSS 選擇器，則只有在與這個 CSS 選擇器匹配且也為哥哥時，才會有效果。
```=jQuery
$(selector).prev([selector])
```
### .prevAll()
選擇與指定對象同層的前面所有兄元素，如果有指定參數 CSS 選擇器，則只有在與這個 CSS 選擇器匹配且也為哥哥時，才會有效果。
```=jQuery
$(selector).prevAll([selector])
```
### .prevUntil()
選擇與指定對象同層的前一個到 prevUntil (selector) 選擇器之間的兄元素，不包括指定對象本身。
```=jQuery
$(selector).prevUntil( [selector ] [, filter ] )
```
### .siblings()
選擇指定對象的其他兄弟節點，不包括指定對象。
```=jQuery
$(selector).siblings([selector])
```
## DOM 篩選方法 - 父（上層）
### .parent()
往上一層選擇指定對象的父元素，如同 JavaScript 的 .parentNode。
### .parents()
選擇指定對象的祖先元素，parents () 往上查找，不會停止，找出所有符合條件的祖先們。
### .parentsUntil()
選擇對象到 parentsUntil () 參數條件之間的祖先節點，直到那個目標為止之間的對象。
```=jQuery
$(selector).parentsUntil(selector)
```
### .closest()
根據 css 選擇器，返回第一個祖先節點，參數可指定第一個祖先節點是誰。closest () 往上查找，只要找到符合條件的就停止。
```=jQuery
$(selector).closest(selector)
```
### .offsetParent()
返回第一個被定位的祖先對象，有設定 position 屬性 (static 除外) 且最近的元素。
## DOM 篩選方法 - 子（下層）
### .children()
只會選取子元素，並且可以使用 selector 進行過濾。
```=jQuery
$(selector).children([selector])
```
```=jQuery
$('#menu').children().css('color', 'red') // 選擇所有兒子
$('#menu').children('.c').css('color', 'red') // 選擇有 .c 兒子
```
## :triangular_flag_on_post: 範例
`$('#test p')` id為test的元素中所有p標籤
`$('#test *')` id為test的元素中所有物件
`$('#test + p')` id為test的元素中的第一個p標籤
[[jQuery] 筆記 (五) – 選擇器 (selector)](https://ithelp.ithome.com.tw/articles/10095237)
[jQuery - 選擇器與遍歷](https://powerkaifu.github.io/2020/10/09/lesson-jq-06.traversing/)
Sign in with Wallet
Connect another wallet