Cara Mencari Elemen HTML dengan jQuery Selector

belajar javascript

Pengertian Fungsi/Method getElementById() JavaScript

Sebagaimana fungsi utama JavaScript, kita membutuhkan JavaScript untuk memanipulasi element HTML. Langkah awal ialah mencari element mana yang akan diubah, apakah itu tag <p>, tag <p> dengan atribut id=”penting”, tag <p> dengan atribut class=”warning”, atau sebuah tombol <button>.

Di dalam JavaScript, untuk mencari element HTML ini kita biasa memakai method getElementById(). Method atau fungsi ini berguna untuk mencari element HTML berdasarkan atribut id-nya.

Sebagai contoh, bila saya mempunyai sebuah kode HTML berikut:

<button id="tombol">Click Me!</button>

Jadi untuk mengakses element ini kita dapat memakai:

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

Dengan memakai 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 ialah sebuah cara yang disiapkan jQuery untuk mencari element HTML. Tidak cuma dengan atribut id saja, kita juga dapat memakai class, atribut lain, dan perpaduan diantaranya.

Bila kamu telah pernah memakai CSS, jQuery meminjam cara penulisan CSS Selector sebagai jQuery Selector.

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

var x = $("#tombol");

Sebab sama seperti selector CSS, jQuery selector mendukung hampir seluruh penulisan selector dari CSS, berikut misalnya:

  • Mencari semua element dengan tag tertentu. Misalnya kita mau mencari semua tag <p>, penulisan jQuery Selectornya ialah: $(“p”).
  • Mencari element dengan id tertentu. Misalnya mau mencari sebuah tag HTML yang mempunyai id=”belajar”, maka kita dapat menulis: $(“# belajar”).
  • Mencari element dengan class tertentu. Misalnya kita mau mencari semua tag HTML yang memakai atribut class=”warna”, maka dapat ditulis dengan: $(“.warna”).

Sama seperti CSS, kita juga dapat mengkombinasikan selector untuk mencari element yang lebih rinci, contohnya untuk mencari tag <p> yang mempunyai class=”warna” dan berada di dalam tag <div>, selectornya ialah: $(“div p.warna”).

Berikut contoh pemakaian dari jQuery Selector:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</title>
<script src="jquery-2.1.4.js"></script>

<script>
   $( document ).ready(function() 
     $("#tombol").click(function() );
   );
   </script>

</head>
<body>

<p>
   Sebuah paragraf tanpa atribut apapun
</p>
<p id="belajar">
   Sebuah paragraf dengan id = "belajar"
</p>
<p class="warna">
   Sebuah paragraf dengan class = "warna"
</p>
<p id="test" class="saja">
   Sebuah paragraf dengan id="test" class="saja"
</p>
<div>
   <p class="warna">
     Sebuah paragraf tanpa atribut apapun
   </p>
</div>

<button id="tombol">Action</button>

</body>
</html>

Dalam contoh kode program diatas, terdapat 6 penulisan jQuery Selector. Dapatkah kamu menemukannya? Ke enam selector itu ialah:

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

Selector pertama, $(“#tombol”) saya pakai untuk membuat event click. Maksudnya, saat sebuah tag HTML yang mempunyai id=”tombol” di klik, jalankan perintah yang dibuat. Di dalam kode diatas, tag HTML itu ialah sebuah tag <button id=”tombol”>.

Lebih jauh terkait event click() ini akan kita bahas dalam tutorial berikutnya. Saat ini kita cuma fokus kedalam cara penulisan jQuery Selector.

Sesudah tag <button id=”tombol”> di-klik, saya membuat 5 baris perintah yang masing-masingnya dipakai untuk merubah warna paragraf:

$("p").css( "color", "red" );
$("#belajar").css( "color", "green" );
$(".warna").css( "color", "blue" );
$("#test.saja").css( "color", "yellow" );
$("div p.warna").css( "color", "pink" );

Sebagai contoh, kode $(“#belajar”).css( “color”, “green” ) artinya: temukan sebuah tag HTML dengan id=”belajar”, kemudian ubah warnanya (color) jadi hijau (green). Sekali lagi, disini kita cuma fokus ke cara penulisan selector. Event css() akan kita pelajari dalam tutorial terpisah.

Dalam 5 baris itu, saya merubah warna dari setiap paragraf, pastinya dengan selector yang berbeda.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat