Sintak Dasar
Di bawah ini yakni sintak dasar JQuery$(selector).action()
Penjelasan sintak
- Tanda dollar ($) dipakai untuk mengakses JQuery
- (selector) dipakai untuk mengakses elemen atau tag HTML menyerupai paragraph (p), id, atau class.
- action() yakni agresi 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 yakni pola halaman HTML yang memakai 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, lalu 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 menyerupai pola di bawah ini:$(document).ready(function(){ $("p").click(function(){ $(this).hide();
}); });
Penjelasan contoh:
- $(document).ready(function) artinya bahwa aktivitas JQuery akan dijalankan sesudah document di halaman HTML berhasil di load.
- Setelah menciptakan $(document).ready(function); langkah selanjutnya yakni Anda tinggal menempatkan instruksi JQury di dalam blok tersebut.
