Pemilih jQuery

Selector memungkinkan Anda untuk melakukan operasi terhadap grup elemen atau elemen tunggal.

Pemilih jQuery

Dalam bab sebelumnya, kami menunjukkan beberapa contoh tentang bagaimana memilih elemen HTML.

Titik kunci adalah menguasai pemilihan selector jQuery untuk memilih elemen yang diinginkan untuk menerapkan efek.

Pemilihan selector elemen jQuery dan pemilihan selector atribut memungkinkan Anda memilih elemen HTML melalui nama tag, nama atribut, atau konten.

Selector memungkinkan Anda mengoperasikan grup elemen HTML atau elemen tunggal.

Dalam istilah HTML DOM:

Selector memungkinkan Anda mengoperasikan grup elemen DOM atau node DOM tunggal.

Pemilihan selector elemen jQuery

jQuery menggunakan pemilihan selector CSS untuk memilih elemen HTML.

$("p") memilih elemen <p>.

$("p.intro") memilih semua elemen <p> dengan class="intro".

$("p#demo") memilih semua elemen <p> dengan id="demo".

Pemilihan selector atribut jQuery

jQuery menggunakan ekspresi XPath untuk memilih elemen yang memiliki atribut yang diberikan.

$("[href]") memilih semua elemen dengan atribut href.

$("[href='#']") memilih semua elemen dengan nilai href yang sama dengan "#".

$("[href!='#']") memilih semua elemen dengan nilai href yang tidak sama dengan "#".

$("[href$='.jpg']") memilih semua elemen dengan nilai href berakhir dengan ".jpg".

Pemilihan selector CSS jQuery

Pemilihan selector CSS jQuery dapat digunakan untuk mengubah atribut CSS elemen HTML.

Contoh di bawah ini mengubah warna latar belakang semua elemen <p> menjadi merah:

Contoh

$("p").css("background-color","red");

Coba sendiri

Beberapa contoh pemilihan selector

Sintaks Deskripsi
$(this) elemen HTML saat ini
$("p") semua elemen <p>
$("p.intro") semua elemen <p> dengan class="intro"
$(".intro") semua elemen dengan class="intro"
$("#intro") elemen dengan id="intro"
$("ul li:first") elemen <li> pertama setiap <ul>
$("[href$='.jpg']") semua atribut href yang berakhir dengan ".jpg"
$("div#intro .head") elemen <div> dengan id="intro" yang memiliki semua elemen class="head"

Untuk referensi pustaka yang penuh, silakan kunjungi Referensi Pemilihan Pustaka jQuery。