JQuery mungkin sudah tidak asing lagi bagi web development,tetapi mungkin sangat asing bagi pemula yang ingin belajar web.sebelum melangkah lebih jauh membahas tentang jQuery,alangkah baiknya kita mengetahui apa itu jQuery. JQuery adalah javascript library,jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript.
Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript. Library jQuery mempunyai kemampuan :
• Kemudahan mengakses elemen-elemen HTML
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• Menyederhanakan kode javascript lainnya
• Kemudahan mengakses elemen-elemen HTML
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• Menyederhanakan kode javascript lainnya
Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js dari situs http://www.jquery.com. Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda.
<script src="jquery.js" type="text/javascript"></script>
Oke, sekarang mari kita lihat contoh sederhana pemograman dengan menggunakan jquery. Kode 12. hello world jquery
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>
Sintaks JQuery
Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih.
Sintaks :
$(selector).action()
• Tanda dollar, untuk mendefinisikan jQuery• (selector), untuk menunjukkan elemen yang dipilih atau dituju
• action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.
Contoh :
$(this).hide() – menyembunyikan elemen saat ini
$("p").hide() – menyembunyikan semua paragraf atau konten dari tag <p>
$(".test").hide() – menyembunyikan elemen yang mempunya class="test"
$("#test").show() – menampilkan elemen yang mempunyai id="test"
Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca atau memanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap.
Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen.
$(document).ready(function(){
//kode kalian di sini
});
Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di-load semuanya. Atau dengan kode javascript biasanya seperti ini ://kode kalian di sini
});
window.onload = function(){ //kode kalian di sini }
Sekarang mari kita lihat pada contoh Kode 12.
$(".tombol1").click(function(){
$("p").hide(1000);
});
$("p").hide(1000);
});
Kode $(".tombol1") adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class=”tombol1” untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh karena $() untuk membuat objek jQuery. Kemudian kita tambahkan fungsi click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=’tombol1’). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class=”tombol1” diklik maka lakukan fungsi $("p").hide(1000);
Fungsi hide() dan show() adalah fungsi built in dari jQuery, nanti akan kita lihat lebih lanjut fungsi-fungsi built in dari jQuery. mungkin cukup sekian dari saya,coretan sedikit mengenai Jquery,mudah mudahan bermanfaat bagi yang ingin belajar JQuery.lebih baik belajar dari dasar sedikit demi sedikit,daripada langsung terjun ke script yang sudah komplek.coretan ini saya tujukan kepada para pemula agar bisa saling berbagi dalam pemahaman JQuery.
0 komentar:
Posting Komentar