Mengenal Sintaks Dasar jQuery: Selektor, Event, dan Manipulasi DOM

Jika kamu baru mulai belajar jQuery, hal pertama yang harus dipahami adalah sintaks dasar jQuery. jQuery terkenal karena mampu menyederhanakan JavaScript murni yang biasanya panjang menjadi kode yang singkat, mudah dibaca, dan efisien. Dengan jQuery, kamu bisa memilih elemen HTML (selektor), menangani interaksi pengguna (event), dan memodifikasi tampilan halaman (manipulasi DOM) hanya dalam beberapa baris kode.

Dalam artikel ini, kita akan membahas tuntas tentang:

• Konsep dasar jQuery dan bagaimana cara kerjanya,

• Cara menggunakan selektor untuk memilih elemen,

• Penanganan event (klik, hover, submit, dll),

• Manipulasi DOM seperti mengubah teks, menambah elemen, atau mengganti atribut.

Mari kita mulai dari pengenalan singkat jQuery terlebih dahulu.

Apa Itu jQuery?

jQuery adalah pustaka JavaScript yang dibuat untuk memudahkan developer dalam menulis kode JavaScript.
Tujuan utama jQuery adalah “Write less, do more” — artinya dengan sedikit baris kode, kamu bisa melakukan banyak hal.

Dahulu, sebelum JavaScript modern (ES6) hadir, penulisan kode DOM dan event handling sangat beragam antar browser. jQuery hadir untuk menyatukan perbedaan itu dan memberikan cara yang konsisten untuk semua browser.

Contoh perbandingan sederhana:

JavaScript murni:

document.getElementById("btn").addEventListener("click", function() {
  alert("Halo Dunia!");
});

Dengan jQuery:

$("#btn").click(function() {
  alert("Halo Dunia!");
});

Hanya satu baris, dan hasilnya sama. Inilah yang membuat jQuery begitu populer hingga kini.

Cara Menggunakan jQuery

Sebelum menulis sintaks jQuery, kamu perlu menghubungkan pustaka jQuery ke dalam file HTML. Ada dua cara utama:

1. Menggunakan CDN (Content Delivery Network)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

2. Menggunakan File Lokal (Offline)

Jika ingin jQuery tetap bisa digunakan tanpa koneksi internet, unduh file-nya di jquery.com/download lalu simpan di folder proyekmu:

<script src="js/jquery.min.js"></script>

Setelah itu, kamu bisa mulai menulis kode jQuery di dalam tag <script>:

<script>
$(document).ready(function() {
  // kode jQuery di sini
});
</script>

Fungsi $(document).ready() memastikan bahwa seluruh elemen HTML sudah dimuat sebelum jQuery dijalankan.

1. Selektor di jQuery

Selektor adalah inti dari jQuery. Dengan selektor, kamu dapat memilih elemen HTML tertentu dan melakukan aksi terhadapnya.
Sintaks dasarnya adalah:

$(selector).aksi()

Di mana:

• selector adalah elemen HTML yang ingin kamu pilih,

• aksi() adalah metode atau fungsi yang akan dijalankan.

Contoh Selektor Dasar

Jenis Selektor	Contoh	Keterangan
Tag	$("p")	Memilih semua elemen <p>
ID	$("#judul")	Memilih elemen dengan id=”judul”
Class	$(".menu")	Memilih semua elemen dengan class=”menu”
Atribut	$("[type='text']")	Memilih elemen input bertipe text
Gabungan	$("div.menu ul li")	Memilih semua <li> di dalam .menu

Contoh Penggunaan:

// Mengubah warna teks paragraf
$("p").css("color", "blue");

// Menyembunyikan elemen dengan ID tertentu
$("#banner").hide();

// Menampilkan semua elemen dengan class "box"
$(".box").show();

Selektor jQuery ini sangat fleksibel — mirip dengan cara kerja CSS.

2. Event Handling (Menangani Interaksi Pengguna)

Event adalah reaksi terhadap tindakan pengguna di halaman web, seperti mengklik tombol, mengisi form, atau menggerakkan mouse. jQuery membuat penanganan event menjadi sangat sederhana.

Beberapa event umum di jQuery antara lain:

Event	Fungsi
.click()	Saat elemen diklik
.dblclick()	Saat elemen diklik dua kali
.hover()	Saat kursor diarahkan ke elemen
.keyup()	Saat tombol dilepas di input
.submit()	Saat form dikirim
.change()	Saat nilai input berubah

Contoh Penggunaan Event

// Saat tombol diklik
$("#btn").click(function() {
  alert("Tombol diklik!");
});

// Saat kursor diarahkan ke elemen
$(".kotak").hover(function() {
  $(this).css("background-color", "yellow");
});

// Saat form dikirim
$("form").submit(function(e) {
  e.preventDefault(); // mencegah reload halaman
  alert("Form berhasil dikirim!");
});

Dengan event seperti ini, kamu bisa menciptakan interaksi dinamis tanpa harus menulis banyak kode JavaScript murni.

3. Manipulasi DOM di jQuery

DOM (Document Object Model) adalah representasi struktur HTML dalam bentuk objek yang bisa dimanipulasi oleh JavaScript.

Dengan jQuery, kamu bisa menambahkan, menghapus, atau mengubah isi elemen HTML dengan mudah.

Berikut kategori manipulasi DOM yang paling umum:

Mengubah Konten

Fungsi	Keterangan
.text()	Mengubah atau mengambil teks elemen
.html()	Mengubah atau mengambil HTML di dalam elemen
.val()	Mengambil atau mengatur nilai input

Contoh:

$("#judul").text("Selamat Datang di Website Kami!");
$("#deskripsi").html("<b>Website ini dibuat dengan jQuery</b>");
$("#inputNama").val("John Doe");

Mengubah Atribut dan CSS

Fungsi	Keterangan
.attr()	Mengatur atau mengambil atribut HTML
.removeAttr()	Menghapus atribut tertentu
.css()	Mengatur gaya CSS

Contoh:

$("#link").attr("href", "https://www.arvamart.com");
$("#gambar").attr("alt", "Gambar Produk");
$(".kotak").css("background-color", "lightblue");

Menambahkan atau Menghapus Elemen

Fungsi	Keterangan
.append()	Menambahkan elemen di dalam elemen target
.prepend()	Menambahkan elemen di awal target
.after()	Menambahkan elemen setelah target
.remove()	Menghapus elemen

Contoh:

$("#list").append("<li>Item Baru</li>");
$("#judul").after("<hr>");
$(".iklan").remove();

Dengan fungsi-fungsi ini, kamu dapat membangun tampilan website yang dinamis tanpa perlu memuat ulang halaman.

Tips Praktis Saat Menggunakan jQuery

1. ✅ Selalu gunakan versi terbaru jQuery (saat ini 3.x) untuk keamanan dan kompatibilitas.

2. ⚙️ Gunakan $(document).ready() agar jQuery berjalan setelah elemen dimuat sepenuhnya.

3. Hindari penggunaan berlebihan — jangan gunakan jQuery untuk hal sederhana yang bisa dilakukan dengan CSS.

4. Gunakan file lokal jika proyek harus bisa berjalan tanpa koneksi internet.
   Kamu bisa mengunduh jQuery dari jquery.com agar tetap berfungsi secara offline.

Kesimpulan

Sintaks dasar jQuery mencakup tiga hal penting — selektor, event, dan manipulasi DOM. Dengan pemahaman ketiganya, kamu sudah bisa membuat website yang interaktif, dinamis, dan responsif hanya dengan sedikit kode.

jQuery tetap menjadi alat yang berguna bagi developer, terutama untuk proyek ringan, aplikasi legacy, atau prototyping cepat.
Namun, pastikan kamu juga memahami JavaScript murni agar bisa beradaptasi dengan teknologi web modern.

Dengan menguasai dasar-dasar ini, langkahmu untuk menjadi web developer yang mahir akan semakin cepat!