Halo teman-teman semuanya, di artikel kedua ini, kita akan mempelajari sintaks dasar jQuery. Ini penting banget karena dengan memahami struktur dasar penulisan jQuery, kita bisa dengan mudah melakukan berbagai manipulasi terhadap elemen HTML, event, efek animasi, dan banyak lagi.
Struktur Sintaks jQuery
Sintaks jQuery secara umum ditulis seperti ini:
$(selector).action();
Penjelasan:
$ adalah simbol jQuery (bisa juga diganti jQuery tapi umumnya pakai $).selector adalah elemen HTML yang ingin kita pilih (mirip seperti CSS).action() adalah aksi atau metode yang ingin kita lakukan pada elemen tersebut.
Contoh:
$("#judul").hide();
Artinya: sembunyikan elemen HTML dengan id="judul".
Mengenal Document Ready
Sebelum kita menjalankan aksi apa pun, pastikan dulu dokumen HTML sudah dimuat sepenuhnya. Caranya:
$(document).ready(function() {
// kode jQuery di sini
});
Atau versi singkatnya:
$(function() {
// kode jQuery di sini
});
Contoh Sintaks Dasar
Berikut beberapa aksi jQuery yang sering digunakan:
-
Menyembunyikan dan Menampilkan Elemen
$("#judul").hide(); // Sembunyikan elemen
$("#judul").show(); // Tampilkan elemen
-
Mengubah Teks atau HTML
$("#judul").text("Halo Dunia!"); // Ubah teks
$("#judul").html("<em>Halo Dunia!</em>"); // Ubah dengan HTML
-
Mengubah Nilai Input
$("#nama").val("John Doe");
-
Mengubah CSS
$("#judul").css("color", "red");
-
Menambahkan atau Menghapus Class
$("#box").addClass("aktif");
$("#box").removeClass("aktif");
Contoh Lengkap HTML + jQuery
Berikut ini contoh lengkap jQuery digabungkan dengan HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Latihan jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="judul">Selamat Datang</h1>
<button id="tombol">Ubah Warna</button>
<script>
$(document).ready(function() {
$("#tombol").click(function() {
$("#judul").css("color", "green");
});
});
</script>
</body>
</html>
Dari penjelasan kode di atas, saat tombol diklik, warna teks di elemen #judul berubah jadi hijau.
Kesimpulan
Pada artikel ini, kita sudah belajar struktur dasar sintaks jQuery mulai dari pemilihan elemen, penulisan aksi/method, dan penggunaan $(document).ready(). Kita juga sudah mencoba berbagai aksi dasar seperti menyembunyikan elemen, mengganti teks, dan mengubah CSS.
Di seri selanjutnya, kita akan membahas lebih dalam tentang Selektor jQuery, yang merupakan bagian penting dalam menargetkan elemen HTML secara akurat.
Terima Kasih