jQuery篩選器全面解讀：發現哪些元素被篩選

jQuery是一款受歡迎的JavaScript庫，被廣泛應用於網頁開發中。在jQuery中，篩選器是一種非常常用的功能，它可以幫助開發者透過選擇器來篩選出需要操作的元素，從而實現對頁面元素的有效控制。本文將全面解讀jQuery的篩選器功能，主要介紹如何使用篩選器來發現哪些元素被篩選，並給出具體的程式碼範例。

一、基本的篩選器

1. :first篩選器

首先介紹常用的篩選器：:first。這個篩選器可以選擇符合的元素中的第一個元素。具體使用方法如下：

$("p:first").css("background-color", "yellow");

上述程式碼會選擇頁面中所有的段落元素（

），並將第一個段落元素的背景色設為黃色。

2. :last篩選器

與:first相反，:last篩選器用來選擇符合的元素中的最後一個元素。範例程式碼如下：

$("p:last").css("color", "red");

這段程式碼會選取頁面中的所有段落元素，並將最後一個段落元素的文字顏色設為紅色。

3. :even和:odd篩選器

:even和:odd篩選器分別用來選擇符合元素中的偶數和奇數位置的元素。例如：

$("tr:even").css("background-color", "#f2f2f2");
$("tr:odd").css("background-color", "#e6e6e6");

上面的程式碼會為表格中的偶數行和奇數行設定不同的背景顏色。

二、內容篩選器

4. :contains篩選器

:contains篩選器可以根據元素中包含的文字內容來篩選元素。例如：

$("p:contains('jQuery')").css("font-weight", "bold");

這段程式碼會選取包含「jQuery」文字的段落元素，並將它們的文字加粗顯示。

5. :empty和:not篩選器

:empty篩選器用來選擇沒有子元素的元素，而:not篩選器則用來排除指定選擇器匹配的元素。例如：

$("div:empty").text("这个元素没有内容");
$("p:not(.intro)").css("color", "blue");

第一段程式碼會選取頁面中所有沒有子元素的

$("div:parent").css("border", "1px solid black");
$("ul:has(li.active)").css("background-color", "lightgrey");