探索jQuery篩選器的奧秘：揭示包含哪些功能

jQuery是一個受歡迎的JavaScript函式庫，用來簡化DOM運算和事件處理。在jQuery中，篩選器是一種強大的工具，可以幫助開發者精確選擇頁面上需要操作的元素。本文將探索jQuery篩選器的奧秘，揭示其包含的功能，並提供具體的程式碼範例。

一、基本篩選器

1. :first：選擇第一個符合的元素

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

   登入後複製

2. :last：選擇最後一個符合的元素

   $("p:last").css("font-weight", "bold");

   登入後複製

3. #:even / :odd：選擇偶數或奇數位置的元素

   $("tr:even").css("background-color", "lightgray");
   $("tr:odd").css("background-color", "lightblue");

   登入後複製

4. :eq()：選擇指定索引位置的元素

   $("li:eq(2)").css("text-decoration", "underline");

   登入後複製

5. :gt() / :lt()：選擇大於或小於指定索引位置的元素

   $("div:gt(3)").hide();
   $("div:lt(2)").show();

   登入後複製

#二、內容篩選器

1. ## :contains()：選擇包含指定文字的元素

   $("div:contains('jQuery')").css("color", "green");

   登入後複製

2. #:empty：選擇沒有子元素的元素

   $("p:empty").text("这是一个空段落");

   登入後複製

3. #:has()：選擇包含特定子元素的元素

   $("ul:has(li)").css("border", "1px solid black");

   登入後複製

1. :visible / :hidden：選擇可見或隱藏的元素

   $("div:hidden").show();
   $("div:visible").hide();

   登入後複製

2. :animated：選擇目前正在執行動畫效果的元素

   $("div:animated").stop();

   登入後複製

1. #[attribute]：選擇具有指定屬性的元素

   $("[href]").css("color", "blue");

   登入後複製

2. [attribute=value]：選擇屬性值等於指定值的元素

   $("[type='text']").css("border", "1px solid gray");

   登入後複製

3. ##[attribute! =value]

   ：選擇屬性值不等於指定值的元素

   $("[href!='#']").css("text-decoration", "underline");

   登入後複製
#透過使用這些不同類型的篩選器，開發者可以更靈活地操作頁面上的元素，實現各種動態效果和互動功能。 jQuery篩選器的強大功能和簡潔語法是其受歡迎的原因之一，也為開發者提供了極大的便利性和效率性。