寫 DHTML 的互動網頁，要對網頁中的內容做變化，首先就是得把想要變化的內容給選取出來，而這些內容通常都是 HTML 元素，也就是 HTML 標籤（Tag），例如：<p> <div> <span> <ul> <li>...，可以是某一個標籤或是一堆標籤的組合。在這裡我們都稱之為 HTML 元素 ( Element )。
jQuery 有非常多的選取元素方式，大致上可以分為三大類：CSS, XPath 和 jQuery 自訂的選取方式。不論是使用哪種選取方式，通通都是使用 $()這個語法。
等等一邊閱\讀的時候，你可以一邊使用這個
互動式的 jQuery 選取方式測試頁面，跟著來測試看看。它的使用方式很簡單，在最上方的文字欄位中輸入選取的規則，也就是原本寫在
$() 括號中的內容，但不要包含
$()，然後左半邊就會將選取出來的元素給反白。你也可以在右半邊自行修改 HTML 原始碼，像是加上新的標籤或是 CSS 類別、id 之類的，左半邊就會自動跟著變化，繼續在上方輸入不同的選取規則來測試。
1. 簡單選取器
先來看最常用也是最簡單的選取方式，基本上就和 CSS 的語法是一樣的：
注意：底下的描述都先省略的 $()，你在使用的時候要記得加上 $()，而且括號中若是文字字串要記得加上雙引號，例如 $("p")。
- *：選取任何元素。
- HTML標籤名稱：選擇指定標籤的 HTML 元素，例如 $("p") 會選擇網頁中所有的 <p>。
- .CSS類別名稱：選擇指定類別的 HTML 元素，注意有個點。例如 $(".myClassName") 會選擇網頁中所有擁有 myClassName 類別的元素。你也可以再加上 HTML 標籤名稱，也就是將兩種選取器組合在一起，例如 $("div.myClassName") 會選擇所有 <div class="myClassName"> 的 div 元素，而沒有這個類別名稱的 div 就不會被選取。
- #ID名稱：選擇指定 ID 的 HTML 元素，注意是個井字號。例如 $("#myid") 會選擇網頁中 id 名稱叫做 myid 的元素。同樣的可以在井字號前面加上 HTML 標籤名稱，例如 $("div#myid")。但這樣的寫法式沒必要的，基本上同一頁裡面 id 名稱是不會重複的，也最好不要重複，所以應該只會選取出一個元素。
- 選取器1,選取器2,選取器N：將多個選取器集合在一起，中間用逗號分隔，和CSS類似。會一次選擇出符合這些選取器的所有元素，只要符合其中某一個就會被選出。
2. 層級選取器
兩個（或以上）元素組合的選取方式，也是 CSS 選取方式的一種：
- 第一個元素 第二個元素：兩個元素中間空一格。例如 $("div li") 會選取出包含在 div 底下的所有 li 元素，不管中間相隔幾層都沒關係。若是 li 的任何一個外層都沒 div 的話就不會被選取，也就是說 li 必須是 div 的子孫。
- 第一個元素 > 第二個元素：比剛剛多個大於符號。例如 $("ol > li") 會選取出所有 li，而且這些 li 的 "父親" 必須是 ol，若中間還相隔了幾層就不算了！第二個元素必須是第一個元素的孩子（而不是孫子或曾孫...）。
- 第一個元素 + 第二個元素：兩個元素在同一層（是兄弟關係），而且第二個元素必須緊連著第一個元素。例如大哥和二哥可以，二哥和三哥可以，大哥和三哥就選取不到了。你可以在互動式的 jQuery 選取方式測試頁面中輸入 h1 + div 來測試看看就知道效果了。
- 第一個元素 ~ 第二個元素：兩個元素在同一層（是兄弟關係），但不需要緊連著。一樣你可以在測試頁面中輸入 h1 ~ div 來測試看看。
也可以用三個或更多元素來做層級的選取，例如：$("ol > li span + a")。這些規則看起來好像有點小複雜，不過若你熟悉 CSS 的語法就知道和 CSS 的選取方式是相同的。
3. 子元素選取器
如果想選擇子元素，除了剛剛所說的方式，還有更方便作法，和 CSS 語法也是十分類似的：
- :first-child：選取指定元素，而且它是它父元素的第一個孩子，不管它的父元素叫什麼。例如 $("li:first-child") 會選取第一個 li。
- :last-child：選取指定元素，而且它是它父元素的最後一個孩子，不管它的父元素叫什麼。例如 $("li:last-child") 會選取最後一個 li。
- :only-child：選取指定元素，而且它必須是父元素唯一的一個孩子，不管它的父元素叫什麼。
- :nth-child(數字)：選取指定元素，而它是父元素的第 n 個孩子，n 就是那個數字。例如 $("li:nth-child(5)")。
4. 定位篩選選取器
如果要根據編號或排列的順序來選取特定位置上面的元素，或是過濾掉特定的元素，可以使用這些選取器：
- :first：符合的第一個元素，例如 $("tr:first") 會選取表格的第一行。
- :last：符合的最後一個元素，例如 $("tr:first") 會選取表格的最後一行。
- :not：過濾掉所有符合指定選擇器的元素，例如 $("input:not(:checked)") 會選取所有未勾選的 input 元素。
- :even：索引值為偶數的元素，從 0 開始計算。例如 $("tr:even") 會選取表格的第 1, 3, 5 ... 行（索引值是 0, 2, 4）。
- :odd：索引值為奇數的元素，從 0 開始計算。例如 $("tr:odd") 會選取表格的第 2, 4, 6 ... 行。
- :eq：索引值與指定的值相等的元素，例如 $("tr:eq(0)") 會選取表格的第 1 行。
- :gt：索引值大於指定值的元素，例如 $("tr:gt(0)") 會選取表格的第 2 行和其以後的行。
- :lt：索引值小於指定值的元素。
- :header：選取如 h1, h2, h3... 標題元素。
- :animated：選取所有正在執行動畫效果的元素。
5. 內容篩選選取器
根據元素內的文字內容，或是子元素來做篩選的選取方式。
- :contains：元素內是否有包含指定的文字，例如 $("h2:contains(\'選取器\')") 會選出標題文字內含有 "選取器" 這幾個字的 h2 元素。
- :has：元素內是否有包含指定的元素，例如 $("p:has(span)") 會選出內容中包含 span 元素的 p 元素。
- :empty：選取指定元素，而且它必須沒有任何子元素，也沒有內容文字，即文字節點 (text node) 也不能有。
- :parent：選取有子元素或內容文字，是其他元素父親的元素，即內容不是空的，和 :empty 剛好相反。例如 $("li:parent")，只會選出內容不是空的 <li>。
6. 顯示性選取器
根據元素是顯示或隱藏來選取。
- :hidden：選出看不見、或類型為 hidden 的所有指定元素，例如 $("div:hidden")。
- :visible：選出看得見的所有指定元素，例如 $("p:visible")。
7. 屬性選取器
還可以根據元素中是否有某個屬性來做選取，都會使用中括號作為區分：
- [屬性名稱]：含有指定屬性名稱的元素，例如 $("p[class]") 會選取有 class 這個屬性的所有 <p>。
- [屬性名稱=屬性值]：含有指定屬性名稱的元素，而且屬性值必須和指定的值完全相等，例如 $("p[class=theClassName]")。
- [屬性名稱!=屬性值]：不含有指定屬性名稱，或是屬性值不等於指定值的元素。
若要選取含有指定的屬性名稱，但值不相等時，可以使用 [屬性名稱]:not[屬性名稱=屬性值]。
- [屬性名稱^=屬性值]：含有指定屬性名稱的元素，而且那個屬性值的 "開頭" 必須是指定的值，例如 $("p[class^=the]")。
- [屬性名稱$=屬性值]：含有指定屬性名稱的元素，而且那個屬性值的 "結尾" 必須是指定的值，例如 $("p[@class$=Name]")。
- [屬性名稱*=屬性值]：含有指定屬性名稱的元素，而且那個屬性值的任何部分必須 "包含" 指定的值，例如 $("p[@class*=ass]")。
- [屬性選取器1][屬性選取器2][屬性選取器N]：組合選取器，可以在需要同時滿足多個條件時使用。
8. 表單選取器
這些是 jQuery 自訂虛擬類別選擇器，可以用來選取各種表單 ui 元素。
- :input：選取所有 <input> 元素。
- :text：選取所有單行文字欄位。
- :password：選取所有密碼欄位。
- :radio：選取所有圓鈕。
- :checkbox：選取所有核取方塊。
- :submit：選取所有送出表單按鈕。
- :image：選取所有 <input type="image"> 的元素。
- :reset：選取所有重設表單按鈕。
- :button：選取所有按鈕。
- :file：選取所有檔案選擇欄位。
- :hidden：選取所有隱藏欄位。
9. 表單狀態選取器
根據表單元素的屬性，是否勾選或啟用來做選取。
- :enabled：選取指定表單 ui 元素，而且它不是 disabled 失效的。
- :disabled：選取指定表單 ui 元素，而且它不是 enabled 啟用的。
- :checked：選取指定表單 ui 元素，而且它已經被選擇，例如圓鈕和核取方塊。
- :selected：選取指定表單 ui 元素，而且它已經被選擇，例如下拉選單中的一個或多個選項。
