Kuasai pelbagai jenis pemilih dan kegunaan dalam jQuery

jQuery ialah perpustakaan JavaScript popular yang memudahkan proses memanipulasi elemen HTML, pengendalian acara, kesan animasi dan Ajax pada halaman web. Apabila membangun dengan jQuery, adalah penting untuk membiasakan diri dengan pelbagai jenis pemilih dan kegunaannya. Pemilih ialah kaedah yang digunakan dalam jQuery untuk memilih elemen tertentu Anda boleh memilih elemen yang anda ingin kendalikan dengan tepat mengikut keperluan anda, dengan itu mencapai pembangunan yang lebih fleksibel.

1. Pemilih asas

1. Pemilih elemen: Pilih semua elemen yang ditentukan, sintaksnya ialah $("elemen"). Contohnya, $("p") memilih semua elemen perenggan. $("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")rrreee

🎜Pemilih ID🎜: Pilih elemen dengan id tertentu, sintaksnya ialah $("#id"). Contohnya, $("#myId") memilih elemen dengan id "myId". 🎜rrreee🎜🎜🎜🎜Pemilih kelas🎜: Pilih elemen kelas yang ditentukan, sintaksnya ialah $(".class"). Contohnya, $(".myClass") memilih elemen dengan kelas "myClass". 🎜rrreee🎜🎜🎜2. Pemilih hierarki🎜🎜🎜🎜🎜Pemilih keturunan🎜: Pilih unsur keturunan unsur yang ditentukan, sintaksnya ialah $("keturunan induk"). Contohnya, $("div p") memilih semua elemen perenggan dalam elemen div. 🎜rrreee🎜🎜🎜🎜Pemilih elemen kanak-kanak🎜: Pilih elemen anak langsung bagi elemen yang ditentukan, sintaksnya ialah $("parent > child"). Contohnya, $("ul > li") memilih elemen anak langsung li di bawah elemen ul. 🎜rrreee🎜🎜🎜🎜Elemen pertama🎜: Pilih elemen padanan pertama, sintaksnya ialah :first. Contohnya, $("li:first") memilih elemen li pertama. 🎜rrreee🎜🎜🎜🎜Elemen terakhir🎜: Pilih elemen padanan terakhir, sintaksnya ialah :last. Contohnya, $("li:last") memilih elemen li terakhir. 🎜rrreee🎜4. Pemilih kandungan 🎜🎜🎜🎜🎜Elemen yang mengandungi kandungan teks yang ditentukan🎜: Pilih elemen yang mengandungi kandungan teks tertentu, sintaksnya ialah :mengandungi(teks). Contohnya, $("p:contains('Hello')") memilih elemen perenggan yang mengandungi teks "Hello". 🎜rrreee🎜🎜🎜🎜Elemen kosong🎜: Pilih elemen kosong tanpa unsur anak, sintaksnya ialah :empty. Contohnya, $("div:empty") memilih elemen div kosong. 🎜rrreee🎜5. Pemilih status🎜🎜🎜🎜🎜Unsur yang boleh dilihat🎜: Pilih elemen yang boleh dilihat, sintaksnya ialah :visible. Contohnya, $("div:visible") memilih elemen div yang boleh dilihat. 🎜rrreee🎜🎜🎜🎜Elemen tersembunyi🎜: Pilih elemen tersembunyi, sintaksnya ialah :hidden. Contohnya, $("div:hidden") memilih elemen div tersembunyi. 🎜🎜🎜

Atas ialah kandungan terperinci Kuasai pelbagai jenis pemilih dan kegunaan dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!