Selector adalah bagian penting pada perintah jQuery. Selector adalah perintah untuk mencari atau memilih elemen HTML. Dari hasil perintah selector kita akan mendapatkan akses kepada elemen HTML tersebut. Kita juga dapat melakukan suatu aksi (action) kepada elemen HTML tersebut.
Selector dapat memilih elemen HTML berdasarkan atribut name, id, class, tipe elemen atau nama tag atribut, nilai dari atribut dan lain sebagainya. Perintah selector dimulai dengan penulisan $().
Selector Tag
Selector tag mencari elemen HTML berdasarkan jenis atau nama tag. Contoh di bawah ini mencari semua tag p (elemen paragraf).
$("p")Contoh di bawah ini memperlihatkan ketika suatu tombol diklik maka semua tag p akan hilang.
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});Selector Id
Selector id mencari elemen HTML berdasarkan nilai atribut id. Contoh di bawah ini mencari tag dengan atribut id bernilai test.
$("#test")Karena nilai atribut id adalah unik untuk setiap elemen atau tag maka selector id hanya akan dapat mencari satu elemen saja.
Contoh di bawah ini memperlihatkan ketika suatu tombol diklik maka tag dengan atribut id bernilai test akan hilang.
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});Selector class
Selector id mencari elemen HTML berdasarkan nilai atribut class. Contoh di bawah ini mencari tag dengan atribut class bernilai test.
$(".test")Contoh di bawah ini memperlihatkan ketika suatu tombol diklik maka tag dengan atribut class bernilai test akan hilang.
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});Daftar Selector jQuery
Di bawah ini selector-selector lain yang bisa dipakai pada jQuery beserta contoh pemakaiannya.
| Sintak | Penjelasan | Contoh Pemakaian |
|---|---|---|
| $(“*”) | Memilih semua elemen | |
| $(this) | Memilih elemen yang sekarang sedang diakses | |
| $(“p.intro”) | Memilih semua elemen paragraf (tag p) dengan atribut class=”intro” | |
| $(“p:first”) | Memilih elemen paragraf (tag p) pertama | |
| $(“ul li:first”) | Memilih elemen li pertama di dalam elemen ul pertama | |
| $(“ul li:first-child”) | Memilih elemen li pertama di dalam setiap elemen ul | |
| $(“[href]”) | Memilih semua elemen yang mempunyai atribut href | |
| $(“a[target=’_blank’]”) | Memilih semua elemen a dengan atribut target bernilai sama dengan _blank | |
| $(“a[target!=’_blank’]”) | Memilih semua elemen a dengan atribut target bernilai tidak sama dengan _blank | |
| $(“:button”) | Memilih semua elemen button dan semua input dengan atribut type bernilai button |
Daftar Selector jQuery Lainnya
jQuery Pada File Terpisah
Apabila dalam proses pengembangan web terdapat banyak sekali perintah jQuery yang harus dibuat maka sebaiknya perintah-perintah tersebut dimasukkan kedalam file terpisah. File jQuery sama seperti file JavaScript yaitu memakai ekstensi js. Kita kemudian bisa memasukkan url atau tautan file terpisah tersebut di dalam tag script di dalam tag head.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>Tutorial sebelumnya : Apa Itu jQuery
Tutorial setelahnya : Menangkap Event
Semua Tutorial JQuery : Tutorial JQuery