jQuery基礎 | 選擇器
阿新 • • 發佈：2018-12-26
導讀：jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器和表單選擇器四大類。
基本選擇器
1-1 基本選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| #id | id選擇器 | 單個元素 |
| element | 元素選擇器 | 元素集合 |
| .class | 類選擇器 | 元素集合 |
| * | 匹配所有元素 | 元素集合 |
| selector1,selector2 | 將每一個選擇器匹配到的元素合併後一起返回 | 元素集合 |
層次選擇器
2-1 層次選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| ancestor descendant | 根據祖先元素匹配所有後代元素 | 元素集合 |
| parent > child | 匹配子元素 | 元素集合 |
| parent + next | 匹配下一個兄弟元素 | 元素集合（parent可有多個 |
| prev ~ siblings | 匹配prev之後的所有兄弟元素 | 元素集合 |
注：siblings()方法與選擇器prev~siblings的區別
過濾選擇器
3-1 簡單過濾選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| first() 或 : first | 獲取第一個元素 | 單個元素 |
| last() 或 : last | 最後一個 | 單個元素 |
| :even | 索引值為偶數的元素，索引號從0開始 | 元素集合 |
| :odd | 奇數 | 元素集合 |
| :gt(index) | 大於索引值的元素，索引號從0開始 | 元素集合 |
| :lt(index) | 小於 | 元素集合 |
| :not(selector) | 除給定選擇器外的所有元素 | 元素集合 |
| :eq(index) | 指定索引值的元素 | 單個元素 |
| :header | 所有標題型別的元素，h1,h2…. | 元素集合 |
| :animated | 獲取正在執行動畫效果的元素 | 元素集合 |
注：選擇器animated在捕捉動畫效果元素時，先自定義一個動畫效果函式animateIt()，然後執行該函式，選擇器才能獲取動畫效果元素，並addClass
3-2 內容過濾選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| :contains(text) | 包含給定文字的元素 | 元素集合 |
| :empty | 所有不包含子元素或文字的元素 | 元素集合 |
| :has(selector) | 含有選擇器所匹配的元素 | 元素集合 |
| :parent | 含有子元素或文字的元素 | 元素集合 |
3-3 可見性過濾選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| :hidden | 所有不可見元素，或type為hidden的元素 | 元素集合 |
| :visible | 所有可見元素 | 元素集合 |
注： ：hidden選擇器所選擇的包括樣式為display：none所有元素、屬性type=“hidden”和樣式為visibility:hidden的所有元素。
3-4 屬性過濾選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| [attribute] | 包含給定屬性的元素 | 元素集合 |
| [attribute =value] | 等於給定屬性是某個特定值 | 元素集合 |
| [attribute !=value] | 不等於 | 元素集合 |
| [attribute ^=value] | 以某些值開始 | 元素集合 |
| [attribute$ =value] | 以某些值結尾 | 元素集合 |
| [attribute *=value] | 包含某些值 | 元素集合 |
| [selector1][selector1] | 滿足多個條件的符合屬性的元素 | 元素集合 |
3-5 子元素過濾選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| :nth-child(eq|even|odd|index) | 獲取每個父元素下的特地位置元素，索引號從1開始c元素集合 | |
| :first-child | 每個父元素下的第一個子元素 | 元素集合 |
| :last-child | 最後一個子元素 | 元素集合 |
| :only-child | 獲取每個父元素下的僅有一個子元素 | 元素集合 |
3-6 表單物件屬性過濾選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| :enable | 獲取表單中所有屬性為可用的元素 | 元素集合 |
| :disable | 不可用 | 元素集合 |
| :checked | 表單中所有被選中的元素 | 元素集合 |
| :selected | 表單中所有被選中option的元素 | 元素集合 |
表單選擇器
4-1 表單選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| :input | 獲取所有input、textarea、select | 元素集合 |
| :text | 所有單行文字框 | 元素集合 |
| :password | 所有密碼框 | 元素集合 |
| :radio | 單選按鈕 | 元素集合 |
| :checkbox | 複選框 | 元素集合 |
| :submit | 提交按鈕 | 元素集合 |
| :image | 影象域 | 元素集合 |
| :reset | 重置按鈕 | 元素集合 |
| :bottom | 所有按鈕 | 元素集合 |
| :file | 檔案域 | 元素集合 |
因為每次都開啟Wiz找，就乾脆都放到部落格裡來了。
參考文獻：
〔1〕陶國榮 . jQuery權威指南[M] . 機械工業出版社 . 2011