Sintak Dasar
Di bawah ini adalah sintak dasar JQuery$(selector).action()
Penjelasan sintak
- Tanda dollar ($) digunakan untuk mengakses JQuery
- (selector) digunakan untuk mengakses elemen atau tag HTML seperti paragraph (p), id, atau class.
- action() adalah aksi atau event yang akan diberikan pada selector tersebut.
Contoh
- $("p").hide() artinya akan menyembunyikan semua elemen p (paragraf)
- $(this).hide() artinya akan menyembunyikan elemen sekarang
- $(".demo").hide() artinya akan menyembunyikan semua elemen di dalam kelas = "demo"
- $("#demo").hide() artinya akan menyembunyikan semua elemen di dalam id = "demo"
- $("p .demo).hide() artinya akan menyembunyikan semua elemen didalam paragraf dengan kelas = "demo".
Contoh Program
Di bawah ini adalah contoh halaman HTML yang menggunakan JQuery:<html> <head> <script src="../jquery-2.1.4.min.js"></script> <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> --> <script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
$("h1").click(function(){
$("*").hide();
});
$("input[type=button]").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h1>Klik disini untuk menyembunyikan tag semua elemen HTML</h1>
<p>Klik disini untuk menyembunyikan paragaf ini</p>
<p>Klik juga disini untuk menyembunyikan paragraf ini</p>
<p>Klik juga disini untuk menyembunyikan paragraf ini</p>
<h2 id="test">Ini Heading 2</h2> <input type="button" value="Klik disini" /> </body> </html>
Simpan halaman HTML diatas dengan nama jquery_sintak.html, kemudian coba Anda buka dengan browser kesayangan Anda.
Document Ready Event
Satu hal lagi yang ada di dalam JQuery yaitu bahwa setiap perintah JQuery biasanya dilakukan didalam Document Ready Event seperti contoh di bawah ini:$(document).ready(function(){
$("p").click(function(){
$(this).hide();
}); });
Penjelasan contoh:
- $(document).ready(function) artinya bahwa program JQuery akan dijalankan setelah document di halaman HTML berhasil di load.
- Setelah membuat $(document).ready(function); langkah selanjutnya adalah Anda tinggal menempatkan kode JQury di dalam blok tersebut.
mantap bos mudah di pahami walaupun oleh pemula sekali pun...
ReplyDeleteMy blog
oke banget gan
ReplyDeletealat cuci ultrasonic