Mengenal Selector Pada JQuery

Mengenal Selector Pada JQuery

45

Pada tutorial kali ini akan membahas tentang mengenal selector pada JQuery. Apa itu Selector, apa fungsinya, dan bagaimana penerapannya.

Selector adalah perihal yang dijadikan acuan atau pengait agar objek dapat dimanipulasi.

Dapat juga dikatakan, Selector sebagai penghubung antara elemen HTML dengan kode JQuery.

Namun, dalam hal ini saya hanya akan membahas 3 jenis selector yang umum digunakan, yakni :

Selector Tag Pada JQuery

Selector yang dijadikan acuan adalah tag – tag HTML seperti tag <table>, <p>, <form>, <h1>, <b> dan tag – tag HTML lainnya.

XHTML

<!DOCTYPE html>

<html>

<head>

  <title>Program Pertama Jquery</title>

  <script src="jquery-3.3.1.min.js"></script>

</head>

<body>

  <b>Saya tidak di desain menggunakan JQuery.</b>

  <p>Saya di desain menggunakan JQuery.</p>



  <script type="text/javascript">

      $(function(){

  // Selector Tag

  $("p").css("color", "#3498db");

});

  </script>

</body>

</html>

Dan gambar di bawah ini adalah hasil dari kode sumber di atas :

mengenal selector pada jquery


Selector ID Pada JQuery

Selector yang dijadikan acuan adalah nama id yang digunakan pada elemen tersebut. Gunakan tanda pagar untuk menandakan bahwa itu adalah nama id “#nama”. Contoh :

XHTML

<!DOCTYPE html>

<html>

<head>

  <title>Program Pertama Jquery</title>

  <script src="jquery-3.3.1.min.js"></script>

</head>

<body>

  <p>Saya tidak memiliki id tes.</p>

  <p id="tes">Saya memiliki id tes.</p>

  <button>Klik Saya</button>



  <script type="text/javascript">

$(function(){

// Selector id

$("button").click(function(){

$("#tes").css("color", "#e74c3c");

});

});

  </script>

</body>

</html>

Di bawah ini adalah hasilnya, apabila anda klik tombol “klik saya”, maka elemen yang memiliki id=”tes” akan berubah warna.

selector id pada jquery


Selector Class Pada JQuery

Selector yang dijadikan acuan adalah nama Class yang digunakan pada elemen tersebut. Gunakan tanda titik untuk menandakan bahwa itu adalah nama Class “.nama_class.

XHTML

<!DOCTYPE html>

<html>

<head>

  <title>Program Pertama Jquery</title>

  <script src="jquery-3.3.1.min.js"></script>

</head>

<body>

  <p>Saya tidak memiliki class tes.</p>

  <p class="tes">Saya memiliki class tes.</p>

  <button>Klik Saya</button>



  <script type="text/javascript">

  $(function(){

  // Selector Class

  $("button").click(function(){

  $(".tes").css("fontSize", "30px").css("color", "red");

  });

  });

  </script>

</body>

</html>

Output dari kode sumber di atas, apabila anda klik tombol button di bawah :

selector class pada jquery


Demikian tutorial dari mengenal selector pada JQuery.

Jika ada pertanyaan lebih lanjut, silahkan tulis di kolom bawah ini.

Keywords: selector jquery, ragam selector jquery

Share: