JQuery Part 3 : Mengenal Event Pada JQuery
MENGENAL EVENT PADA JQUERY
Setelah sebelumnya kita mempelajari tentang pengenalan dasar JQuery yang membahas mengenai event dan selector JQuery sekarang kita akan memperdalam alias memperjelas apasih event itu ? Dan bagaimana pengimplementasianya ? Singkat cerita Event adalah aksi atau method yang dilakukan oleh JQuery. Contoh event JQuery adalah event click() yaitu event yang berfungsi untuk membuat sebuah aksi ketika sebuah element diklik oleh client. Berikut akan dijelaskan beberapa event yang ada pada JQuery
Adapun beberapa event dari JQuery yang akan kita bahas pada artikel kali ini
EVENT CLICK()
Event click adalah method atau aksi ketika element tersebut diklik. Perhatikan contoh penggunaan event click JQuery berikut ini. Akan dijelaskan bagaimana penggunaan event click JQuery. Pertama sediakan sebuah file html atau php disini saya membuat file dengan nama index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Belajar JQuery Part 3 : Mengenal Event Pada JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Event pada JQuery <br>
<a href="http://script-kiddes.org">Script Kiddies</a></h1>
<button id="tombol">TOMBOL</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('.box').toggle();
});
});
</script>
</html>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
.box{
height: 300px;
width: 300px;
background: hotpink
}
#tombol{
padding: 10px;
color: #000;
background: transparent;
border: 1px solid black;
}
Dapat dilihat pada contoh diatas terdapat sebuah tombol dan element yang berupa kotak dengan css. Saya memberikan event click pada tombol tersebut dan ketika tombol tersebut diklik maka kotak tersebut akan muncul
Hasil yang lebih jelas
EVENT DBLCLICK()
Penggunaan event dblclick ini tidak jauh beda dengan event click. Bedanya adalah event click akan berfungsi ketika element diklik satu kali dblclick ini akan berfungsi ketika element diklik dua kali alias double click
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap Part 3 : Mengenal Event Double Click Pada JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Event pada JQuery <br>
<a href="http://script-kiddes.org">Script Kiddies</a></h1>
<button id="tombol">TOMBOL</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').dblclick(function(){
$('.box').toggle();
});
});
</script>
</html>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
.box{
height: 300px;
width: 300px;
background: hotpink
}
#tombol{
padding: 10px;
color: #000;
background: transparent;
border: 1px solid black;
}EVENT MOUSEENTER() DAN MOUSELEAVE()
Event mouseenter() adalah event ketika cursor mengarahkan pada element tersebut dan Event mouseleave() adalah event ketika cursor meninggalkan element tersebut. Perhatikan contoh berikut ini untuk mendapatkan penjelasan yang lebih.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Belajar Javascript Part 3 : Mengenal Event Pada Javascript</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Event mouseenter() dan mouseleave() pad JQuery<br>
<a href="http://www.script-kidies.org">Script Kiddies</a></h1>
<button id="tombol">TOMBOL</button>
<div class="box"><img src="debian.png"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').mouseenter(function(){
$('.box').show();
});
$('#tombol').mouseleave(function(){
$('.box').hide();
});
});
</script>
</html>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
.box{
height: 300px;
width: 300px;
background: hotpink;
display: none;
}
#tombol{
padding: 10px;
color: #000;
background: transparent;
border: 1px solid black;
}Perhatikan pada contoh css diatas
display: none;Sehingga element class box kita sembunyikan terlebih dahulu lalu kita tampilkan dengan event mouseenter()
$('#tombol').mouseenter(function(){Effect show adalah event /effect yang berguna untuk menampilkan element. Jadi ketika cursor diletakkan pada tombol maka maka element box akan ditampilkan dan ketika cursor meninggalkan tombol maka element box disembunyikan lagi
$('.box').show();
$('#tombol').mouseleave(function(){efect hide() adalah efek ketika cursor meninggalkan element maka element yang aktif tersebut akan disembunyikan. Pada contoh ini arahkan cursor ke tombol maka lihat perubahanya dan ambilah kesimpulan
$('.box').hide();
KESIMPULAN
Sebenarnya ada banyak event dalam JQuery dan disini saya hanya mencontohkan 3 event. event lainya dapat sobat pelajari di website resmi JQuery www.jquery.com . Adapun beberapa event yang dapat sobat coba
- hover() : Adalah event jquery pada cursor diarahkan ke element maka efek hover ini akan muncul
- focus() : Adalah efek ketika element tersebut difokuskan
- blur() : Adalah efek ketika selesai dari posisi fokus
Tidak ada komentar :
Posting Komentar