Belajar Event di JQuery

lebakcyber.net – Belajar event di JQuery. Oke jadi setelah pada beberapa tutorial belajar JQuery sebelumnya kita sudah membahas mengenai apa itu JQuery dan juga perintah dasarnya, pada kesempatan kali ini kita akan mempelajari mengenai Event yang bisa digunakan pada JQuery.

Event pada JQuery sendiri adalah suatu aksi atau method yang dilakukan pada JQuery, misalnya saja

event click() = memiliki fungsi sebagai aksi atau method klik yang dilakukan oleh pengguna, ada juga event dblclick() atau double click.
mouseleave() = merupakan method dimana cursor mouse meninggalkan element tertentu pada JQuery.
mouseenter() = merupakan aksi pada saat user meletakkan cursor mouse pada sebuah element di JQuery

Selain itu sebenarnya juga masih banyak lagi event-event yang ada pada JQuery yang bisa kita gunakan pada saat kita menggunakan JQuery.

Sekarang langusng saja kita bahas mengenai event yang dapat digunakan pada JQuery.

Event click() dan dblclick() di JQuery

Seperti yang sudah dijelaskan diatas bahwa event click() merupakan merupakan sebuah event yang akan dieksekusi pada saat sebuah element JQuery di klik. Dan berikut ini adalah implementasi bagaimana cara penggunaan event click() di JQuery, silahkan buat sebuah file style.css baru dan juga file index.html baru.

style.css

body {
       font-family: sans-serif;
}

h1 {
       text-align: center;
}

.kotak {
       height: 100px;
       width: 150px;
       background: blue;
}

#button {
       padding: 10px;
       color: #fff;
       background: black;
       border: none;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Jquery - lebakcyber.net</title>	
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Belajar Perintah Dasar JQuery</h1>
    <h1>Event click() di JQuery</h1>
<button id="button">Klik Saya</button>
<div class="kotak"></div>
</body>

<script type="text/javascript">
$(document).ready(function(){
    $('#button').click(function(){
        $('.kotak').toggle();
    });
});

</script>
</html>

Sekarang coba jalankan file index.html pada browser lalu klik satu kali tombol klik saya, nanti secara otomatis element JQuery akan tertutup seperti gambar dibawah ini :

Sekarang kita akan coba buat event dblclick() JQuery, silahkan masukan perintah ini pada file index.html :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Jquery - lebakcyber.net</title>	
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Belajar Perintah Dasar JQuery</h1>
    <h1>Event click() di JQuery</h1>
<button id="button">Klik Saya</button>
<div class="kotak"></div>
</body>

<script type="text/javascript">
$(document).ready(function(){
    $('#button').dblclick(function(){
        $('.kotak').toggle();
    });
});

</script>
</html>

Sekarang coba klik dua kali tombol klik saya, nanti element JQuery baru akan berubah setelah tombol tersebut di klik dua kali seperti gambar berikut :

Event mouseenter() dan event mouseleave() JQuery

Pada JQuery, event mouseenter() merupaka sebuah aksi saat cursor mouse ada diatas element JQuery, sedangkan event mouseleave() merupakan sebuah aksi atau method saat cursor mouse meninggalkan element tersebut.

Sekarang kita coba praktekan kedua event tersebut, silahkan buat sebuah file style.css dan index.html baru lalu masukan perintah seperti dibawah ini :

style.css

body {
       font-family: sans-serif;
}

h1 {
       text-align: center;
}

.kotak {
       height: 100px;
       width: 150px;
       background: blue;
      display: none;
}

#button {
       padding: 10px;
       color: #fff;
       background: black;
       border: none;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Jquery - lebakcyber.net</title>	
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Belajar Perintah Dasar JQuery</h1>
    <h1>Event mouseenter() dan mouseleave() di JQuery</h1>
<button id="button">TOMBOL</button>
    <div class="kotak"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
        $('button').mouseenter(function(){
            $('.kotak').show();
        });

        $('#buttonl').mouseleave(function(){
            $('.kotak').hide();
        });
    });
</script>
</html>

Perhatikan pada file style di css tepatnya pada .kotak kita menambahkan perintah :

display:none;

Perintah tersebut membuat class kotak disembunyikan terlebih dahulu lalu pada saat event mouseenter() dieksekusi nanti class kotak tersebut akan tampil.

Oke jadi seperti itulah tutorial belajar event di JQuery, semoga tutorial ini bermanfaat bagi kalian yang sedang belajar JQuery dan sampai jumpa di tutorial belajar JQuery selanjutnya ya.

Lebak Cyber Tips dan Trik Komputer

Belajar Event di JQuery