Rumah  >  Artikel  >  hujung hadapan web  >  Apakah jenis pemilih jquery?

Apakah jenis pemilih jquery?

WBOY
WBOYasal
2022-05-10 14:52:575901semak imbas

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.

Apakah jenis pemilih jquery?

Persekitaran pengendalian tutorial ini: sistem windows10, versi jquery3.2.1, komputer Dell G3.

Apakah beberapa jenis pemilih jquery

1.Pemilih asas

Pemilih asas adalah yang paling biasa digunakan dan paling mudah dalam Pemilih jQuery, yang 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 berulang )

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

2. Class selector.class

Penerangan: Mengikut kepada Nama kelas yang diberikan sepadan dengan elemen dan mengembalikan set elemen

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

3. Pemilih elemen (label) elemen

Penerangan: Padankan elemen berdasarkan nama elemen yang diberikan dan kembalikan koleksi elemen

Contoh: $("p") memilih semua

"): Pilih semua tag div

4, *

Penerangan: Padankan semua elemen dan kembalikan set elemen

Contoh: $("* ") Pilih semua elemen

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

Penerangan: Padankan setiap pemilih dengan Elemen digabungkan dan dikembalikan bersama-sama, mengembalikan set elemen gabungan

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

, dan< yang kelasnya ialah myClass ;p> 🎜>

2. Pemilih hierarki

Pemilih hierarki memperoleh elemen khusus berdasarkan perhubungan hierarki.

1. Pemilih keturunan

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

pemilih memilih semua elemen terpilih yang ditentukan bagi elemen induk, sama ada ia adalah anak atau cucu)

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

Contoh: $("p>span") memilih semua elemen di bawah elemen

Pemilih rakan sebaya $("prev next")

Penerangan: Pilih elemen seterusnya sejurus selepas elemen sebelumnya dan kembalikan set elemenContoh: $(". one p") memilih

set elemen adik beradik seterusnya

dengan kelas satu : Pilih semua elemen adik beradik selepas elemen sebelumnya dan kembalikan set elemen

Contoh: $("#two~ p") memilih semua

set elemen adik beradik

3. Pemilih penapis

1>Pemilih penapis asas

1. :firstPenerangan: Pilih elemen pertama, mengembalikan satu elemen

Contoh: $("p:first") memilih < elemen p> antara semua

elemen 2 :last

Penerangan: Pilih elemen terakhir dan kembalikan satu elemen

Contoh: $("p: last") memilih elemen

terakhir antara semua

elemen

3. :not(selector)

Penerangan: Alih keluar semua elemen yang sepadan dengan pemilih yang diberikan dan kembalikan elemen set

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

yang kelasnya bukan myClass. :even

Penerangan: Pilih semua elemen yang indeksnya ialah nombor genap Indeks bermula dari 0 dan mengembalikan set elemen

5 :ganjil

Penerangan: Pilih semua elemen yang indeksnya ialah nombor ganjil. Indeks bermula dari 0 dan mengembalikan set elemen

6 :eq(index)

Penerangan: Pilih elemen yang indeksnya sama dengan indeks elemen

7. :gt(index)

Penerangan: Memilih elemen yang indeksnya lebih besar daripada indeks bermula dari 0 dan mengembalikan elemen

8 . :lt(index)

Penerangan: Pilih elemen yang indeksnya kurang daripada indeks Penerangan: Pilih elemen yang sedang difokuskan

2> teks "I" dan kembalikan koleksi elemen

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

2 🎜>

Penerangan: Pilih elemen kosong yang tidak mengandungi elemen anak atau elemen teks, dan kembalikan set elemen

Contoh: $("p:empty") memilih elemen yang tidak mengandungi elemen anak atau elemen teks Kosongkan

elemen (

)

3

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

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

; Elemen elemen (

)

4 :induk

Penerangan: Pilih elemen yang mengandungi elemen anak atau teks dan kembalikan koleksi. daripada elemen

Contoh: $("p:parent") memilih

elemen yang mengandungi elemen anak atau elemen teks (

atau < p>teks< ;/p>)

3>Pemilih penapis keterlihatan

1 :tersembunyi

Penerangan: Pilih semua elemen halimunan dan kembalikan Elemen koleksi

2, :visible

Penerangan: Pilih semua elemen kelihatan dan kembalikan koleksi elemen

4>

1. [atribut]

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 atribut nama yang tidak sama dengan teks

4, [attribute^=value]

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

5, [attribute$=value]

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

6 [attribute*=value]

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

7, [attribute~=value]

Contoh: $("input[class~=text]") memilih nilai yang diasingkan ruang dengan atribut kelas yang mengandungi teks elemen input

8, [attribute1][attribute2][attributeN]

Penerangan: Cantumkan berbilang pemilih penapis atribut

5> mengembalikan koleksi elemen)

1, :enabled

Penerangan: Pilih semua elemen yang tersedia

2, :disabled

Penerangan: Pilih Semua elemen yang tidak tersedia

3.:checked

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

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

4 :selected

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

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

4. Pemilih borang (mengembalikan koleksi elemen, penggunaan yang serupa)

1. :text

Penerangan: Pilih semua kotak teks satu baris

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

2 :kata laluan

Penerangan: Pilih semua kotak kata laluan

3 :butang

Penerangan: Pilih semua butang

4. :checkbox

Penerangan: Pilih semua kotak berbilang semak

Tutorial video berkaitan yang disyorkan:

tutorial video jQuery

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn