Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menggunakan pemilih asas jquery

Bagaimana untuk menggunakan pemilih asas jquery

WBOY
WBOYasal
2023-05-25 10:21:36576semak imbas

jQuery ialah perpustakaan JavaScript popular yang digunakan terutamanya untuk memudahkan manipulasi DOM dan pengendalian acara. Apabila menggunakan jQuery, pemilih boleh membantu kami mencari elemen dan komponen dengan mudah. Artikel ini akan menerangkan cara menggunakan pemilih asas jQuery.

1. Sintaks asas

Pemilih dicipta melalui fungsi jQuery $() atau jQuery(). Biasanya pemilih ialah rentetan yang menerangkan elemen atau komponen yang ingin kita pilih. Contohnya, untuk memilih semua elemen perenggan, anda boleh menggunakan sintaks berikut:

$("p")

Berbilang pemilih juga boleh dipisahkan dengan koma dalam fungsi $() yang sama. Contohnya, untuk memilih semua perenggan dan elemen hiperpautan, anda boleh menggunakan sintaks berikut:

$("p,a")

2. Pemilih asas

jQuery menyediakan beberapa pemilih asas Berikut adalah beberapa pemilih asas yang biasa digunakan.

  1. Pemilih elemen

Pemilih elemen memilih jenis elemen tertentu. Contohnya, untuk memilih semua elemen perenggan, anda boleh menggunakan sintaks berikut:

$("p")
  1. Pemilih ID

Pemilih ID memilih elemen berdasarkan atribut ID mereka. Contohnya, untuk memilih elemen dengan ID "myDiv" anda boleh menggunakan sintaks berikut:

$("#myDiv")
  1. Pemilih kelas

Pemilih kelas boleh memilih elemen dengan tertentu kelas. Contohnya, untuk memilih elemen dengan nama kelas "myClass" anda boleh menggunakan sintaks berikut:

$(".myClass")
  1. Pemilih atribut

Pemilih atribut boleh memilih elemen dengan atribut tertentu nilai. Sebagai contoh, untuk memilih semua elemen hiperpautan dengan atribut href, anda boleh menggunakan sintaks berikut:

$("a[href]")

3. Pemilih gabungan

Pemilih asas di atas boleh digunakan dalam kombinasi untuk melaksanakan pemilih yang lebih kompleks . Berikut ialah beberapa pemilih gabungan yang biasa digunakan.

  1. Pemilih turunan

Pemilih keturunan boleh memilih elemen anak dalam elemen. Contohnya, untuk memilih semua elemen perenggan dengan ID "myDiv" anda boleh menggunakan sintaks berikut:

$("#myDiv p")
  1. Pemilih elemen kanak-kanak

Pemilih elemen kanak-kanak boleh memilih kanak-kanak sahaja unsur . Contohnya, untuk memilih semua elemen anak li dengan ID "myList" anda boleh menggunakan sintaks berikut:

$("#myList > li")
  1. Pemilih elemen adik beradik

Pemilih elemen adik beradik boleh memilih sama seperti Elemen sasaran yang bersebelahan antara satu sama lain. Sebagai contoh, untuk memilih semua elemen div bersebelahan dengan elemen sasaran di bawah ID "myDiv", anda boleh menggunakan sintaks berikut:

$("#myDiv + div")

4. Pemilih penapis

Sebagai tambahan kepada pemilih asas dan pemilih gabungan , jQuery juga menyediakan banyak pemilih penapis, yang boleh dipilih berdasarkan atribut, kandungan, kedudukan dan syarat lain elemen.

Berikut ialah beberapa pemilih penapis yang biasa digunakan.

  1. :pemilih pertama

:pemilih pertama boleh memilih elemen pertama yang sepadan dengan pemilih. Sebagai contoh, untuk memilih elemen li pertama anda boleh menggunakan sintaks berikut:

$("li:first")
  1. :pemilih terakhir

: Pemilih terakhir boleh memilih elemen terakhir yang sepadan dengan pemilih. Sebagai contoh, untuk memilih elemen li terakhir anda boleh menggunakan sintaks berikut:

$("li:last")
  1. :pemilih genap dan :ganjil

:pemilih genap dan :ganjil boleh memilih padanan pemilih unsur genap dan ganjil. Contohnya, untuk memilih semua elemen li bernombor genap dalam senarai, anda boleh menggunakan sintaks berikut:

$("li:even")
  1. :mengandungi pemilih

:mengandungi pemilih boleh memilih elemen berdasarkan kandungan teks mereka. Contohnya, untuk memilih elemen li yang mengandungi teks "JavaScript" anda boleh menggunakan sintaks berikut:

$("li:contains('JavaScript')")
  1. :not selector

:not selector boleh mengecualikan elemen dengan pemilih yang ditentukan. Contohnya, untuk memilih semua elemen anak yang bukan elemen li di bawah ID "myList", anda boleh menggunakan sintaks berikut:

$("#myList *:not(li)")

5. Ringkasan

Dalam jQuery, pemilih sangat berkuasa alat. Elemen dan komponen halaman boleh diletakkan dan dimanipulasi dengan mudah dan cepat. Artikel ini menerangkan beberapa kaedah biasa pemilih asas, pemilih gabungan dan pemilih penapis, dengan harapan dapat membantu anda memahami dan menggunakan jQuery dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan pemilih asas 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