Tutorial Belajar jQuery Part 5: Cara Mencari Elemen HTML dengan jQuery Selector

Setelah mengenal pengertian jQuery Object dalam tutorial sebelumnya, kali ini saya akan membahas tentang cara mencari element HTML dengan jQuery Selector.

---

Pengertian Fungsi/Method getElementById() JavaScript

Sebagaimana fungsi utama JavaScript, kita memerlukan JavaScript untuk memanipulasi element HTML. Langkah pertama adalah mencari element mana yang akan diubah, apakah itu tag

, tag

dengan atribut id=”penting”, tag

dengan atribut class=”warning”, atau sebuah tombol

Maka untuk mengakses element ini kita bisa menggunakan:

var x = document.getElementById("tombol");

Dengan menggunakan jQuery Selector, kode programnya jauh lebih singkat dan lebih powerfull.

---

Pengertian jQuery Selector

jQuery memudahkan proses pencarian element HTML dengan menyediakan jQuery Selector. jQuery Selector adalah sebuah cara yang disediakan jQuery untuk mencari element HTML. Tidak hanya dengan atribut id saja, kita juga bisa menggunakan class, atribut lain, dan kombinasi diantaranya.

Jika anda sudah pernah menggunakan CSS, jQuery meminjam cara penulisan CSS Selector sebagai jQuery Selector.

Dengan jQuery, untuk mencari sebuah element HTML yang memiliki id=”tombol”, penulisannya jauh lebih singkat:

var x = $("#tombol");

Karena sama seperti selector CSS, jQuery selector mendukung hampir semua penulisan selector dari CSS, berikut contohnya:

• Mencari seluruh element dengan tag tertentu. Misalkan kita ingin mencari seluruh tag

  , penulisan jQuery Selectornya adalah: $(“p”).



• Mencari element dengan id tertentu. Misalkan ingin mencari sebuah tag HTML yang memiliki id=”belajar”, maka kita bisa menulis: $(“# belajar”).


• Mencari element dengan class tertentu. Misalkan kita ingin mencari seluruh tag HTML yang menggunakan atribut class=”warna”, maka bisa ditulis dengan: $(“.warna”).

Sama seperti CSS, kita juga bisa mengkombinasikan selector untuk mencari element yang lebih spesifik, misalnya untuk mencari tag

yang memiliki class=”warna” dan berada di dalam tag

, selectornya adalah: $(“div p.warna”).

Berikut contoh penggunaan dari jQuery Selector:

   Sebuah paragraf tanpa atribut apapun


   Sebuah paragraf dengan id = "belajar"


   Sebuah paragraf dengan class = "warna"


   Sebuah paragraf dengan id="test" class="saja"


   

     Sebuah paragraf tanpa atribut apapun
   

Pada contoh kode program diatas, terdapat 6 penulisan jQuery Selector. Dapatkah anda menemukannya? Ke enam selector tersebut adalah:

• $( “#tombol” )


• $(“p”)


• $(“#belajar”)


• $(“.warna”)


• $(“#test.saja”)


• $(“div p.warna”)

Selector pertama, $(“#tombol”) saya gunakan untuk membuat event click. Maksudnya, ketika sebuah tag HTML yang memiliki id=”tombol” di klik, jalankan perintah yang dibuat. Di dalam kode diatas, tag HTML tersebut adalah sebuah tag