詳解強大的jQuery選擇器之過濾選擇器、表單選擇器
前言
上一篇文章(詳解強大的jQuery選擇器之基本選擇器、層次選擇器)介紹了jQuery四類選擇器中的基本選擇器、層次選擇器，本文將介紹剩下的兩種選擇器：過濾選擇器、表單選擇器。
本文仍使用上一篇文章中的示例頁面。
一、過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出所需要的DOM元素，過濾規則與CSS中的偽類選擇器語法相同。
按照不同的過濾規則，過濾選擇器可以分為以下幾種：
1、基本過濾選擇器
2、內容過濾選擇器
3、可見性過濾選擇器
4、屬性過濾選擇器
5、子元素過濾選擇器
6、表單對象屬性過濾選擇器
下面就對這幾種過濾選擇器分別加以介紹。
1.1基本過濾選擇器
基本過濾選擇器是過濾選擇器中用的最多的一種，它的過濾規則主要體現在元素的位置(索引)上及一些特定的元素。
基本過濾選擇器規則：
| 選 擇 器 | 描 述 | 返 回 | 示 例 |
| :first | 選取第1個元素 | 單個元素 | $("div:first")選取所有 <div>元素 中第一個<div>元素 |
| :last | 選取最后1個元素 | 單個元素 | $("div:last")選取所有 <div>元素 中最后一個<div>元素 |
| :not(selector) | 去除所有與給定選擇器 匹配的元素 |
集合元素 | $("input:not(.myClass)")選取class不是 myClass的<input>元素 |
| :even | 選取索引(從0開始)是偶數 的所有元素 |
集合元素 | $("input:even")選取索引是偶數的 <input>元素 |
| :odd | 選取索引(從0開始)是奇數 的所有元素 |
集合元素 | $("input:odd")選取索引是奇數的 <input>元素 |
| :eq(index) | 選取索引(從0開始)等于 index的元素 |
單個元素 | $("input:eq(1)")選取索引等于1的 <input>元素 |
| :gt(index) | 選取索引(從0開始)大于 index的元素 |
集合元素 | $("input:gt(1)")選取索引大于1的 <input>元素 |
| :lt(index) | 選取索引(從0開始)小于 index的元素 |
集合元素 | $("input:lt(1)")選取索引小于1的 <input>元素 |
| :header | 選取所有的標題元素，即 <h1>到<h6> |
集合元素 | $(":header")選取頁面中所有的標題元素 |
| :animated | 選取當前正在執行動畫的 所有元素 |
集合元素 | $("div:animated")選取當前正在執行動畫 的<div>元素 |
示例：
1.2內容過濾選擇器
內容過濾選擇器的過濾規則主要體現在它所含的子元素或文本內容上。
內容過濾選擇器規則：
| 選 擇 器 | 描 述 | 返 回 | 示 例 |
| :contains(text) | 選取含有文本內容為 text 的元素 | 集合元素 | $("div:contains('test')")選取含有文本內容 為 test 的<div>元素 |
| :empty | 選取不包含子元素或文本的空元素 | 集合元素 | $("div:empty")選取不包含子元素或文本 的空<div>元素 |
| :has(selector) | 選取含有給定選擇器 匹配的元素的元素 |
集合元素 | $("div:has(.myClass)")選取含有class為 myClass的元素的<div>元素 |
| :parent | 選取含有子元素或文本的元素 | 集合元素 | $("div:parent")選取含有子元素或文本的 <div>元素 |
示例：
1.3可見性過濾選擇器
可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素。
可見性過濾選擇器規則：
| 選 擇 器 | 描 述 | 返 回 | 示 例 |
| :hidden | 選取所有不可見的元素 | 集合元素 | $("div:hidden")選取所有不可見的<div>元素 |
| :visible | 選取所有不可見的元素 | 集合元素 | $("div:visible")選取所有可見的<div>元素 |
示例：
1.4屬性過濾選擇器
屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素。
屬性過濾選擇器規則：
| 選 擇 器 | 描 述 | 返 回 | 示 例 |
| [attribute] | 選取擁有此屬性的元素 | 集合元素 | $("div[id]")選取擁有屬性id的元素 |
| [attribute=value] | 選取屬性的值為value的元素 | 集合元素 | $("div[title=test]")選取屬性 title 為 test 的<div>元素 |
| [attribute!=value] | 選取屬性的值不等于value的元素 | 集合元素 | $("div[title!=test]")選取屬性 title 不 等于 test 的<div>元素 |
| [attribute^=value] | 選取屬性的值以value開始的元素 | 集合元素 | $("div[title^=test]")選取屬性 title 以 test 開始的<div>元素 |
| [attribute$=value] | 選取屬性的值以value結束的元素 | 集合元素 | $("div[title$=test]")選取屬性 title 以 test 結束的<div>元素 |
| [attribute*=value] | 選取屬性的值含有value的元素 | 集合元素 | $("div[title*=test]")選取屬性 title 含 有 test 的<div>元素 |
| [selector1][selector2] ...[selectorN] |
選取匹配以上所有屬性 選擇器的元素 |
集合元素 | $("div[id][title*=test]")選取擁有屬性id， 且屬性 title 含有 test 的<div>元素 |
示例：
1.5子元素過濾選擇器
子元素過濾選擇器的過濾規則是通過元素的父子關系來獲取相應的元素。
子元素過濾選擇器規則：
| 選 擇 器 | 描 述 | 返 回 | 示 例 |
|
:nth-child(index/ even/odd/equation) |
選取每個父元素下的第index(索引值為奇數/ 索引值為偶數/索引值等于某個表達式)個子元 素，index從1開始 |
集合元素 | $("div:nth-child(1)")選取每個<div>中第一個子元素 |
| :first-child | 選取每個父元素下的第1個子元素 | 集合元素 | $("div :first-child")選取每個<div>下第一個子元素 |
| :last-child | 選取每個父元素下的最后1個子元素 | 集合元素 | $("div :last-child")選取每個<div>下最后一個子元素 |
| :only-child | 選取只有唯一子元素的元素的子元素 | 集合元素 | $("div :only-child")選擇只有一個子元素的<div>元素 |
這里值得一提的是:nth-child()，這個選擇器的詳細功能如下：
1、nth-child(even) 能選取每個父元素下的索引值是偶數的元素
2、nth-child(odd) 能選取每個父元素下的索引值是奇數的元素
3、nth-child(2) 能選取每個父元素下的索引值等于2的元素
4、nth-child(3n) 能選取每個父元素下的索引值等于3的倍數的元素，n從0開始
5、nth-child(3n+1) 能選取每個父元素下的索引值等于 (3n+1) 的的元素，n從0開始
示例：
1.6表單對象屬性過濾選擇器
此選擇器主要是對所選擇的表單元素進行過濾。
表單對象屬性過濾選擇器規則：
| 選 擇 器 | 描 述 | 返 回 | 示 例 |
| :enabled | 選取所有可用元素 | 集合元素 | $("body:enabled")選取頁面內所有可用元素 |
| :disabled | 選取所有不可用元素 | 集合元素 | $("body:disabled")選取頁面內所有不可用元素 |
| :checked | 選取所有被選中的元素(單選框、復選框) | 集合元素 | $("input:checked")選取所有被選中的<input>元素 |
| :selected | 選取所有被選中的選項元素(下拉列表) | 集合元素 | $("select:selected")選取所有被選中的選項元素 |
示例：
二、表單選擇器
顧名思義，表單選擇器是為了能更加容易地操作表單，表單選擇器是根據元素類型來定義的。
表單選擇器規則：
| 選 擇 器 | 描 述 | 返 回 | 示 例 |
| :input | 選取所有的<input>、<textarea>、 <select>和<button>元素 |
集合元素 | $(":input")選取所有的<input>、<textarea>、 <select>和<button>元素 |
| :text | 選取所有的單行文本框 | 集合元素 | $(":text")選取所有的單行文本框 |
| :password | 選取所有的密碼框 | 集合元素 | $(":password")選取所有的密碼框 |
| :radio | 選取所有的單選框 | 集合元素 | $(":radio")選取所有的單選框 |
| :checkbox | 選取所有的多選框 | 集合元素 | $(":checkbox")選取所有的多選框 |
| :submit | 選取所有的提交按鈕 | 集合元素 | $(":submit")選取所有的提交按鈕 |
| :image | 選取所有的圖像按鈕 | 集合元素 | $(":image")選取所有的圖像按鈕 |
| :reset | 選取所有的重置按鈕 | 集合元素 | $(":reset")選取所有的重置按鈕 |
| :button | 選取所有的按鈕 | 集合元素 | $(":button")選取所有的按鈕 |
| :file | 選取所有的上傳按鈕 | 集合元素 | $(":file")選取所有的上傳按鈕 |
| :hidden | 選取所有的不可見元素 | 集合元素 | $(":hidden")選取所有的不可見元素 |
示例：
小結
本文主要介紹了jQuery選擇器中的過濾選擇器和表單選擇器，并對每種類型的選擇器給出了示例代碼，希望能對大家有所幫助。本人也是jQuery的初學者，歡迎大家拍磚。
參考書籍：《鋒利的jQuery》(人民郵電出版社)
浙公網安備 33010602011771號