初學者指南：深入了解 jQuery 選擇器

更新日期： 2025 年 3 月 9 日

jQuery 是一個輕量級、快速且強大的 JavaScript 庫，它能讓開發者輕鬆操作 HTML 文件、處理事件、製作動畫，甚至與伺服器進行非同步請求 (AJAX)。

而在這一切的基礎上，選擇器 (Selector) 扮演著關鍵的角色。

選擇器能幫助我們快速且準確地選取 DOM (Document Object Model) 元素，讓後續操作變得更加便捷。

本篇文章將詳細介紹 jQuery 選擇器的種類與用法，適合初學者參考學習。

什麼是 jQuery 選擇器？

jQuery 選擇器是用於選取 HTML 頁面中特定元素的語法，它的語法類似於 CSS 選擇器，但提供了更多的功能和靈活性。

選擇器可以幫助我們：

• 快速抓取 DOM 元素：無論是單個元素還是多個元素，都能輕鬆取得。
• 方便進行批次操作：選取到元素後，可以直接進行樣式設定、事件綁定等操作。
• 支援複合選擇：可以組合多種選擇器進行更精細的選擇。

jQuery 選擇器的基本語法如下：

$("選擇器")

例如，要選取頁面中的所有段落元素 <p>，只需這樣寫：

$("p")

基本選擇器 (Basic Selectors)

基本選擇器是最常用且最簡單的一類選擇器，包括標籤選擇器、ID 選擇器和類別選擇器等。

標籤選擇器 (Element Selector)

用法：選取所有特定的 HTML 標籤元素。

$("p") // 選取所有 <p> 元素
$("div") // 選取所有 <div> 元素

ID 選擇器 (ID Selector)

用法：透過元素的 ID 進行選取，ID 在頁面中必須唯一。

$("#header") // 選取 ID 為 'header' 的元素

類別選擇器 (Class Selector)

用法：選取具有特定類別的所有元素。

$(".active") // 選取所有 class 包含 'active' 的元素

屬性選擇器 (Attribute Selectors)

屬性選擇器可以根據 HTML 元素的屬性進行篩選，這在處理動態內容時非常實用。

選取特定屬性元素

$("input[type='text']") // 選取所有 type 屬性為 'text' 的 input 元素

選取屬性包含特定值的元素

$("a[href*='google']") // 選取 href 中包含 'google' 的所有連結

選取以特定值開頭或結尾的屬性

$("img[src^='https']") // 選取 src 以 'https' 開頭的圖片
$("a[href$='.pdf']") // 選取所有連結到 PDF 檔案的 <a> 元素

階層選擇器 (Hierarchy Selectors)

階層選擇器允許我們選取具有特定父子或兄弟關係的元素。

後代選擇器 (Descendant Selector)

$("ul li") // 選取所有 <ul> 中的 <li> 元素

直接子代選擇器 (Child Selector)

$("div > p") // 只選取 div 內直接子代的 <p> 元素

相鄰兄弟選擇器 (Adjacent Sibling Selector)

$("h2 + p") // 選取所有緊接著 <h2> 後的第一個 <p> 元素

過濾選擇器 (Filter Selectors)

過濾選擇器用於篩選已經選取的元素集合，例如選取第一個、最後一個、偶數或奇數元素等。

選取第一個與最後一個元素

$("li:first") // 選取第一個 <li> 元素
$("li:last") // 選取最後一個 <li> 元素

選取特定索引的元素

$("li:eq(2)") // 選取索引為 2 (第三個) 的 <li> 元素

選取偶數和奇數元素

$("li:even") // 選取所有索引為偶數的 <li> 元素 (從 0 開始算)
$("li:odd") // 選取所有索引為奇數的 <li> 元素

表單選擇器 (Form Selectors)

表單選擇器專門用於處理 <form> 元素中的各種表單控件，對於動態表單操作特別有幫助。

選取所有表單元素

$(":input") // 包含所有表單元素 (input, select, textarea, button)

特定類型的表單控件選擇器

$(":text") // 選取所有 type 為 'text' 的輸入框
$(":checkbox") // 選取所有的複選框 (checkbox)
$(":radio") // 選取所有的單選框 (radio)
$(":selected") // 選取所有被選中的 <option> 元素

結語

jQuery 選擇器功能強大且靈活，無論是簡單的元素選取，還是複雜的屬性與層級選擇，都能輕鬆應對。

掌握選擇器能讓你在操作 DOM 時事半功倍，也為後續的事件處理、動畫效果和資料處理打下堅實的基礎。

如果你是初學者，不妨多多練習各種選擇器的用法，將理論運用到實際項目中，才能真正熟練掌握 jQuery 的精髓。