jQuery : Selector

Memilih Elemen dengan jQuery

JavaScript paling umum digunakan untuk mendapatkan atau memodifikasi konten atau nilai elemen HTML pada suatu halaman, serta untuk menerapkan beberapa efek seperti show, hide, animasi dll. Tetapi, sebelum kalian dapat melakukan tindakan apa pun kalian perlu menemukan atau memilih elemen HTML targetnya terlebih dahulu.

Memilih elemen melalui pendekatan JavaScript biasa bisa sangat merepotkan, tetapi disini jQuery bekerja seperti sulap. Kemampuan membuat pemilihan elemen DOM sederhana dan mudah adalah merupakan salah satu fitur paling kuat dari jQuery.

Di bagian berikut, kalian akan melihat beberapa cara umum memilih elemen pada sebuah halaman dan melakukan sesuatu dengannya menggunakan jQuery.

Memilih Elemen berdasarkan ID

Kalian dapat menggunakan ID selector untuk memilih elemen tunggal dengan ID unik pada sebuah halaman.

Misalnya, kode jQuery berikut akan memilih dan meng-highlight elemen yang memiliki atribut ID id=”mark”, ketika dokumen siap dimanipulasi.

<script type="text/javascript">
$(document).ready(function(){
    // Highlight element with id mark
    $("#mark").css("background", "yellow");
});
</script> 

Pada contoh di atas, $(document).ready() adalah peristiwa yang digunakan untuk memanipulasi halaman dengan aman dengan jQuery. Kode yang termasuk dalam event ini hanya akan berjalan setelah halaman DOM siap. Kita akan belajar lebih banyak tentang event di bab selanjutnya.

Memilih Elemen berdasarkan Nama Kelas

Class selector dapat digunakan untuk memilih elemen dengan kelas tertentu.

Sebagai contoh, kode jQuery berikut akan memilih dan meng-highlight elemen yang memiliki class atribut class=”mark”, ketika dokumen siap.

<script type="text/javascript">
$(document).ready(function(){
    // Highlight elements with class mark
    $(".mark").css("background", "yellow");
});
</script> 
Memilih Elemen Berdasarkan Nama

Elemen selector dapat digunakan untuk memilih elemen berdasarkan nama elemen.

Misalnya, kode jQuery berikut akan memilih dan meng-highlight semua paragraf yaitu elemen <p> pada dokumen ketika sudah siap.

<script type="text/javascript">
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "yellow");
});
</script> 
Memilih Elemen berdasarkan Atribut

Kalian dapat menggunakan atribut selector untuk memilih elemen dengan salah satu atribut HTML-nya, seperti atribut target link atau atribut type input, dll.

Sebagai contoh, kode jQuery berikut akan memilih dan meng-highlight semua input teks seperti elemen <input> dengan type=”text”, ketika dokumen-nya siap.

<script type="text/javascript">
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "yellow");
});
</script> 
Memilih Elemen berdasarkan Compound CSS Selector

Kalian juga dapat menggabungkan CSS selector untuk membuat pilihan kalian lebih tepat.

<script type="text/javascript">
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");
   
    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");
   
    // Highlight li elements inside the ul elements
    $("ul li").css("background", "red");
   
    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "yellow");
   
    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");
   
    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script> 
jQuery Custom Selector

Selain CSS defined selector, jQuery menyediakan custom selector sendiri untuk lebih meningkatkan kemampuan memilih elemen pada halaman tersebut.

<script type="text/javascript">
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");
   
    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");
   
    // Highlight first paragraph element
    $("p:first").css("background", "red");
   
    // Highlight last paragraph element
    $("p:last").css("background", "green");
   
    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");
   
    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");
   
    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>