Halo teman-teman semuanya, di seri pertama ini kita akan berkenalan dengan jQuery. jQuery adalah salah satu library JavaScript yang sangat populer dan banyak digunakan untuk mempermudah manipulasi DOM, menangani event, membuat animasi, dan berinteraksi dengan server melalui Ajax.
jQuery cocok banget buat kita yang ingin membuat halaman web lebih interaktif dan dinamis tanpa harus menulis kode JavaScript yang terlalu panjang atau kompleks.
Apa Itu jQuery?
jQuery adalah library JavaScript open-source yang dirancang untuk menyederhanakan penulisan JavaScript. jQuery pertama kali dirilis oleh John Resig pada tahun 2006 dan sejak itu menjadi salah satu tool favorit para web developer.
Dengan jQuery, kita bisa menulis kode JavaScript yang kompleks dengan sintaks yang lebih singkat dan mudah dibaca.
Contoh:
// JavaScript biasa
document.getElementById("judul").style.color = "red";
// Dengan jQuery
$("#judul").css("color", "red");
Kenapa Harus Belajar jQuery?
Meskipun sekarang banyak framework modern seperti React, Vue, dan Angular, jQuery masih banyak digunakan di berbagai proyek, terutama proyek legacy atau sistem yang sudah berjalan lama. Beberapa alasan kenapa belajar jQuery tetap penting:
- Sintaks yang sederhana dan ringkas
- Kompatibilitas tinggi dengan berbagai browser
- Banyak digunakan di CMS populer seperti WordPress
- Mudah dipelajari untuk pemula
Langkah 1 - Cara Menggunakan jQuery
Ada dua cara utama untuk mulai menggunakan jQuery di proyek kita:
-
Opsi 1: Menggunakan CDN (Rekomendasi untuk Pemula)
Cukup tambahkan baris berikut ke dalam tag <head> atau sebelum </body> di HTML:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Dengan cara ini, kita tidak perlu mengunduh file jQuery secara manual. Asalkan ada koneksi internet, jQuery akan langsung bisa digunakan di halaman web kita.
-
Opsi 2: Unduh Manual dan Hosting Sendiri
-
Kunjungi situs resmi jQuery: https://jquery.com/download/
-
Pilih versi Compressed Production dan unduh file .js-nya.
-
Simpan file tersebut di folder proyek kita, misalnya js/jquery.min.js.
-
Lalu tambahkan ke file HTML:
<script src="js/jquery.min.js"></script>
Langkah 2 - Hello World Dengan jQuery
Sekarang kita coba bikin halaman HTML sederhana dan pakai jQuery.
Struktur Folder Proyek:
belajar-jquery/
├── index.html
Isi index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Hello jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="judul">Halo Dunia!</h1>
<script>
$(document).ready(function() {
$("#judul").css("color", "blue");
});
</script>
</body>
</html>
Penjelasan
$(document).ready() memastikan kode dijalankan setelah seluruh dokumen siap.$("#judul") memilih elemen dengan id judul..css("color", "blue") mengubah warnanya menjadi biru.
Kesimpulan
Di artikel ini, kita sudah berkenalan dengan jQuery dan belajar bagaimana cara menggunakannya baik lewat CDN maupun dengan mengunduh manual. Kita juga sudah membuat contoh sederhana “Hello World” menggunakan jQuery.
Di seri berikutnya kita akan belajar tentang Sintaks Dasar jQuery, supaya kita bisa lebih nyaman dalam menulis dan membaca kode jQuery.
Terima kasih