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
<!DOCTYPE html>
<html>
<head>
<title>Pengenalan jQuery Dasar</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<h1> Tutorial jQuery Dasar <br></h1>
<button id="tombol">TOMBOL</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#tombol').click(function() {
$('.box').toggle();
});
});
</script>
</body>
</html>
style.css
.box {
border:1px solid blue;
background-color: blue;
padding: 20px;
width: 40%;
height: 200px;
margin-top: 10px;
border-radius: 5px;
}
button{
border:1px solid blue;
padding: 10px;
border-radius: 4px;
background-color: transparent;
}
button:hover{
border :2px solid blue;
background-color: blue;
color: white;
}
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
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>style.css
<html>
<head>
<title>Pengenalan jQuery Dasar</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<h1> Tutorial jQuery Dasar <br></h1>
<button id="tombol">TOMBOL</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#tombol').dblclick(function() {
$('.box').toggle();
});
});
</script>
</body>
</html>
.box {
border:1px solid blue;
background-color: blue;
padding: 20px;
width: 40%;
height: 200px;
margin-top: 10px;
border-radius: 5px;
}
button{
border:1px solid blue;
padding: 10px;
border-radius: 4px;
background-color: transparent;
}
button:hover{
border :2px solid blue;
background-color: blue;
color: white;
}
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.
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>Pengenalan jQuery Dasar</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<h1> Tutorial jQuery Dasar <br></h1>
<button id="tombol">TOMBOL</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').mouseenter(function(){
$('.box').show();
});
$('#tombol').mouseleave(function(){
$('.box').hide();
});
});
</script>
</body>
</html>
.box {
border:1px solid blue;
background-color: blue;
padding: 20px;
width: 40%;
height: 200px;
margin-top: 10px;
border-radius: 5px;
}
button{
border:1px solid blue;
padding: 10px;
border-radius: 4px;
background-color: transparent;
}
button:hover{
border :2px solid blue;
background-color: blue;
color: white;
}
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
No comments:
Post a Comment