Pengenalan jQuery: Library JavaScript yang Menyederhanakan Segalanya

Di era sebelum JavaScript modern (ES6+), menulis kode yang kompatibel di semua browser adalah mimpi buruk. jQuery lahir pada 2006 oleh John Resig untuk memecahkan masalah ini dengan motto: “Write less, do more.” Meski kini JavaScript native sudah sangat powerful, jQuery masih dipakai di lebih dari 75% website di dunia — termasuk WordPress — sehingga memahaminya tetap sangat relevan.

Instalasi jQuery

Via CDN (Paling Mudah)

<!-- Letakkan sebelum </body> atau di <head> dengan defer -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous"></script>

Via npm (Untuk Project Modern)

npm install jquery

import $ from "jquery";

Sintaks Dasar jQuery

// Format umum: $(selector).action()

// $ adalah alias untuk jQuery
$(document).ready(function() {
  // Kode di sini berjalan setelah DOM siap
  console.log("DOM siap!");
});

// Shorthand yang sama
$(function() {
  console.log("DOM siap!");
});

Selektor jQuery vs JavaScript Native

// JavaScript native
document.querySelector("#judul");
document.querySelectorAll(".kartu");
document.getElementById("navbar");

// jQuery — lebih ringkas, return jQuery object
$("#judul");           // by ID
$(".kartu");           // by class
$("p");               // by tag
$("input[type=text]"); // by attribute
$("ul > li");          // CSS selector
$(".kartu:first");     // pseudo-class
$(".kartu:last");
$(".kartu:even");      // indeks genap
$(".kartu:odd");       // indeks ganjil
$(".kartu:eq(2)");     // indeks ke-2

jQuery selector selalu mengembalikan jQuery object — kumpulan elemen yang bisa dimanipulasi sekaligus.

Manipulasi Konten

// Baca konten
$("#judul").text();        // baca teks (tanpa HTML)
$("#konten").html();       // baca HTML inner

// Tulis konten
$("#judul").text("Judul Baru");
$("#konten").html("<strong>Teks tebal</strong>");

// Value pada input
$("#email").val();            // baca nilai input
$("#email").val("budi@contoh.com"); // set nilai

// Method chaining — bisa di-chain!
$("#judul")
  .text("Judul Baru")
  .addClass("highlighted")
  .css("color", "blue");

Manipulasi CSS dan Class

// CSS
$(".box").css("background-color", "red");
$(".box").css({
  "background-color": "red",
  "font-size": "20px",
  "padding": "10px"
});
console.log($(".box").css("color")); // baca nilai CSS

// Class
$(".box").addClass("aktif");
$(".box").removeClass("aktif");
$(".box").toggleClass("aktif");
$(".box").hasClass("aktif");          // true/false

// Show/hide
$(".modal").show();
$(".modal").hide();
$(".modal").toggle();
$(".modal").show(300);  // animasi 300ms
$(".modal").hide("slow");

Atribut dan Data

// Atribut HTML
$("img").attr("src");                      // baca
$("img").attr("src", "/images/baru.jpg");  // tulis
$("img").attr({ src: "/images/baru.jpg", alt: "Gambar baru" });
$("img").removeAttr("alt");

// Data attribute (data-*)
$(".card").data("id");              // baca data-id
$(".card").data("id", 42);         // tulis
$(".card").removeData("id");

Traversal DOM dengan jQuery

// Naik
$(".item").parent();
$(".item").parents(".container");
$(".item").closest(".wrapper");

// Turun
$(".list").children();
$(".list").children("li.aktif");
$(".list").find("li");    // semua keturunan, bukan hanya children
$(".list").find("span");

// Saudara
$(".item").next();
$(".item").prev();
$(".item").siblings();
$(".item").siblings(".highlight");

// Filter
$("li").first();
$("li").last();
$("li").eq(2);         // elemen indeks ke-2
$("li").filter(".aktif");
$("li").not(".disabled");

Tambah dan Hapus Elemen

// Tambah elemen
$("<li>Item Baru</li>").appendTo("#daftar");   // ke akhir
$("<li>Item Awal</li>").prependTo("#daftar");  // ke awal

// Atau dari sisi parent
$("#daftar").append("<li>Item Akhir</li>");
$("#daftar").prepend("<li>Item Awal</li>");
$("#item-2").before("<li>Sebelum Item 2</li>");
$("#item-2").after("<li>Sesudah Item 2</li>");

// Hapus elemen
$(".hapus").remove();          // hapus termasuk event listener
$(".bersihkan").empty();       // hapus semua children
$(".item").detach();           // hapus tapi simpan di memori (bisa dipasang kembali)

Event Handling dengan jQuery

// .on() — cara modern
$("#tombol").on("click", function() {
  alert("Tombol diklik!");
});

// Shorthand untuk event umum
$(".btn").click(function() { /* ... */ });
$("form").submit(function(e) {
  e.preventDefault();
  /* ... */
});
$("#nama").keyup(function() {
  console.log($(this).val());  // $(this) = elemen yang trigger event
});

// Multiple events sekaligus
$(".input")
  .on("focus", function() { $(this).addClass("fokus"); })
  .on("blur",  function() { $(this).removeClass("fokus"); });

// Event delegation — untuk elemen dinamis
$(document).on("click", ".btn-hapus", function() {
  $(this).closest("li").remove();
});

// Hapus event listener
$(".btn").off("click");
$(".btn").off("click", handlerFunction);

Iterasi dengan jQuery

// .each() — iterasi semua elemen yang cocok
$("li").each(function(index, element) {
  console.log(index, $(element).text());
  // atau: console.log(index, $(this).text());
});

// .map() — transformasi ke array baru
const texts = $("li").map(function() {
  return $(this).text();
}).get();  // .get() konversi jQuery object ke array biasa

Kesimpulan

jQuery menyederhanakan banyak hal yang verbose di JavaScript native — selektor, manipulasi DOM, event handling, dan AJAX — menjadi API yang ringkas dan konsisten. Meski untuk project baru kamu disarankan pakai JavaScript modern, memahami jQuery tetap penting karena banyak sekali proyek legacy yang masih menggunakannya.

Di artikel berikutnya, kita bahas jQuery Effects dan Animasi — cara membuat transisi dan animasi yang menarik dengan mudah.