Langsung saja tanpa basa basi.. Kalau kamu ingin sebuah aksi ketika suatu elemen HTML berhasil dimuat (ready), di klik (click), di masuki mouse(mouseenter), fokus (focus), dan masih banyak lagi. kamu bisa melakukannya dengan mudah lewat jquery... contoh untuk menampilkan pesan alert pada dokumen ketika document berhasil dimuat (ready).
<html>
<head>
<title>Belajar jQuery</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(
//harus berisi suatu function
function(){
alert("Dokumen berhasil di load");
}
);
</script>
isi dokumen isi dokumen
</body>
</html>
Hasilnya halaman akan menampilkan pesan alert ketika selesai dimuat.
Nah biasanya fungsi pada event ready pada document tadi dimanfaatkan untuk menempelkan event2 lain misal kita ingin menganti border css tag <div> ketika mouse mulai masuk elemen (mouseenter) dan mengembalikannya lagi ketika mouse pergi (mouseout/mouseleave). Check this out :
<html>
<head>
<title>Belajar jQuery</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(
//harus berisi suatu function
function(){
//tambahkan aksi ketika mouse masuk
$("div").mouseenter(function(){
//this mengacu pada elemen div yang sama
$(this).css("border","3px solid grey");
});
$("div").mouseout(function(){
//this mengacu pada elemen div yang sama
$(this).css("border","1px solid black");
});
}
);
</script>
<div style="border:1px solid black; width:200px; height:30px;">
Ini DIV pertama
</div>
<br />
<div style="border:1px solid black; width:200px; height:30px;">
Ini DIV Kedua
</div>
</body>
</html>
Dan hasilnya, tada :D
Dan satu penjelasan lagi, mengapa fungsi buat mouseenter dan mouseout pada div harus diletakkan di event ready pada document? Itu karena kalau tidak diletakkan di situ ada kemungkinan, script tempelkan event mouseenter dan mouseout akan dieksekusi sebelum elemen tag <div> dibuat. Jadinya ya.. kaya kita mau nempel stiker di pintu eh pintunya belum dipasang.. pasang dimana ya akhirnya?? dijidat aja biar gak pusing. ;P
Oke sekian aja dulu.. lanjut besok besok lagi.. ^^
Tidak ada komentar:
Posting Komentar