Tutorial jQuery untuk Pemula: Panduan Lengkap Step-by-Step

Tutorial jQuery untuk Pemula: Panduan Lengkap Step-by-Step

Update 01/12/25 · Read 5 min

jQuery adalah salah satu library JavaScript paling populer yang memudahkan pengembangan website dengan sintaks yang lebih sederhana dibandingkan JavaScript murni.

Framework Jquery mungkin dianggap usang, jadul oleh programmer jaman now, tp ingat logika sederhana, code simple, mudah dipahami oleh pemula serta function timelest dari tahun ke tahun menjadi jquery aman untuk produksi APP.

Bukan dari apa aplikasi website dibuat namun hasil akhir dan manfaat itu lebih utama. secara nyata performa JQUARY masih tangguh dan cepat versi UI.

Baca:

Benchmark JavaScript Modern: Vue, React, dan jQuery

Jika kamu baru mengenal jQuery, artikel ini akan membimbingmu dari dasar hingga pembuatan interaksi sederhana di halaman web.

Apa itu jQuery?

jQuery adalah library JavaScript open-source yang dirancang untuk menyederhanakan manipulasi DOM (Document Object Model), penanganan event, animasi, dan AJAX. Dibuat oleh John Resig pada tahun 2006, jQuery memungkinkan developer menulis kode lebih singkat dan mudah dipahami.

Kelebihan jQuery

  • Mudah digunakan: Sintaks sederhana dibanding JavaScript murni.

  • Cross-browser: Menyelesaikan masalah kompatibilitas browser.

  • Animasi dan efek: Memiliki fungsi built-in untuk animasi.

  • AJAX: Memudahkan pengambilan data tanpa reload halaman.

Cara Menggunakan jQuery

Sebelum mulai, kamu harus menyertakan library jQuery di halaman HTML kamu. Ada dua cara utama:

1. Menggunakan CDN

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Pemula</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<h1>Hello, jQuery!</h1>
</body>
</html>

2. Menggunakan File Lokal

Download jQuery dari jquery.com lalu simpan di folder proyekmu, misalnya js/jquery.min.js:

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

Struktur Dasar jQuery

Sintaks dasar jQuery adalah:

$(selector).action();

  • $ → simbol jQuery

  • selector → memilih elemen HTML

  • action() → aksi yang dilakukan pada elemen

Contoh:

$(document).ready(function() {
$("h1").text("Selamat Datang di jQuery!");
});

Penjelasan:

  • $(document).ready() memastikan kode dijalankan setelah seluruh halaman dimuat.

  • $("h1") memilih semua elemen <h1>.

  • .text() mengganti teks elemen tersebut.

Selector jQuery

jQuery memiliki berbagai selector, mirip CSS.

1. Selector Dasar

$("#idElement") // Memilih elemen dengan id
$(".classElement") // Memilih elemen dengan class
$("p") // Memilih semua elemen <p>

2. Selector Lanjutan

$("div:first") // Memilih div pertama
$("li:even") // Memilih li genap
$("input[type='text']") // Memilih input type text

Manipulasi DOM

jQuery memudahkan menambah, menghapus, atau mengubah elemen HTML.

READ :  Mulai dari Nol: Panduan Lengkap Vue.js untuk Pemula

1. Mengubah Konten

$("#judul").html("<strong>Judul Baru</strong>"); // Mengubah HTML
$("#paragraf").text("Paragraf baru"); // Mengubah teks

2. Menambah Elemen

$("#container").append("<p>Paragraf tambahan</p>"); // Tambah di akhir
$("#container").prepend("<p>Paragraf di awal</p>"); // Tambah di awal

3. Menghapus Elemen

$("#hapus").remove(); // Menghapus elemen

4. Mengubah Atribut

$("#link").attr("href", "https://www.google.com");

Event Handling

jQuery mempermudah penanganan event dibanding JavaScript murni.

1. Click Event

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

2. Hover Event

$("#hoverBox").hover(
function() { $(this).css("background-color", "yellow"); },
function() { $(this).css("background-color", "white"); }
);

3. Event Lainnya

  • dblclick() → klik ganda

  • focus() → fokus pada input

  • blur() → kehilangan fokus

  • keyup(), keydown() → keyboard event

Efek dan Animasi

jQuery memiliki banyak efek bawaan.

1. Show & Hide

$("#tampil").click(function() {
$("#box").show();
});
$("#sembunyi").click(function() {
$("#box").hide();
});

2. Fade

$("#fadeIn").click(function() {
$("#box").fadeIn();
});
$("#fadeOut").click(function() {
$("#box").fadeOut();
});

3. Slide

$("#slideDown").click(function() {
$("#menu").slideDown();
});
$("#slideUp").click(function() {
$("#menu").slideUp();
});

4. Animate

$("#gerak").click(function() {
$("#kotak").animate({left: '250px', opacity: 0.5}, 1000);
});

AJAX dengan jQuery

AJAX memungkinkan kita mengambil data dari server tanpa reload halaman.

Contoh Dasar AJAX

$("#loadData").click(function() {
$("#dataContainer").load("data.txt");
});

Contoh AJAX dengan $.ajax

$.ajax({
url: "data.json",
type: "GET",
dataType: "json",
success: function(result) {
$("#hasil").html(result.nama + " - " + result.umur);
},
error: function(error) {
alert("Gagal memuat data!");
}
});

Tips jQuery untuk Pemula

  1. Gunakan selector spesifik untuk menghindari memilih terlalu banyak elemen.

  2. Gunakan chaining untuk menulis kode lebih singkat:

$("#box").css("color", "red").slideUp(1000).slideDown(1000);

  1. Periksa konsol browser jika kode tidak berjalan.

  2. Jangan lupa $(document).ready() agar DOM sudah siap sebelum manipulasi.

Contoh Proyek Mini: To-Do List

HTML:

<input type="text" id="taskInput" placeholder="Tambah tugas...">
<button id="addTask">Tambah</button>
<ul id="taskList"></ul>

jQuery:

$(document).ready(function() {
$("#addTask").click(function() {
var task = $("#taskInput").val();
if(task !== "") {
$("#taskList").append("<li>" + task + " <button class='hapus'>Hapus</button></li>");
$("#taskInput").val("");
}
});$("#taskList").on("click", ".hapus", function() {
$(this).parent().remove();
});
});

Penjelasan:

  • Menambahkan item ke list.

  • Menghapus item dengan tombol “Hapus”.

  • Menggunakan event delegation (on) agar tombol yang baru ditambahkan juga bisa diklik.

READ :  JQuery get id value dinamis

Kesimpulan

jQuery adalah library powerful yang membuat pengembangan web lebih cepat dan mudah, terutama untuk pemula. Dengan memahami selector, manipulasi DOM, event, efek, dan AJAX, kamu bisa membuat interaksi web yang dinamis tanpa harus menulis banyak kode JavaScript murni.

Mulailah dengan proyek kecil seperti To-Do List atau gallery sederhana, kemudian tingkatkan ke fitur yang lebih kompleks.

Meskipun saat ini banyak framework modern seperti React atau Vue yang populer, jQuery tetap relevan untuk proyek cepat, plugin legacy, atau website sederhana. Menguasainya akan memberikan dasar kuat untuk memahami JavaScript lebih lanjut.