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

Posted on

Setelah mengenal pengertian jQuery Object di panduan sebelumnya, kali ini saya akan membahas mengenai cara mencari element HTML dengan jQuery Selector.


Pengertian Guna/Method getElementById() JavaScript

Dari yang manfaat utama JavaScript, kita memerlukan JavaScript untuk memanipulasi element HTML. Langkah pertama-tama yakni mencari element mana yang akan diubah, apakah itu tag <p>, tag <p> dengan atribut id=”urgen”, tag <p> dengan atribut class=”warning”, atau sebuah tombol <button>.

Di di JavaScript, untuk mencari element HTML ini kita lazim menggunakan method getElementById(). Method atau manfaat ini berfungsi untuk mencari element HTML merujuk di atribut id-nya.

Selaku contoh, seandainya saya mempunyai sebuah kode HTML berikut:

Karenanya untuk mengakses element ini kita dapat menggunakan:

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


Pengertian jQuery Selector

jQuery mempermudah proses pencarian element HTML dengan menyediakan jQuery Selector. jQuery Selector yakni sebuah cara yang disediakan jQuery untuk mencari element HTML. Tak hanya dengan atribut id saja, kita pun dapat menggunakan class, atribut lain, dan kombinasi diantaranya.

Jikalau kamu telah pernah menggunakan CSS, jQuery meminjam cara penulisan CSS Selector selaku jQuery Selector.

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

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 <p>, penulisan jQuery Selectornya yakni: $(“p”).
  • Mencari element dengan id tertentu. Misalkan ingin mencari sebuah tag HTML yang mempunyai id=”belajar”, karenanya kita dapat menulis: $(“# belajar”).
  • Mencari element dengan class tertentu. Misalkan kita ingin mencari seluruh tag HTML yang menggunakan atribut class=”warna”, karenanya dapat ditulis dengan: $(“.warna”).

Sama seperti CSS, kita pun dapat mengkombinasikan selector untuk mencari element yang lebih spesifik, misalnya untuk mencari tag <p> yang mempunyai class=”warna” dan berada di di tag <div>, selectornya yakni: $(“div p.warna”).

Berikut contoh pemakaian dari jQuery Selector:

Di contoh kode program diatas, terdapat 6 penulisan jQuery Selector. Dapatkah kamu menemukannya? Ke enam selector tersebut yakni:

  • $( “#tombol” )
  • $(“p”)
  • $(“#belajar”)
  • $(“.warna”)
  • $(“#test.saja”)
  • $(“div p.warna”)

Selector pertama-tama, $(“#tombol”) saya gunakan untuk membangun event click. Maksudnya, ketika sebuah tag HTML yang mempunyai id=”tombol” di klik, jalankan pedoman yang dikerjakan. Di di kode diatas, tag HTML tersebut yakni sebuah tag <button id=”tombol”>.

Lebih jauh mengenai event click() ini akan kita bahas di panduan berikutnya. Kali ini kita hanya fokus kedalam cara penulisan jQuery Selector.

Setelah tag <button id=”tombol”> di-klik, saya membangun 5 baris pedoman yang masing-masingnya digunakan untuk mengubah warna paragraf:

Selaku contoh, kode $(“#belajar”).css( “color”, “green” ) artinya: dapatkan sebuah tag HTML dengan id=”belajar”, kemudian ubah warnanya (color) menjadi hijau (green). Sekali lagi, disini kit
a hanya fokus ke cara penulisan selector. Event css() akan kita pelajari di panduan terpisah.

Di 5 baris tersebut, saya mengubah warna dari setiap paragraf, pastinya dengan selector yang berbeda-beda. Silahkan kamu test via link codepen berikut ini:

See the Pen Cara Mencari Element HTML dengan jQuery Selector by duniailkom (@duniailkom) on CodePen.10206

jQuery Selector yang kita pelajari ini amat urgen untuk dimengerti, karena disinilah kita mencari element mana yang ingin dimanipulasi dengan jQuery. Berikutnya, saya akan masuk kedalam jQuery Event, yakni apa saja yang dapat kita lakukan kepada sebuah element HTML.


Sumber https://www.duniailkom.com/