Saya hari ini membeli buku “Bikin Website Super Keren dengan PHP & jQuery”. Saya tertarik dengan keistimewaan jQuery yang kabarnya bisa menyederhanakan kode Javascript. Sesuai dengan slogannya “Write less, do more”.
Cara menggunakannya?
Pertama, kita harus download dulu library jQuery dari http://jquery.com. Pilih saja yang PRODUCTION, karena yang ini sudah dioptimize jadi lebih kecil ukurannya. Secara performa antara PRODUCTION dan DEVELOPMENT tidak ada bedanya.
Setelah kita mendapatkan file jquery-1.5.min.js (atau jquery-1.5.js kalau download yang DEVELOPMENT), letakkan di dalam satu direktori seperti C:\jquerylatihan.
Buat file html bernama latihanjquery01.html. ketik kode berikut :
<html>
<head>
<!------ menggunakan library jQuery 1.5 PRODUCTION -->
<script type="text/javascript" src="jquery-1.5.min.js">
</script>
<!------ membuat fungsi dengan jQuery -->
<script type="text/javascript">
$(document).ready(function(){
$(".ngumpet").click(function(){
$("#logo").hide("slow");
});
$(".nongol").click(function(){
$("#logo").show("slow");
});
});
</script>
</head>
<body>
<!------ menggunakan fungsi yang sudah dibuat dengan jQuery -->
<button class="ngumpet"> Ngumpet</button>
<button class="nongol"> Nongol</button>
<!------ siapkan gambar untuk dimanipulasi, dalam hal ini saya gunakan logo_rudra.png -->
<p><img id="logo" src="logo_rudra.png" /></p>
</body>
</html>
Penulisan kode menjadi sangat singkat dan Saya dapat memahami dengan mudah bagaimana perilaku dari kode yang Saya tulis.
Saya memanggil library jQuery 1.5.min.js, kemudian saya buat scriptnya untuk melakukan sesuatu (hide & show) ketika class tombol diklik (class dipanggil menggunakan titik : “.ngumpet” & “.nongol”) terhadap obyek yang diberi tag (tag dipanggil menggunakan pagar : “#logo”).
Selamat mencoba
No related posts.
