jQuery 選擇器 (Selectors)

選擇器是 jQuery 的核心功能，讓你能夠輕鬆地選取 DOM 元素。jQuery 選擇器語法與 CSS 選擇器幾乎相同，如果你熟悉 CSS，學習 jQuery 選擇器會非常快速。

基本選擇器

元素選擇器

選取所有指定的 HTML 標籤元素：

$('p'); // 所有 <p> 元素
$('div'); // 所有 <div> 元素
$('input'); // 所有 <input> 元素

ID 選擇器

選取特定 ID 的元素（ID 在頁面中應該是唯一的）：

$('#header'); // id="header" 的元素
$('#main-nav'); // id="main-nav" 的元素

Class 選擇器

選取所有具有指定 class 的元素：

$('.active'); // 所有 class="active" 的元素
$('.btn'); // 所有 class="btn" 的元素
$('.error.show'); // 同時具有 error 和 show 兩個 class 的元素

萬用選擇器

選取所有元素：

$('*'); // 頁面中所有元素
$('#container *'); // #container 內的所有元素

群組選擇器

同時選取多種元素：

$('h1, h2, h3'); // 所有 h1、h2、h3 元素
$('.btn, .link, #submit'); // 多種選擇器組合

階層選擇器

後代選擇器

選取某元素內部所有符合條件的後代元素：

$('div p'); // div 內的所有 p 元素（包含巢狀）
$('#content a'); // #content 內的所有連結
$('ul li'); // ul 內的所有 li 元素

子元素選擇器

只選取直接子元素，不包含更深層的後代：

$('ul > li'); // ul 的直接子 li 元素
$('#nav > .menu-item'); // #nav 的直接子元素中 class 為 menu-item 的

相鄰兄弟選擇器

選取緊接在某元素後面的兄弟元素：

$('h1 + p'); // 緊接在 h1 後面的 p 元素
$('.title + .content'); // 緊接在 .title 後面的 .content

一般兄弟選擇器

選取某元素後面所有符合條件的兄弟元素：

$('h1 ~ p'); // h1 後面所有的 p 兄弟元素

屬性選擇器

根據元素的屬性來選取：

// 具有某屬性
$('[href]'); // 所有具有 href 屬性的元素
$('[data-id]'); // 所有具有 data-id 屬性的元素

// 屬性等於特定值
$('[type="text"]'); // type 屬性等於 "text"
$('[name="email"]'); // name 屬性等於 "email"

// 屬性開頭匹配
$('[href^="https"]'); // href 以 "https" 開頭
$('[class^="btn-"]'); // class 以 "btn-" 開頭

// 屬性結尾匹配
$('[href$=".pdf"]'); // href 以 ".pdf" 結尾
$('[src$=".jpg"]'); // src 以 ".jpg" 結尾

// 屬性包含匹配
$('[href*="google"]'); // href 包含 "google"
$('[class*="active"]'); // class 包含 "active"

// 屬性不等於
$('[type!="submit"]'); // type 不等於 "submit"（jQuery 擴充）

// 組合多個屬性條件
$('input[type="text"][name="username"]');

過濾選擇器

jQuery 提供許多方便的過濾選擇器：

位置過濾

$('li:first'); // 第一個 li 元素
$('li:last'); // 最後一個 li 元素
$('tr:even'); // 偶數列（索引 0, 2, 4...）
$('tr:odd'); // 奇數列（索引 1, 3, 5...）
$('li:eq(2)'); // 第三個 li（索引從 0 開始）
$('li:gt(2)'); // 索引大於 2 的 li
$('li:lt(2)'); // 索引小於 2 的 li

CSS 標準位置選擇器

$('li:first-child'); // 父元素的第一個 li 子元素
$('li:last-child'); // 父元素的最後一個 li 子元素
$('li:nth-child(3)'); // 父元素的第 3 個 li（從 1 開始）
$('li:nth-child(odd)'); // 奇數位置的 li
$('li:nth-child(even)'); // 偶數位置的 li
$('li:nth-child(3n)'); // 每 3 個 li
$('li:only-child'); // 唯一子元素的 li

:first vs :first-child 的差異

<ul>
  <li>項目 1</li>
  <li>項目 2</li>
</ul>
<ul>
  <li>項目 A</li>
  <li>項目 B</li>
</ul>

$('li:first'); // 只選取「項目 1」（整個文件第一個 li）
$('li:first-child'); // 選取「項目 1」和「項目 A」（各自父元素的第一個 li）

內容過濾

$('div:contains("Hello")'); // 內容包含 "Hello" 的 div
$('td:empty'); // 沒有任何內容的 td
$('td:parent'); // 有內容的 td（與 :empty 相反）
$('div:has(p)'); // 包含 p 元素的 div

可見性過濾

$('div:visible'); // 可見的 div
$('div:hidden'); // 隱藏的 div

隱藏的元素包括：

• display: none
• type="hidden" 的 input
• 寬高為 0 的元素
• 隱藏的祖先元素的後代

否定過濾

$('input:not(:checked)'); // 未勾選的 input
$('li:not(.active)'); // 沒有 active class 的 li
$('p:not(:first)'); // 除了第一個以外的 p

表單選擇器

jQuery 提供方便的表單相關選擇器：

表單元素類型

$(':input'); // 所有表單元素（input, textarea, select, button）
$(':text'); // type="text" 的 input
$(':password'); // type="password" 的 input
$(':checkbox'); // type="checkbox" 的 input
$(':radio'); // type="radio" 的 input
$(':submit'); // type="submit" 的 input 或 button
$(':reset'); // type="reset" 的 input
$(':button'); // type="button" 的 input 或 button 元素
$(':file'); // type="file" 的 input
$(':image'); // type="image" 的 input

表單狀態

$(':enabled'); // 可用的表單元素
$(':disabled'); // 停用的表單元素
$(':checked'); // 已勾選的 checkbox 或 radio
$(':selected'); // 已選取的 option
$(':focus'); // 目前獲得焦點的元素

範例：取得所有已勾選的 checkbox 值

$(':checkbox:checked').each(function () {
  console.log($(this).val());
});

選擇器效能建議

1. 優先使用 ID 選擇器

   // 好
   $('#content');
   // 避免
   $('div#content');
   

2. 縮小搜尋範圍

   // 好 - 在特定範圍內搜尋
   $('#content').find('.item');
   // 或
   $('.item', '#content');
   
   // 較慢 - 搜尋整個文件
   $('#content .item');
   

3. 快取選擇結果

   // 好 - 快取 jQuery 物件
   var $items = $('.item');
   $items.addClass('active');
   $items.show();
   
   // 避免 - 重複選取
   $('.item').addClass('active');
   $('.item').show();
   

4. 避免過度使用萬用選擇器

   // 避免
   $('*');
   $('.container > *');
   

5. 使用原生選擇器

   // 較快 - CSS 標準選擇器
   $('div.active');
   
   // 較慢 - jQuery 專有選擇器
   $('div:has(.active)');
   

小結

• jQuery 選擇器語法與 CSS 選擇器相容
• ID 選擇器 (#id) 效能最佳
• 階層選擇器可以精確定位元素
• 屬性選擇器支援多種匹配模式
• 過濾選擇器可以進一步篩選元素
• 表單選擇器讓表單操作更方便
• 注意選擇器效能，善用快取