Menyelam Lebih Dalam ke dalam Penapis jQuery: Terokai elemen yang disertakan dalam fungsi penapis

jQuery ialah perpustakaan JavaScript yang sangat popular digunakan untuk memudahkan manipulasi DOM dan pengendalian acara. Dalam jQuery, penapis ialah ciri berkuasa yang membantu pembangun memilih elemen tertentu atau sekumpulan elemen. Artikel ini akan menyediakan analisis mendalam tentang penapis jQuery, memperincikan pelbagai jenis penapis dan cara menggunakannya, bersama-sama dengan contoh kod untuk membantu pembaca memahami dan menggunakan ciri ini dengan lebih baik.

1. Penapis asas

1.1 :first

:first

:first筛选器用于选择第一个匹配的元素。例如，以下代码将选择第一个<div>元素：<pre class='brush:javascript;toolbar:false;'>$(&quot;div:first&quot;)</pre><h4>1.2 <code>:last

:last筛选器用于选择最后一个匹配的元素。示例代码如下：

$("div:last")

1.3 :even和:odd

:even筛选器选择偶数位置的元素，而:odd筛选器选择奇数位置的元素。示例代码如下：

$("ul li:even")  // 选择<ul>下偶数位置的<li>元素
$("ul li:odd")   // 选择<ul>下奇数位置的<li>元素

2. 内容筛选器

2.1 :contains()

:contains()筛选器用于选择包含指定文本的元素。示例代码如下：

$("p:contains('Hello')")  // 选择包含文本“Hello”的<p>元素

2.2 :empty和:parent

:empty筛选器选择没有子元素的元素，而:parent筛选器选择至少有一个子元素的元素。示例代码如下：

$("div:empty")   // 选择空的<div>元素
$("div:parent")  // 选择有子元素的<div>元素

3. 可见性筛选器

3.1 :visible和:hidden

:visible筛选器选择可见的元素，而:hidden筛选器选择隐藏的元素。示例代码如下：

$(".menu:visible")    // 选择可见的菜单元素
$("form:hidden")      // 选择隐藏的表单元素

4. 表单筛选器

4.1 :input

:input筛选器选择所有的输入元素，包括input、select、textarea等。示例代码如下：

$("form :input")  // 选择表单中的所有输入元素

4.2 :checked和:selected

:checked筛选器选择被选中的复选框或单选按钮，:selected筛选器选择被选中的<option></option>:first penapis digunakan untuk memilih elemen padanan pertama. Sebagai contoh, kod berikut akan memilih elemen <div> yang pertama: <pre class='brush:javascript;toolbar:false;'>$(&quot;input:checked&quot;) // 选择被选中的输入框 $(&quot;option:selected&quot;) // 选择被选中的&lt;option&gt;元素</pre><h3>1.2 <code>:last :last penapis Pemilih memilih elemen padanan terakhir. Kod sampel adalah seperti berikut:

$.expr[':'].startsWith = function (element, index, match) {
    return $(element).text().trim().startsWith(match[3]);
};

$("ul li:startsWith('A')")  // 选择以“A”开头的<li>元素

1.3 :even dan :odd

:even menapis elemen terpilih pada genap kedudukan, manakala Penapis :odd memilih elemen dalam kedudukan ganjil. Kod sampel adalah seperti berikut:

rrreee

2 Penapis kandungan

🎜2.1 :contains()🎜:contains()Penapis digunakan untuk memilih. kandungan yang mengandungi elemen teks tertentu. Kod sampel adalah seperti berikut: 🎜rrreee🎜2.2 :empty dan :parent🎜:empty menapis elemen terpilih tanpa elemen anak , Penapis :parent memilih elemen yang mempunyai sekurang-kurangnya satu elemen anak. Kod sampel adalah seperti berikut: 🎜rrreee🎜3 Penapis kebolehlihatan 🎜🎜3.1 :kelihatan dan :tersembunyi🎜:kelihatan. penapis Penapis :hidden memilih elemen yang boleh dilihat, manakala penapis :hidden memilih elemen tersembunyi. Kod sampel adalah seperti berikut: 🎜rrreee🎜4 Penapis Borang 🎜🎜4.1 :input🎜:input penapis memilih semua elemen input, termasuk . input, select, textarea, dsb. Kod sampel adalah seperti berikut: 🎜rrreee🎜4.2 :checked dan :selected🎜:checked penapis memilih kotak pilihan yang ditandai atau butang radio, penapis :selected memilih elemen <option></option> yang dipilih. Kod sampel adalah seperti berikut: 🎜rrreee🎜5 Penapis tersuai🎜🎜Selain penapis terbina dalam, anda juga boleh menulis penapis tersuai. Berikut ialah contoh: 🎜rrreee🎜Kesimpulan🎜🎜Melalui pengenalan artikel ini, pembaca mempunyai pemahaman yang lebih mendalam tentang penapis jQuery. Penapis boleh membantu pembangun memilih elemen yang perlu dikendalikan dengan tepat dan meningkatkan kecekapan dan kebolehbacaan kod. Dalam pembangunan sebenar, adalah sangat penting untuk memilih penapis yang sesuai berdasarkan keperluan projek juga boleh ditulis untuk memenuhi keperluan tertentu. Saya harap artikel ini dapat membantu pembaca menguasai penggunaan penapis jQuery dengan lebih baik dan meningkatkan kemahiran pembangunan bahagian hadapan mereka. 🎜