Pengenalan Event Pada JQuery

Pengenalan Event Pada JQuery

52

Pada tutorial kali ini kita akan membahas seputar pengenalan event pada JQuery, dan tentunya kita akan mengenal ragam event yang telah di sediakan oleh JQuery.

Event dalam hal ini berarti aksi yang akan di jalankan ketika user melakukan aksi seperti click / hover / scroll dan aksi – aksi lainnya. Terdapat beberapa contoh event diantaranya seperti table di bawah ini :

pengenalan event pada jquery

Cara untuk membuat event sangatlah mudah. Pertama – tama definisikan lebih dulu elemen yang akan dijadikan sebagai pemicu (misal tag <button>), kedua barulah tentukan method jQuery yang ingin anda gunakan ( misal dalam kasus ini saya gunakan fungsi click() ). Maka scriptnya adalah seperti ini :

JavaScript

$("button").click(function(){
   // tulis statement apapun disini.
});

Setelah itu, barulah anda tentukan statement yang ingin anda jalankan di dalam fungsi click(). Misal saya hendak merubah ukuran dan warna dari elemen <p>, maka script-nya adalah seperti ini :

JavaScript

$("button").click(function(){
  $("p").css("fontSize", "30px").css("color", "blue");
});

Berikut kode lengkapnya :

XHTML

<!DOCTYPE html>
<html>
<head>
  <title>Program Pertama Jquery</title>
  <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
  <p>Saya memiliki class tes.</p>
  <button>Klik Saya</button>

  <script type="text/javascript">
    $(function(){
      $("button").click(function(){
      $("p").css("fontSize", "30px").css("color", "blue");
    });
  });
  </script>
</body>
</html>

Keywords: event jquery, pengenalan event jquery

Share: