Contoh dalam artikel ini menerangkan penggunaan pemilih penapis jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:
Dalam amalan, pemilih penapis boleh ditambah pada pemilih asas untuk menyelesaikan tugasan pertanyaan Bergantung pada situasi tertentu, nilai indeks, kandungan, atribut, kedudukan sub-elemen dan bentuk elemen boleh digunakan dalam. pemilih penapis
Atribut domain dan keterlihatan sebagai keadaan penapis
1 :pemilih pertama
Format:
$("selector: first")
digunakan Tapis koleksi jQuery semasa dan pilih elemen padanan pertama
Contoh:
$("td:first").css ("sempadan ", "2px biru pepejal");
2 :pemilih terakhir
Format:
$("selector: last")
digunakan Tapis koleksi jQuery semasa dan pilih elemen padanan terakhir
Contoh:
$("td:last").css("border "," 2px biru pepejal");
3. :pemilih ganjil
Format:
$("selector: ganjil")
digunakan Pilih semua elemen dengan indeks ganjil (mengira dari 0)
Contoh:
$("td:odd").css ("latar belakang ", "merah");
4. :pemilih genap
Format:
$("selector: even")
digunakan Pilih semua elemen dengan indeks genap (mengira dari 0)
Contoh:
$("td:even").css ("latar belakang ", "merah");
5. :eq pemilih
Format:
$("selector:eq(index)" )
Digunakan untuk memilih elemen yang indeksnya sama dengan nilai yang diberikan daripada set yang dipadankan
Contoh:
$("li:eq(1)" ).css ("warna", "biru");
6. :gt pemilih
Format:
$("selector:gt(index)" )
Digunakan untuk memilih semua elemen daripada set yang dipadankan dengan indeks yang lebih besar daripada nilai yang diberikan
Contoh:
$("li:gt(0)" ).css ("warna", "hijau");
7. :lt pemilih
Format:
$("selector:lt(index)" )
Digunakan untuk memilih semua elemen daripada set yang dipadankan dengan indeks yang lebih besar daripada nilai yang diberikan
Contoh:
$("li:lt(5)" ).css ("warna", "hijau");
Untuk mencari semua elemen dengan indeks lebih besar daripada n1 dan kurang daripada n2, anda boleh menggunakan pemilih tatasusunan,
$("selector:gt(n1), selector:lt(n2 )") ;
8 :bukan pemilih
Format:
$("selector1:not(selector2)" )
Digunakan untuk mengalih keluar semua elemen yang sepadan dengan pemilih yang diberikan daripada set yang dipadankan
Contoh:
$("td:not(:first, :last) ").css("background", "red"); //Kecuali sel pertama dan terakhir, warna latar belakang sel lain ialah merah
9. :pemilih pengepala
Format:
$(":header")
untuk pemilihan Semua elemen tajuk seperti h1, h2, h3
10. :pemilih animasi
Format:
$("selector:animated")
digunakan Pilih semua elemen yang menjalankan animasi
Contoh mudah: