Menyalin kode dari Stack Overflow lalu menempelkannya ke proyek memang cepat. Namun saat muncul bug, kamu bingung mencari titik mulainya. Itu tanda dasar jQuery belum cukup kuat. Artikel ini membahas tips jQuery untuk pemula, dari cara memilih elemen hingga mengelola event, agar kode kamu jalan sekaligus mudah dibaca dan diubah.
Pahami cara kerja selector sebelum menulis baris kedua
Selector menjadi fondasi semua operasi jQuery. Kamu memilih elemen, lalu melakukan sesuatu padanya. Jika pemilihan elemen salah, semua yang mengikutinya juga salah. Luangkan waktu membaca cara memilih elemen dengan selector jQuery agar kamu tahu kapan memakai $('.kelas'), $('#id'), atau pemilih atribut seperti $('input[type="email"]').
Satu kebiasaan yang membantu: batasi cakupan pencarian dengan konteks. Alih-alih $('.item') yang menyapu seluruh dokumen, gunakan $('.daftar').find('.item') atau $('.item', '.daftar'). Pada halaman dengan banyak elemen serupa, perbedaan ini berpengaruh pada kecepatan eksekusi.
Simpan hasil seleksi ke dalam variabel
Setiap kali kamu menulis $('.tombol'), jQuery menjalankan pencarian ke DOM. Jika baris itu muncul lima kali dalam satu fungsi, pencarian terjadi lima kali. Simpan hasilnya.
var $tombol = $('.tombol');
$tombol.addClass('aktif');
$tombol.text('Kirim');
$tombol.attr('disabled', true);
Awalan $ pada nama variabel bukan keharusan, tetapi konvensi yang lazim. Ia menandakan bahwa variabel itu berisi objek jQuery, bukan elemen DOM biasa. Dengan begitu, kamu tidak bingung saat ingin memakai .addClass() pada sesuatu yang ternyata hasil document.querySelector.
Gunakan event delegation untuk elemen dinamis
Elemen yang dibuat setelah halaman dimuat tidak akan merespons event yang dipasang langsung padanya. Ini penyebab umum tombol hapus pada daftar dinamis tidak berfungsi. Solusinya, pasang event pada induk yang sudah ada sejak awal, lalu filter berdasarkan target.
$(document).on('click', '.tombol-hapus', function () {
$(this).closest('.baris').remove();
});
Pola ini dikenal sebagai event delegation. Pembahasan lebih dalam soal kapan memakainya dan bagaimana menghindari konflik antar handler bisa kamu baca di Event Delegation jQuery untuk Elemen yang Ditambah Dinamis.
Pisahkan logika pengambilan data dari tampilan
Pemula sering mencampur permintaan AJAX dengan manipulasi DOM dalam satu blok panjang. Saat data gagal dimuat, tampilan sudah terlanjur berubah setengah jadi. Pisahkan dua tanggung jawab itu.
- Fungsi pertama mengambil data dan mengembalikan hasilnya.
- Fungsi kedua menerima data dan memperbarui elemen di halaman.
- Penanganan error diletakkan di antara keduanya, bukan di dalam render.
Jika kamu memakai $.ajax atau $.getJSON, pahami urutan eksekusi callback. Penjelasan mengenai callback dan promise jQuery saat ambil data membantu kamu menghindari kode yang berjalan sebelum data siap.
Batasi manipulasi DOM di dalam loop
Menambahkan satu baris tabel di dalam loop $.each berarti browser melakukan reflow berkali-kali. Untuk data berjumlah puluhan baris, ini mulai terasa. Kumpulkan dulu HTML-nya, lalu sisipkan sekali.
var baris = '';
$.each(data, function (i, item) {
baris += '<tr><td>' + item.nama + '</td></tr>';
});
$('#tabel tbody').append(baris);
Perhatikan juga bahwa menyusun string HTML dari data luar membuka celah XSS jika data tidak dibersihkan. Untuk data dari server sendiri, risikonya lebih kecil, tetapi tetap escape karakter seperti < dan > bila sumbernya tidak kamu kendalikan.
Jika suatu saat kamu perlu menampilkan data dari database melalui PHP, pola pengiriman datanya mirip: ambil di server, kirim ke klien, lalu render. Panduan cara menampilkan data dari database ke HTML dengan PHP bisa jadi titik awal yang masuk akal.
Manfaatkan method rantai dengan bijak
jQuery memungkinkan pemanggilan berantai karena sebagian besar method mengembalikan objek yang sama. Rantai panjang mudah dibaca jika setiap langkah masih berkaitan dengan elemen yang sama.
$('.kotak')
.addClass('sorot')
.fadeIn(200)
.find('.label')
.text('Selesai');
Namun, rantai yang terlalu panjang menyulitkan debugging. Ketika ada langkah yang tidak berjalan, kamu harus memeriksa satu per satu. Jika rantai melebihi empat atau lima langkah, pecah ke dalam variabel antara. Kode yang mudah dibaca lebih berharga daripada kode yang terlihat ringkas.
Kenali kapan jQuery tidak diperlukan
Browser modern sudah mendukung document.querySelector, classList, dan fetch. Untuk tugas sederhana seperti menambah kelas atau menyembunyikan elemen, JavaScript biasa sudah cukup dan tidak menambah ukuran unduhan. jQuery tetap berguna ketika proyekmu sudah memakainya, ketika kamu butuh dukungan browser lama, atau ketika kamu memakai plugin yang bergantung padanya.
Aturan praktisnya: jika kamu hanya memakai satu atau dua method jQuery di seluruh proyek, pertimbangkan untuk menulisnya dengan JavaScript biasa.
Ringkasan
Tips jQuery untuk pemula pada dasarnya berputar pada kebiasaan kecil: pilih elemen dengan cakupan yang tepat, simpan hasil seleksi, pasang event pada induk untuk elemen dinamis, dan pisahkan logika data dari tampilan. Semua ini tidak menuntut pengetahuan lanjutan, tetapi berdampak besar pada kerapian kode. Mulailah dari satu kebiasaan, lalu tambahkan yang lain seiring kamu semakin sering menulis.
Pertanyaan yang Sering Diajukan
Apakah jQuery masih relevan untuk proyek baru?
Tergantung kebutuhan. Untuk proyek kecil tanpa banyak interaksi, JavaScript bawaan browser seringkali lebih ringan. jQuery masuk akal jika kamu memakai plugin yang bergantung padanya atau perlu mendukung browser lama yang masih relevan di lingkungan pengguna.
Bagaimana cara menghindari kode jQuery yang berjalan sebelum DOM siap?
Bungkus kode di dalam $(document).ready(function () { ... }) atau letakkan skrip di akhir body. Dengan begitu, elemen yang hendak kamu pilih sudah tersedia saat kode dieksekusi.
Kenapa event click saya tidak berfungsi pada elemen baru?
Kemungkinan besar event dipasang langsung pada elemen yang belum ada saat halaman dimuat. Gunakan event delegation dengan memasang handler pada induk yang sudah ada, lalu sebutkan selector target sebagai argumen kedua.
