Sebelumnya kita telah belajar Selectors yang mencari elemen-elemen apa saja yang akan dilakukan operasi terhadapnya, maka Events memutuskan kapan dilakukannya operasi tersebut, misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi terhadapnya setelah di klik (click), klik 2x (dblclick), saat mouse berada diatas suatu objek (mouseover), dan sebagainya. Dan Effects digunakan untuk menampilkan dan menyembunyikan suatu elemen, menggerakkan elemen, dan menganimasikan elemen tersebut.

Contents show

Event (Menangani Kejadian)

Pada latihan kali ini, kita akan langsung mencoba 3 event sekaligus, yaitu click, mouseover, dan mouseout. Untuk lebih jelasnya, langsung saja coba skrip berikut:

Lihat Script event.html

<html>
<head>
<script src=”jquery-1.8.0.min.js“></script>
<script type=”text/javascript“>
$(document).ready(function() {
$(“th”).addClass(“orange”);

$ (“tr:odd”).addClass(“hijaumuda”);
$(“tr:even”).addClass(“hijautua”);

$ (“tr”) .mouseover(function() (
$(this).addClass(“merahmuda”);

}) ;

$(”tr”) .mouseout (function () {
$ (this) .removeClass(“merahmuda”);

}) ;

$(“tr”).click(function()(
$(this).toggleClass(“birumuda”);

});

</script>

<td>Perwira Abrianto</td>
<td>Yogyakarta</td>
</tr>
<tr>
<td>2</td>
<td>Beauty Khuluqiyah</td>

<td>Surakarta</td>
</tr>
<tr>
<td>3</td>
<td>Untung Slamet</td>
<td>Surabaya</td>
</tr>
<tr>
<td>4</td>
<td>Qori Adzani</td>
<td>Jakarta</td>
</tr>
</table>
</body>
</html>

Penjelasan skrip event.html

Untuk mempermudah pembuatan tabel dengan wama selang seling atau disebut juga dengan tabel zebra, jQuery menyediakan Selector bawaan, yaitu:

:even: mencari bans ganjil pada tabel, yaitu baris 1, 3,5, 7, dan seterusnya.
:odd: mencari baris genap pada tabel, yaitu baris 2,4, 6, 8, dan seterusnya.

jQuery mempunyai fungsi-fungsi yang tergabung dalam kelompok Class yang berguna untuk menambahkan dan menghapus atribut Class beserta nilainya pada suatu elemen.

Ada tiga fungsi yang termasuk dalam kelompok Class, yaitu:

addClass(“nama_class”): menambahkan Class pada elemen yang dipilih.
removeClass(“nama_class”): menghapus Class pada elemen yang dipilih.
toggleClass(“nama_class”): menambahkan Class pada suatu elemen apabila pada elemen tersebut belum digunakan Class, namun apabila elemen terscbul telah menggunakan Class, maka Class pada elemen tersebut akan dihapus.

Ketika event.html kita jalankan, maka script yang diterapkan adalah sebagai berikut:

Event mouseover, arahkan mouse pada salah satu baris tabel, wama pada baris tabel berubah menjadi merah muda dan kursormouse menjadi tangan.
Event mouseout, setelah berada diatas salah satu baris tabel, sekarang arahkan mouse diluar dari tabel, maka kondisi tabel akan kembali seperti semula dan kursor mouse pun berubah kembali menjadi pana.
Event click, sekarang coba klik salah satu baris pada tabel, maka wama baris pada tabel yang di-klik akan berubah wamanya menjadi biru muda. Untuk mengembalikan ke wama asalnya, klik kembali baris yang telah di-klik sebelumnya.

Catatan.

Intinya, Events akan melakukan aksinya setelah Selectors menentukan elemen- elemen apa saja yang akan diberikan aksi/operasi terhadapnya.
Kalau kita lihat dokumentasi jQuery, maka akan kita temukan banyak sekali jenis Events, seperti dblclick, bind, unbind, trigger, blur, focus, keypress, keyup. keydown, load, submit, dan sebagainya .. silahkan baca dokumentasi jQuery di http://docs.jquerv.com sudah dilengkapi dengan keterangan masing-masing Events dan juga disertai dengan contoh penggunaannya.

Effects (Efek dan Animasi)

Effects digunakan untuk menampilkan dan menyembunyikan suatu elemen, menggerakkan elemen, dan menganimasikan elemen tersebut.

Pada artikel Belajar jQuery : Cara Menggunakan Dan Cara Kerja jQuery kita telah menggunakan event click pada tombol, dimana apabila tombol Sembunyikan di-klik, maka elemen berupa foto akan hilang dan apabila di-klik tombol Tampilkan, maka fotonya akan tampil kembali.

Pada contoh tersebut, kita telah menggunakan dua buah effects, yaitu show dan hide. Adapun effects lainnya yang dipunyai jQuery adalah toggle, slideUp, slideDown, slideToggle, fadeln, fadeOut, animate, dan sebagainya. Kalau Anda mengamati efek- efek yang digunakan dalam website jejaring sosial seperti Facebook dan Twitter, maka Anda akan melihat bagaimana efek-efek jQuery diterapkan dalam website tersebut.

Pada latihan kali ini, kita akan mencoba salah satu efek slide, yaitu slideToggle yang digunakan untuk menampilkan dan manempilkan suatu elemen seperti membuka dan menutup sesuatu. Untuk lebih jelasnya, lihat contoh sederhana pada skrip berikut:

Skrip efek_slide.html

Lihat Script efek_slide.html

<html>
<head>
<script src=” j query-1.8.0 . min j s“></script>
<script type=”text/j avascript“>
$(document).ready(function(){
$ (” .flip”) . click (function () (
$(“.pesan”) .slideToggle(“slow”) ;
}) ;
});
</script>
<style type=”text/css”>
div.pesan { height:120px; display:none; } div.pesan, p.flip { margin: Opx; padding: 5px; text-align: center; background: lightyellow; border: lpx solid black; cursor: pointer;
)
</style> r. </head>
<body>
<div class=”pesan”>
<p>Sukses bukanlah kunci kebahagiaan. <br />
Kebahagiaanlah kunci kesuksesan.</p>
<p>Jika senantiasa melakukan segala sesuatu dengan Penuh cinta, <br /> maka Anda akan sukses.</p>
</div>
<p class=”flip”><b>Tampilkan dan Sembunyikan Pesan</b></p> </body>
</html>

penjelasan Skrip (efek_slide.html):

kita hanya menggunakan sebuah fungsi slide, yaitu slideToggle yang berfungsi memberikan efek slide apabila pada elemen belum ada efek slidenya dan menghilangkan efek slide apabila pada elemen sudah ada efek slidenva, jadi fungsi slideToggle mencakup dua buah fungsi slide lainnya, yaitu slideUp dan slideDown.

Catalan:

Pahami lagi mengenai filosofi pemrograman jQuery yang telah kita bahas pada artikel sebelumnya, karena secara keseluruhan pemrograman jQuery nantinya akan mengacu pada filosofi dasarnya tersebut.
Kita telah belajar mengenai dasar-dasar jQuery yang mencakup Selectors, Events, dan Effects, dimana Selectors bertugas mencari elemen-elemen apa saja yang akan dilakukan operasi terhadapnya, lalu Events memutuskan kapan dilakukannya operasi tersebut. Dan Effects digunakan untuk menampilkan dan menyembunyikan suatu elemen, menggerakkan elemen, dan menganimasikan elemen tersebut.
jQuery menyediakan banyak Selectors, Events, dan Effects, namun baru sebagian kecil yang kita bahas.

Demikian penjelasan yang bisa disampaikan tentang teknik dasar memahami jquery, semoga artikel ini bermanfaat bagi pembaca.. Untuk lebih memahami penjelasan tentang pengertian jQuery selanjutnya baca artikel lainnya tentang Belajar jQuery: