Jquery Dasar
Sekarang saya akan mencoba membuat artikel mengenai jquery, langkah pertama kita buat satu file di dreamweaver seperti coding berikut :
<html>
<head>
<script type=”text/javascript” src=”jquery-1.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.sembunyi”).click(function(){
$(“#foto”).hide(“slow”);
});
$(“.tampil”).click(function(){
$(“#foto”).show(“normal”);
});
});
</script>
</head>
<body>
<button>Sembunyikan</button>
<button>Tampilkan</button>
<p><img id=”foto” src=”peluk.jpg” /></p>
</body>
</html>
Saya akan menjelaskan maksud dari script di atas, ada tiga point Penting yang perlu di perhatikan :
- Jquery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah di tampilkan semua di halaman web fungsi yang di gunakan adalah
$(document).ready(function(){ - Setelah semua elemen ditampilkan tahap berikutnya adalah memilih elemen berdasarkan class atau id yang di definisikan, contoh script jquery di atas menggunakan selector
$(“#foto”)
$(“.sembunyi”)$(“.tampil”) - setelah elemen dipilih tahap berikutnya memebrikan aksi terhadap elemen yang sudah dipilih misalnya di klik dan hide dimana apabila tombol di klik maka menyembunyikan elemen foto$(document).ready(function(){
$(“.sembunyi”).click(function(){
$(“#foto”).hide(“slow”);
});
Semoga dapat bermanfaat.
sumber : prowebpro
