Pandangan yang komprehensif di pemilih jQuery

Artikel ini mendapat manfaat daripada kajian rakan sebaya oleh Matt Smith dan Tim Severien. Terima kasih kepada pengulas rakan sebaya SitePoint untuk meningkatkan kualiti kandungan!

Memilih Elemen adalah asas untuk memanipulasi laman web dengan jQuery. Sama ada anda mengubahsuai kandungan, melampirkan peristiwa, atau melakukan tindakan lain, anda perlu menyasarkan unsur -unsur yang betul terlebih dahulu. Tutorial ini meneroka pemilih jQuery, komponen utama perpustakaan.

Konsep Utama

pemilih jQuery adalah penting untuk mensasarkan elemen halaman web untuk manipulasi kandungan, lampiran acara, dan banyak lagi. Pemilih ini menggunakan kriteria seperti ID, kelas, atribut, atau gabungannya.
JQuery menyediakan pelbagai pemilih, termasuk asas, berasaskan indeks, kanak-kanak, atribut, kandungan, hierarki, bentuk, dan pemilih penglihatan. Setiap jenis menawarkan keupayaan pemilihan yang unik berdasarkan keadaan dan parameter tertentu.
Peningkatan dalam jQuery 3 dengan ketara meningkatkan kelajuan pemilih tersuai seperti
• dan :visible (sehingga 17x lebih cepat dalam beberapa kes). Keterlihatan kini ditentukan oleh kehadiran kotak susun atur dari :hidden. getClientRects
Caching Elements terpilih meningkatkan prestasi, terutamanya dengan banyak pemilih. Menyimpan pilihan dalam pembolehubah mengurangkan imbasan DOM yang berlebihan.
Walaupun banyak pemilih jQuery mencerminkan pemilih CSS, jQuery juga termasuk pemilih tersuai sendiri untuk pemilihan elemen yang ringkas dan cekap.

pemilih jQuery secara terperinci

pemilih jQuery terutamanya mengenal pasti unsur -unsur berdasarkan kriteria seperti ID, kelas, atribut, atau kombinasi. Ramai berdasarkan pemilih CSS, tetapi jQuery memanjangkan fungsi dengan pemilih tersuai.

Pemilih Asas

Pilih Elements oleh ID (

), kelas ($("#id")), atau nama tag ($(".class")). Gabungkan ini (mis., $("li")) atau gunakan pemilih berganda yang dipisahkan oleh koma (mis., ). $(".class tag") $("selectorA, selectorB, selectorC") Pemilih asas tambahan:

: Memilih semua tajuk (

to
• ). Lebih ringkas daripada menyenaraikan secara individu setiap tag tajuk. :header <h1></h1> <h6></h6>: Memilih elemen yang ID sepadan dengan pengenalpastian serpihan URL (mis.,
).
• :target https://example.com/#myElement: Memilih elemen yang sedang menjalani animasi (memerlukan modul kesan jQuery).
• :animated pemilih berasaskan indeks

JQuery menawarkan pemilih indeks berasaskan sifar:

• :eq(n): Memilih elemen pada indeks n (menyokong indeks positif dan negatif).
• :lt(n): Memilih elemen dengan indeks kurang daripada n.
• :gt(n): Memilih elemen dengan indeks lebih besar daripada atau sama dengan n.
• :first: Memilih elemen yang dipadankan pertama.
• :last: Memilih elemen yang dipadankan terakhir.
• :even: Memilih elemen dengan indeks walaupun (0, 2, 4 ...).
• :odd: Memilih elemen dengan indeks ganjil (1, 3, 5 ...).

demo interaktif mempamerkan pemilih berasaskan indeks

pemilih kanak -kanak

pemilih ini mensasarkan kanak -kanak berdasarkan indeks atau jenis:

• : Memilih anak pertama setiap ibu bapa. :first-child
• : Memilih adik pertama jenisnya. :first-of-type
• : Memilih anak terakhir setiap ibu bapa. :last-child
• : Memilih adik -beradik terakhir jenisnya. :last-of-type
• : Memilih anak n (menyokong pelbagai ungkapan seperti nombor, :nth-child(n), even, formula). odd
• : Sama seperti :nth-last-child(n), tetapi dikira dari anak terakhir. :nth-child
• : Memilih saudara nth jenisnya. :nth-of-type(n)
• : Sama seperti :nth-last-of-type(n), tetapi dikira dari saudara terakhir. :nth-of-type
• : Memilih elemen yang merupakan satu -satunya anak ibu bapa mereka. :only-child
• : Memilih elemen tanpa adik -beradik jenis yang sama. :only-of-type

demo interaktif mempamerkan pemilih kanak -kanak

Pemilih atribut

pilih elemen berdasarkan nilai atribut:

• : Memilih elemen dengan nilai atribut yang tepat. [attribute="value"]
• : Memilih unsur -unsur yang nilai atributnya bermula dengan "nilai". [attribute^="value"]
• : Memilih elemen yang nilai atributnya berakhir dengan "nilai". [attribute$="value"]
• : Memilih elemen yang nilai atributnya mengandungi "nilai". [attribute*="value"]
• : Memilih unsur -unsur yang nilai atributnya sama dengan atau bermula dengan "nilai" diikuti dengan tanda hubung. [attribute|="value"]
• : Memilih unsur-unsur yang nilai atributnya mengandungi "nilai" sebagai perkataan yang dipisahkan ruang. [attribute~="value"]
• : Memilih elemen tanpa atribut atau dengan nilai yang berbeza. [attribute!="value"]
• : Memilih elemen dengan atribut yang ditentukan, tanpa mengira nilai. [attribute]

pemilih kandungan

pemilih ini menargetkan elemen berdasarkan kandungan mereka:

• :contains(text): Memilih elemen yang mengandungi teks yang ditentukan (sensitif kes).
• :has(selector): Memilih elemen yang mengandungi sekurang -kurangnya satu elemen yang sepadan dengan pemilih yang disediakan.
• :empty: Memilih elemen tanpa anak.
• :parent: Memilih elemen dengan sekurang -kurangnya satu anak.

pemilih hierarki

Pemilih ini menggunakan hierarki DOM:

• ancestor descendant: Memilih semua keturunan elemen nenek moyang.
• parent > child: Memilih anak -anak langsung elemen induk.
• prev next: Memilih adik -beradik seterusnya prev elemen.
• prev ~ siblings: Memilih semua adik beradik berikutnya prev elemen.

Borang pemilih

pemilih yang dipermudahkan untuk elemen borang:

• :button: Memilih elemen butang.
• :checkbox: Memilih elemen kotak semak.
• :radio: Memilih elemen butang radio.
• :text: Memilih elemen input teks.
• :password: Memilih elemen input kata laluan.
• :submit: Memilih elemen butang hantar.
• :reset: Memilih elemen butang reset.
• :image: Memilih elemen butang imej.
• :file: Memilih elemen input fail.
• :hidden: Memilih elemen bentuk tersembunyi.
• :enabled: Memilih elemen borang yang diaktifkan.
• :disabled: Memilih elemen bentuk dilumpuhkan.
• :checked: Memilih kotak semak dan butang radio yang diperiksa, dan pilihan yang dipilih.
• :selected: Memilih pilihan yang dipilih dalam <select></select> elemen.

pemilih penglihatan

• :visible: Memilih elemen yang kelihatan.
• :hidden: Memilih elemen tersembunyi.

jQuery 3 perubahan

JQuery 3 memperkenalkan penambahbaikan prestasi untuk :visible dan :hidden, dan menyempurnakan definisi penglihatan. Pengendalian ralat untuk pemilih tidak sah juga dipertingkatkan.

Caching for Prestasi

Caching elemen terpilih meningkatkan prestasi dengan mengelakkan imbasan DOM berulang. Simpan pilihan dalam pembolehubah untuk digunakan semula.

Kesimpulan

Tutorial ini secara komprehensif meliputi pemilih jQuery. Ingatlah untuk menggunakan caching untuk prestasi yang optimum. Memahami pemilih ini sangat penting untuk pembangunan jQuery yang berkesan.

Soalan Lazim (Soalan Lazim)

Seksyen Soalan Lazim dari input asal sudah berstruktur dan komprehensif. Saya akan mencadangkan mengekalkannya, mungkin dengan pelarasan kata -kata kecil untuk aliran dan kejelasan yang lebih baik.

Atas ialah kandungan terperinci Pandangan yang komprehensif di pemilih jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!