Halo teman-teman semuanya, di artikel ketiga ini, kita akan membahas selektor jQuery. Ini adalah salah satu konsep paling penting dalam jQuery, karena dengan selektor, kita bisa memilih elemen HTML yang ingin kita manipulasi.
Kalau kita sudah familiar dengan CSS selector, maka kita akan cepat banget paham jQuery selector, karena konsepnya hampir sama!
Apa Itu Selektor?
Selektor di jQuery digunakan untuk "menargetkan" elemen HTML yang ingin kita ubah, tambahkan efek, ubah gaya, ambil datanya, dan sebagainya.
Sintaks dasarnya:
$(selector)
Jenis-Jenis Selektor jQuery
Berikut adalah beberapa jenis selektor yang paling sering digunakan:
-
Selektor berdasarkan ID
Gunakan tanda # untuk memilih elemen berdasarkan id.
<h1 id="judul">Halo Dunia</h1>
$("#judul").text("Teks baru!");
-
Selektor berdasarkan Class
Gunakan tanda . untuk memilih elemen berdasarkan class.
<p class="deskripsi">Ini deskripsi.</p>
$(".deskripsi").css("color", "blue");
-
Selektor berdasarkan Tag HTML
<p>Paragraf 1</p>
<p>Paragraf 2</p>
$("p").hide(); // Menyembunyikan semua tag <p>
-
Selektor Gabungan
<h1 class="judul">Judul</h1>
<p id="paragraf">Paragraf</p>
$("h1, #paragraf").fadeOut();
-
Selektor Hierarki (Parent > Child)
<div>
<p>Ini di dalam div</p>
</div>
$("div p").css("font-weight", "bold");
-
Selektor Atribut
<input type="text" name="email">
$("input[name='email']").val("contoh@email.com");
-
Selektor Khusus (Pseudo-selector)
-
:first - memilih elemen pertama
-
:last - memilih elemen terakhir
-
:even dan :odd - elemen genap/ganjil
$("p:first").css("color", "red");
$("li:odd").css("background-color", "#eee");
Contoh Lengkap
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Selektor jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="judul">Judul Utama</h1>
<p class="teks">Teks pertama</p>
<p class="teks">Teks kedua</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
$(document).ready(function() {
$("#judul").css("color", "green");
$(".teks").css("font-style", "italic");
$("li:odd").css("background-color", "#f0f0f0");
});
</script>
</body>
</html>
Kesimpulan
Di artikel ini kita telah belajar berbagai macam selektor jQuery, mulai dari ID, class, tag HTML, hingga selektor khusus seperti :first dan :odd. Ini akan jadi dasar penting untuk manipulasi elemen di artikel-artikel berikutnya.
Di seri selanjutnya, kita akan bahas tentang Manipulasi DOM di jQuery, seperti mengganti teks, menambahkan elemen, dan lain-lain.
Terima Kasih