Penjelasan menyeluruh tentang penapis jQuery: temui elemen mana yang ditapis-tutorial js-php.cn

Penjelasan menyeluruh tentang penapis jQuery: temui elemen mana yang ditapis

WBOY

Lepaskan： 2024-02-27 13:54:03

asal

513 orang telah melayarinya

Penjelasan menyeluruh tentang penapis jQuery: temui elemen mana yang ditapis

jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas dalam pembangunan web. Dalam jQuery, penapis ialah fungsi yang sangat biasa digunakan, yang boleh membantu pembangun menapis elemen yang perlu dikendalikan melalui pemilih, dengan itu mencapai kawalan berkesan terhadap elemen halaman. Artikel ini akan menerangkan secara menyeluruh fungsi penapis jQuery, terutamanya memperkenalkan cara menggunakan penapis untuk mengetahui elemen yang ditapis dan memberikan contoh kod khusus.

1. Penapis asas

:penapis pertama

Perkenalkan penapis yang biasa digunakan: :first. Penapis ini memilih elemen pertama yang sepadan. Penggunaan khusus adalah seperti berikut:

$("p:first").css("background-color", "yellow");

Salin selepas log masuk

Kod di atas akan memilih semua elemen perenggan (

) pada halaman dan menetapkan warna latar belakang elemen perenggan pertama kepada kuning.

:penapis terakhir

Bertentangan dengan :first, penapis :last digunakan untuk memilih elemen terakhir antara elemen yang sepadan. Kod sampel adalah seperti berikut:

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

Salin selepas log masuk

Kod ini akan memilih semua elemen perenggan pada halaman dan menetapkan warna teks elemen perenggan terakhir kepada merah.

:penapis genap dan :ganjil

:penapis genap dan :ganjil digunakan untuk memilih elemen pada kedudukan genap dan ganjil dalam elemen padanan masing-masing. Contohnya:

$("tr:even").css("background-color", "#f2f2f2");
$("tr:odd").css("background-color", "#e6e6e6");

Salin selepas log masuk

Kod di atas akan menetapkan warna latar belakang yang berbeza untuk baris genap dan ganjil dalam jadual.

2. Penapis kandungan

:mengandungi penapis

:mengandungi penapis boleh menapis elemen berdasarkan kandungan teks yang terkandung dalam elemen. Contohnya:

$("p:contains('jQuery')").css("font-weight", "bold");

Salin selepas log masuk

Kod ini akan memilih elemen perenggan yang mengandungi teks "jQuery" dan menjadikan teksnya tebal.

:kosong dan :bukan penapis

: Penapis kosong digunakan untuk memilih elemen yang tidak mempunyai unsur anak, manakala penapis :not digunakan untuk mengecualikan elemen yang sepadan dengan pemilih yang ditentukan. Contohnya:

$("div:empty").text("这个元素没有内容");
$("p:not(.intro)").css("color", "blue");

Salin selepas log masuk

Sekeping kod pertama akan memilih semua

elemen yang tiada unsur anak pada halaman dan menetapkan kandungan teksnya kepada "Unsur ini tiada kandungan". Sekeping kod kedua akan memilih semua elemen perenggan dengan kelas selain .intro dan menetapkan warna teksnya kepada biru.

3. Penapis perhubungan

:ibu bapa dan :mempunyai penapis

: Penapis induk digunakan untuk memilih elemen yang mengandungi elemen anak, manakala penapis :has digunakan untuk memilih elemen yang mengandungi elemen yang sepadan dengan pemilih yang ditentukan . Kod contoh adalah seperti berikut:

$("div:parent").css("border", "1px solid black");
$("ul:has(li.active)").css("background-color", "lightgrey");

Salin selepas log masuk

Kod di atas akan memilih semua

; elemen dengan elemen kelas aktif, menetapkan warna latar belakangnya kepada kelabu terang.

Melalui contoh di atas, kita dapat melihat fungsi berkuasa penapis jQuery dalam pembangunan web. Dengan menggunakan pelbagai penapis yang munasabah, pembangun boleh mencari elemen yang perlu dikendalikan dengan mudah dan memprosesnya dengan sewajarnya. Saya berharap pengenalan dalam artikel ini dapat membantu pembaca lebih memahami dan menggunakan fungsi penapis jQuery dan meningkatkan kecekapan pembangunan halaman web.

Atas ialah kandungan terperinci Penjelasan menyeluruh tentang penapis jQuery: temui elemen mana yang ditapis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!