Belajar jQuery untuk Manipulasi Halaman Web

Apa Itu jQuery?

jQuery adalah library JavaScript yang membuat manipulasi halaman menjadi lebih singkat. Dulu jQuery sangat populer karena membantu menulis kode yang kompatibel di banyak browser.

Kapan jQuery Masih Berguna?

jQuery masih sering ditemui di project lama, template admin, plugin UI, dan website yang belum memakai framework modern. Memahami jQuery membantu saat merawat aplikasi yang sudah berjalan.

Memasang jQuery

jQuery bisa dipasang lewat CDN.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Menunggu Halaman Siap

Kode jQuery biasanya dijalankan setelah dokumen HTML siap.

$(document).ready(function () {
    console.log('Halaman siap');
});

Selector

Selector dipakai untuk memilih elemen HTML.

$('#judul').text('Judul baru');
$('.card').addClass('aktif');
$('button').prop('disabled', false);

Event Klik

Event dipakai untuk merespons aksi pengguna.

<button id="tombol">Tampilkan Pesan</button>
<p id="pesan" style="display:none;">Halo dari jQuery</p>

$('#tombol').on('click', function () {
    $('#pesan').fadeIn();
});

Manipulasi Class

jQuery bisa menambah, menghapus, atau mengganti class CSS dengan mudah.

$('.menu-item').on('click', function () {
    $('.menu-item').removeClass('aktif');
    $(this).addClass('aktif');
});

Mengambil Nilai Form

Gunakan .val() untuk membaca atau mengubah nilai input.

$('#form-kontak').on('submit', function (event) {
    event.preventDefault();

    const nama = $('#nama').val().trim();

    if (nama === '') {
        alert('Nama wajib diisi');
        return;
    }

    alert('Halo, ' + nama);
});

AJAX Sederhana

AJAX membantu mengambil data dari server tanpa reload halaman.

$.ajax({
    url: '/api/posts',
    method: 'GET',
    success: function (data) {
        console.log(data);
    },
    error: function () {
        alert('Data gagal dimuat');
    }
});

Tips Menggunakan jQuery

• Gunakan jQuery jika project memang sudah memakai jQuery.
• Untuk project baru, pertimbangkan JavaScript modern terlebih dahulu.
• Hindari mencampur terlalu banyak plugin tanpa kebutuhan jelas.
• Rapikan selector dan event agar kode mudah dirawat.