掌握jQuery中各種選擇器種類及用途

jQuery是一款受歡迎的JavaScript函式庫，它簡化了在網頁上操作HTML元素、事件處理、動畫效果和Ajax等操作的過程。在使用jQuery進行開發時，熟練各種選擇器種類及其用途是至關重要的。選擇器是jQuery中用來選取指定元素的方法，可依需求精準選擇想要操作的元素，從而實現更靈活的開發。

1. 基礎選擇器

1. 元素選擇器：選擇所有指定元素，語法為$("element")。例如，$("p")選取所有段落元素。

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

   登入後複製

2. ID選擇器：選擇特定id的元素，語法為$("#id")。例如，$("#myId")選取id為"myId"的元素。

   $("#myId").hide();

   登入後複製

3. 類別選擇器：選擇指定類別的元素，語法為$(".class")。例如，$(".myClass")選取類別為"myClass"的元素。

   $(".myClass").fadeIn();

   登入後複製

2. 層級選擇器

1. #後位選擇器：選擇指定元素的子代元素，語法為$("parent descendant")。例如，$("div p")選取所有div元素內的段落元素。

   $("div p").addClass("highlight");

   登入後複製

2. 子元素選擇器：選擇指定元素的直接子元素，語法為$("parent > child")。例如，$("ul > li")選取ul元素下的直接子元素li。

   $("ul > li").hover(function(){
    $(this).toggleClass("hover");
   });
   
   ### 3. 过滤选择器

   登入後複製

3. 第一個元素：選擇第一個符合的元素，語法為:first。例如，$("li:first")選取第一個li元素。

   $("li:first").css("font-weight", "bold");

   登入後複製

4. 最後一個元素：選擇最後一個符合的元素，語法為:last。例如，$("li:last")選取最後一個li元素。

   $("li:last").css("color", "blue");

   登入後複製

   4. 內容選擇器

5. 包含指定文字內容的元素：選擇包含指定文字內容的元素，語法為 :contains(text)。例如，$("p:contains('Hello')")選取包含文字"Hello"的段落元素。

   $("p:contains('Hello')").addClass("highlight");

   登入後複製

6. 空元素：選擇沒有子元素的空元素，語法為:empty。例如，$("div:empty")選取空的div元素。

   $("div:empty").text("This div is empty");

   登入後複製

   5. 狀態選擇器

7. 可見元素：選擇可見的元素，語法為:visible。例如，$("div:visible")選取可見的div元素。

   $("div:visible").fadeOut();

   登入後複製

8. 隱藏元素：選擇被隱藏的元素，語法為:hidden。例如，$("div:hidden")選取隱藏的div元素。

以上是掌握jQuery中各種選擇器種類及用途的詳細內容。更多資訊請關注PHP中文網其他相關文章！