Fahami penggunaan pelbagai jenis pemilih dalam jQuery

Selector ialah konsep yang sangat penting dalam jQuery, ia boleh membantu kami mencari dan mengendalikan elemen pada halaman dengan tepat. Artikel ini akan memperkenalkan penggunaan pelbagai jenis pemilih dalam jQuery, termasuk pemilih asas, pemilih hierarki, pemilih penapis dan pemilih atribut, dan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik dan menguasai penggunaan pemilih ini.

1. Pemilih Asas

Pemilih asas ialah salah satu pemilih yang paling biasa digunakan. Ia boleh memilih elemen mengikut nama elemen, nama kelas atau ID. Berikut ialah beberapa contoh kod untuk beberapa pemilih asas:

1. Pilih semua elemen <div>: <code><div>元素：<pre class='brush:javascript;toolbar:false;'>$('div')</pre><li> <p>选择类名为<code>example的元素：

   $('.example')

2. 选择ID为my-element的元素：

   $('#my-element')

二、层次选择器

层次选择器可以根据元素之间的关系来选择元素，包括子元素、后代元素、相邻元素和兄弟元素。以下是几个层次选择器的示例代码：

1. 选择父元素下的所有子元素：

   $('parent > child')

2. 选择祖先元素下的所有后代元素：

   $('ancestor descendant')

3. 选择相邻元素：

   $('element + next')

4. 选择所有兄弟元素：

   $('element ~ siblings')

三、过滤选择器

过滤选择器可以根据元素的状态或位置来选择元素，包括可见元素、隐藏元素、第一个元素、最后一个元素等。以下是几个常用的过滤选择器示例代码：

1. 选择所有可见元素：

   $(':visible')

2. 选择所有隐藏元素：

   $(':hidden')

3. 选择第一个元素：

   $('element:first')

4. 选择最后一个元素：

   $('element:last')

四、属性选择器

属性选择器可以根据元素的属性来选择元素，包括属性存在、属性值等于某个值、属性值以某个字符串开头等。以下是几个属性选择器的示例代码：

1. 选择具有title属性的元素：

   $('[title]')

2. 选择href属性值以https开头的元素：

   $('[href^="https"]')

3. 选择class属性值包含example

   $('[class*="example"]')

Pilih elemen dengan nama kelas contoh:

rrreee

🎜🎜Pilih elemen dengan ID elemen saya: 🎜rrreee🎜🎜🎜 2. Pemilih hierarki 🎜🎜Pemilih hierarki boleh memilih elemen berdasarkan perhubungan antara elemen, termasuk sub-elemen , unsur keturunan, unsur bersebelahan dan unsur adik beradik. Berikut ialah kod contoh untuk beberapa pemilih hierarki: 🎜🎜🎜🎜 Pilih semua elemen anak di bawah elemen induk: 🎜rrreee 🎜🎜🎜 Pilih semua unsur keturunan di bawah elemen moyang: 🎜rrreee🎜🎜🎜 Pilih elemen bersebelahan: Pilih semua elemen adik-beradik: 🎜rrreee🎜🎜🎜 3. Pemilih penapis 🎜🎜Pemilih penapis boleh memilih elemen berdasarkan status atau kedudukannya, termasuk elemen kelihatan, elemen tersembunyi, elemen pertama, elemen terakhir, dsb. Berikut ialah beberapa kod sampel pemilih penapis yang biasa digunakan: 🎜🎜🎜🎜 Pilih semua elemen yang boleh dilihat: 🎜rrreee🎜🎜🎜 Pilih semua elemen tersembunyi: 🎜rrreee🎜🎜🎜 Pilih elemen pertama: 🎜rrreee🜎🎜 Pilih elemen yang terakhir: 🎜rrreee🜎🎜 🎜rrreee🎜🎜🎜 4. Pemilih atribut 🎜🎜Pemilih atribut boleh memilih elemen berdasarkan atributnya, termasuk kewujudan atribut, nilai atribut bersamaan dengan nilai tertentu, nilai atribut bermula dengan rentetan tertentu, dsb. Berikut ialah kod contoh untuk beberapa pemilih atribut: 🎜🎜🎜🎜Pilih elemen dengan atribut title: 🎜rrreee🎜🎜🎜Pilih nilai atribut href dengan https Elements bermula dengan : 🎜rrreee🎜🎜🎜 Pilih elemen yang nilai atribut classnya mengandungi example: 🎜rrreee🎜🎜🎜Melalui contoh kod di atas, pembaca boleh Memahami dengan lebih baik dan kuasai penggunaan pelbagai jenis pemilih dalam jQuery. Pemilih adalah bahagian yang sangat penting dalam jQuery Menguasai penggunaan pemilih boleh membantu kami mengendalikan elemen pada halaman dengan lebih cekap dan mencapai pelbagai kesan dan fungsi interaktif. Saya harap artikel ini bermanfaat kepada pembaca, terima kasih kerana membaca! 🎜