Syntax jQuery – Kode dan Contohnya

Dengan jQuery kita bisa memilih (kueri) elemen HTML dan melakukan “action” padanya.

jQuery Sintaks

Sintaks jQuery dibuat khusus untuk memilih elemen HTML dan melakukan beberapa tindakan pada elemen.

Sintaks dasarnya adalah: $(selector).action ()

• Tanda $ untuk mendefinisikan / mengakses jQuery
• Elemen HTML (pemilih) untuk “kueri (atau menemukan)”
• Sebuah aksi jQuery () yang akan dilakukan pada elemen (s)

Contoh:

$(this).hide() – menyembunyikan elemen saat ini.

$("p").hide() – menyembunyikan semua elemen <p>.

$(".test").hide() – menyembunyikan semua elemen dengan class = “test”.

$("# test").hide() – menyembunyikan elemen dengan id = “test”.

Dokumen Siap

Berikut ini contoh dokumen yang siap menggunakan metode jQuery :

$(document).ready(function(){

  // jQuery methods go here...

});

Hal ini untuk mencegah kode jQuery berjalan sebelum dokumen selesai dimuat (siap).

Merupakan praktik yang baik untuk menunggu dokumen dimuat sepenuhnya dan siap sebelum mengerjakannya. Ini juga memungkinkan kita untuk memiliki kode JavaScript,sebelum badan dokumen di bagian head.

Berikut beberapa contoh tindakan yang dapat gagal jika metode dijalankan sebelum dokumen dimuat sepenuhnya:

• Mencoba menyembunyikan elemen yang belum dibuat
• Mencoba mendapatkan ukuran gambar yang belum dimuat

Tip: Tim jQuery juga telah membuat metode yang lebih pendek untuk agar dokumen siap digunakan :

$(function(){

  // jQuery methods go here...

});

Gunakan sintaks yang bisa kita sukai agar bisa lebih mudah dipahami saat membaca kode.