Assallammualaikum wr.w b
Pada kesempatan kali ini saya akan membahas mengenai apa itu jQuery?. Apa sudah ada yang tau?, kalau belum tahu silahkan simak artikel ini baik-baik agar dapat memahami secara baik dan benar.
Apa Itu jQuery?
jQuery merupakan sebuah javascrip yang di rancang untuk meringkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringkas untuk mengganti sebuah dokumen HTML, menangani event, membuat animasi dan interaksi ajax. JQuery juga dirancang untuk mengubah cara kita dalam menulis sebuah javascrip. Sebelum kita mempelajari sebuah jQuery, maka kita harus paham dulu mengenai HTML, CSS, dan Javascript.
Library jQuery mempunyai kemampuan :
- Menyederhanakan kode Javascript
- Efek-efek javascript dan animasi
- Kemudadan dalam mengakses elemen-elemen HTML
- Memanipulasi elemen HTML
- Memanupulasi CSS
- Ajax
- dll
Sebelum memulai membuat jQuery, pertama-tama kita harus mendownload dulu jquery.js dari situs http://www.jquery.com . Selanjutnya setiap kita menulis kode javascript dengan menggunakan query, jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda.
<script type="text/javascript" src="jquery.js"></script>
Dibawah ini merupakan sebuah contoh sederhana dari pemprogaman dengan menggunakan 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>
Sintaks jQuery
Syntak atau perintah biasanya di buat untuk memilih element-elemen HTML dan melakukan aksi terhadap elemen yang di pilih. Sintaks :
- $ (tanda dollar) : untuk mendefinisikan jQuery
- (selector) : untuk menunjukan elemen yang di pilih atau dituju
- action() : jQuery action yang akan di lakukan terhadap elemen yang dipilih
Contoh :
$(this).hide() : Digunakan untuk menyembunyikan elemen pada saat ini
$(
"p").
hide() : Digunakan untuk menyembunyikan semua paragraf atau konten dari tag <p>
$(".test").hide() : Digunakan untuk menyembunyikan elemen yang mempunyai class="test"
$("#test").show() : digunakan untuk menampilkan elemen yang mempunyai id="test"
Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca atau memanipulasi document objeck model (DOM), maka kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal itu, kita perlu menambahkan kode ready event untuk dokumen
$(document).ready(function(){
//masukan kode di sini
});
Kode diatas berarti kita ingin kode dijalankan apabila halaman HTML telah di load sebelumnya atau dengan kode javascript biasanya seperti di bawah ini :
window.onload = function(){ //kode anda di sini }
Nah, sekarang kita lihat pada contoh kode 12 diatas tadi
$(".tombol1").click(function(){
$("p").hide(1000);
});
Kode $(".tombol1") merupakan jQuery selector, dimana kita memilih elemen yang mempunyai clss="tombol1" untuk kita lakukan sesuatu. $ sendiri merupakan alias untuk jQuery clss. Oleh karena $ () untuk membuat objeck jQuery. Kemudian kita tambahkan fungsi click() fungsi ini berguna untuk memberikan event onclik untuk element yang kita pilih tadi (dalam hal ini adalah elemen yang mempunyai clss="tombol1"), dan kemudian melaksanakan fungsi yang diberikan apabila event onclik terjadi. Nah, Jadi artinya yaitu apabila elemen dengan class="tombol1" diklik maka lakukan fungsi $("p").hide(1000); Fungsi hide() dan show() merupakan fungsi build in dari jQuery.
Nah, mungkin sampai disini dahulu pembahasan kita kali ini mengenai jQuery. Bila ada pertanyaan, silahkan bisa tulis di kolom komentar
Cukup sekian dari saya, Wassallammualaikum wr.wb.
Comments
Post a Comment