Apakah jenis pemilih jquery?

Terdapat 4 jenis pemilih jquery, iaitu: 1. Pemilih asas, yang mencari elemen mengikut id, kelas, dll. 2. Pemilih hierarki, yang memperoleh elemen tertentu berdasarkan perhubungan hierarki; Pemilih termasuk penapisan kandungan, penapisan keterlihatan, penapisan atribut dan penapisan sub-elemen 4. Pemilih borang boleh mengembalikan koleksi elemen.

Sistem pengendalian untuk tutorial ini: Sistem Windows 10, versi jQuery 3.6.0, komputer Dell G3.

Terdapat empat pemilih dalam jQuery:

1 Pemilih asas

Pemilih asas ialah pilihan yang paling biasa digunakan dan paling mudah dalam jQuery Ia mencari. Elemen DOM melalui id elemen, kelas, nama teg, dsb.

1. ID pemilih #id

Penerangan: Padankan elemen berdasarkan id yang diberikan dan kembalikan satu elemen (Nota: Dalam halaman web, nama id tidak boleh diulang)

Contoh: $("#test") memilih elemen dengan id ujian

2 Pemilih kelas.kelas

Penerangan: Padankan elemen mengikut nama kelas yang diberikan dan kembalikan koleksi elemen

Contoh: $(".test") memilih semua elemen dengan ujian kelas

3. Elemen (label) elemen pemilih

Penerangan: Mengikut nama elemen yang diberikan Padankan elemen dan set elemen kembali

Contoh: $("p") memilih semua

$("div"): memilih semua tag div

4, *

Penerangan: Padankan semua elemen dan kembalikan set elemen

Contoh: $("*") memilih semua elemen

5, selector1, selector2,..., selectorN ( Union selector)

Penerangan: Cantumkan elemen yang dipadankan oleh setiap pemilih dan kembalikannya bersama-sama dan kembalikan set elemen gabungan

Contoh: $("p,span,p. myClass" ) memilih set elemen semua

, dan

tag yang kelasnya ialah myClass

2. Pemilih hierarki

pemilih mendapat elemen khusus berdasarkan perhubungan hierarki.

1. Pemilih keturunan

Contoh: $("p span") memilih semua elemen dalam

elemen terpilih yang ditentukan, sama ada anak atau cucu)

2 Pemilih anak $("ibu bapa>anak")

Contoh: $("p>span") Pilih semua (nota: pemilih anak hanya memilih elemen anak secara langsung)

3 Pemilih adik beradik $("sebelum+seterusnya")

Penerangan: Pilih elemen seterusnya sejurus selepas elemen PRev dan kembalikan set elemen

Contoh: $(".one+p") memilih adik beradik

dengan set Elemen kelas satu

4. Pemilih adik beradik $("prev~siblings")

Penerangan: Pilih semua elemen adik beradik selepas elemen sebelumnya dan kembalikan set elemen

Contoh: $ ("#two~p ") Pilih set semua elemen

adik beradik selepas elemen dengan id dua

3. Pemilih penapis

1> Pemilih penapisan asas

1. :Pertama

Penerangan: Pilih elemen pertama dan kembalikan satu elemen

Contoh: $("p:first") memilih semua

2. :last

Penerangan: Pilih elemen terakhir dan kembalikan satu elemen

Contoh: $("p: last") memilih

elemen antara semua

elemen

3 :not(selector)

Penerangan: Mengalih keluar semua elemen yang sepadan dengan pemilih yang diberikan, Kembalikan koleksi elemen

Contoh: $( "input:not(.myClass)") Pilih elemen yang kelasnya bukan myClass

4 :even

Penerangan : Pilih semua elemen yang indeksnya ialah nombor genap indeks bermula dari 0, kembalikan set elemen

5, :ganjil

Penerangan: Pilih semua elemen yang indeksnya ialah nombor ganjil, indeks bermula dari 0, kembalikan elemen Koleksi

6. :eq(index)

Penerangan: Pilih elemen yang indeksnya sama dengan indeks bermula dari 0 dan mengembalikan satu elemen

7 )

Penerangan: Pilih elemen dengan indeks lebih besar daripada indeks Indeks bermula dari 0 dan mengembalikan set elemen

8 :lt(index)

Penerangan: Pilih elemen dengan indeks kurang daripada Unsur indeks, indeks bermula dari 0, mengembalikan koleksi elemen

9, :fokus

Penerangan: Pilih elemen yang sedang menerima fokus

2> pemilih penapis

1. :contains(text)

Penerangan: Pilih elemen yang mengandungi teks dan kembalikan koleksi elemen

Contoh: $("p:contains('I ')") Pilih elemen yang mengandungi teks "I"

2. :empty

Penerangan: Pilih elemen kosong yang tidak mengandungi sub-elemen atau elemen teks, dan kembalikan koleksi elemen

Contoh: $ ("p:empty") Memilih

elemen kosong yang tidak mengandungi elemen anak atau elemen teks (

)

3 . :has(selector)

Penerangan: Pilih elemen yang mengandungi elemen yang dipadankan oleh pemilih dan kembalikan set elemen

Contoh: $("p:has(p)") memilih

elemen yang mengandungi elemen

(

)

4 elemen atau teks kanak-kanak dan kembalikan koleksi elemen

Contoh: $("p:parent") memilih

elemen yang mengandungi elemen anak atau elemen teks (

atau

text< / p>)

3> Pemilih penapis keterlihatan

1 :tersembunyi

Penerangan: Pilih semua elemen halimunan dan kembalikan koleksi elemen

2. kelihatan

Penerangan: Pilih semua elemen kelihatan dan kembalikan koleksi elemen

4> >Contoh: $("p[id]") Pilih elemen p dengan atribut id

2 [attribute=value]

Contoh: $("input[ name=text]" ) Pilih elemen input dengan atribut nama sama dengan teks

3 [attribute!=value]

Contoh: $("input[name!=text]") Pilih Elemen input dengan nama. atribut tidak sama dengan teks

4 [attribute^=value]

Contoh: $("input[name^=text]") Pilih atribut nama bermula dengan teks Elemen input <.>

5, [attribute$=value]

Contoh: $("input[name$=text]") memilih elemen input

yang mempunyai atribut nama yang berakhir dengan teks

6. [attribute*=value]

Contoh: $("input[name*=text]") Pilih elemen input dengan atribut nama yang mengandungi teks

7 value]

Contoh: $("input[class~=text]") Pilih elemen input yang mempunyai atribut kelas yang dipisahkan oleh ruang dan mengandungi teks dalam nilai

8, [attribute1 ] [attribute2][attributeN]

Penerangan: Cantumkan berbilang pemilih penapis atribut

5> Bentuk pemilih penapis atribut objek (kembali koleksi elemen)

1, :didayakan

Penerangan: Pilih semua elemen yang tersedia

2 :dilumpuhkan

Penerangan: Pilih semua elemen yang tidak tersedia

3 :ditanda

Penerangan: Pilih semua elemen yang dipilih (kotak radio, kotak semak)

Contoh: $("input:checked") Pilih semua elemen yang dipilih

4. :selected

Penerangan: Pilih semua elemen pilihan yang dipilih (senarai lungsur)

Contoh: $("select option:selected") Pilih semua elemen pilihan yang dipilih

4. mengembalikan koleksi elemen, penggunaan yang serupa)

1 :text

Penerangan: Pilih semua kotak teks satu baris

Contoh: $(":text ") memilih semua kotak teks satu baris

2.:kata laluan

Penerangan: memilih semua kotak kata laluan

3.:butang

Penerangan: Pilih semua butang

4 :kotak semak

Penerangan: Pilih semua kotak pilihan

Atas ialah kandungan terperinci Apakah jenis pemilih jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!