Setelah pada tutorial sebelumnya kita memahami apa itu jQuery dan cara memasangnya, kini saatnya kita masuk ke inti pembahasannya. Di tutorial kedua ini, kita akan belajar tentang selector dan event yang merupakan pondasi utama dalam menggunakan jQuery.
1. Selector: Memilih Elemen HTML
Selector adalah bagian terpenting dalam jQuery. Fungsinya adalah untuk memilih atau menargetkan elemen-elemen HTML di halaman web yang ingin kita manipulasi. Sintaks dasarnya adalah $() atau jQuery(). Di dalam kurung, kita menempatkan selector.
Sintaksnya sangat mirip dengan CSS.
Contoh-contoh Selector Dasar:
- Berdasarkan ID: Menggunakan tanda
#. Selector ini akan memilih satu elemen unik.JavaScript$("#judul"); // Memilih elemen dengan id="judul" - Berdasarkan Class: Menggunakan tanda
.. Selector ini akan memilih semua elemen dengan class tertentu.JavaScript$(".deskripsi"); // Memilih semua elemen dengan class="deskripsi" - Berdasarkan Tag HTML: Langsung menggunakan nama tag. Selector ini akan memilih semua elemen dengan tag tersebut.
JavaScript
$("p"); // Memilih semua elemen <p> - Selector Universal: Menggunakan tanda
*. Selector ini akan memilih semua elemen di halaman.JavaScript$("*"); // Memilih semua elemen
Contoh Kombinasi Selector:
Kita juga bisa menggabungkan selector untuk penargetan yang lebih spesifik.
$("p.intro"): Memilih semua elemen<p>yang memilikiclass="intro".$("p#teks-khusus"): Memilih elemen<p>yang memilikiid="teks-khusus".$("ul li"): Memilih semua elemen<li>yang berada di dalam elemen<ul>.
2. Event: Menanggapi Interaksi Pengguna
Setelah memilih elemen, langkah selanjutnya adalah menentukan apa yang terjadi saat pengguna berinteraksi dengannya. Interaksi ini disebut event. Event bisa berupa klik mouse, hover, input keyboard, dan banyak lagi.
Sintaks untuk menangani event adalah $(selector).event(function(){ ... });.
Contoh-contoh Event Dasar:
click(): Terjadi saat elemen diklik.JavaScript$("button").click(function(){ alert("Tombol diklik!"); });dblclick(): Terjadi saat elemen diklik dua kali.JavaScript$("h1").dblclick(function(){ $(this).hide(); });mouseenter(): Terjadi saat pointer mouse masuk ke area elemen.JavaScript$(".box").mouseenter(function(){ $(this).css("background-color", "lightblue"); });mouseleave(): Terjadi saat pointer mouse keluar dari area elemen.JavaScript$(".box").mouseleave(function(){ $(this).css("background-color", "white"); });hover(): Singkatan darimouseenter()danmouseleave(). Event ini memiliki dua fungsi.JavaScript$(".box").hover(function(){ // Fungsi untuk mouseenter $(this).css("color", "red"); }, function(){ // Fungsi untuk mouseleave $(this).css("color", "black"); });
3. Latihan Praktik: Selector dan Event
Mari kita gabungkan pengetahuan tentang selector dan event untuk membuat interaksi sederhana.
<!DOCTYPE html>
<html>
<head>
<title>Latihan jQuery Dasar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.kotak {
width: 150px;
height: 150px;
background-color: lightgray;
margin: 10px;
text-align: center;
line-height: 150px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Latihan jQuery</h2>
<div class="kotak" id="kotak1">Klik Saya!</div>
<div class="kotak" id="kotak2">Arahkan Mouse Ke Saya!</div>
<p class="pesan"></p>
<script>
$(document).ready(function(){
// 1. Selector ID dan Event Click
$("#kotak1").click(function(){
$(".pesan").text("Kotak 1 berhasil diklik!");
});
// 2. Selector Class dan Event Mouseenter/Mouseleave
$("#kotak2").mouseenter(function(){
$(this).css("background-color", "yellow");
});
$("#kotak2").mouseleave(function(){
$(this).css("background-color", "lightgray");
});
});
</script>
</body>
</html>
Penjelasan Kode Praktik
$("#kotak1").click(...): Menggunakan selector ID untuk menargetkandivdenganid="kotak1". Ketika div ini diklik, ia menjalankan fungsi yang mengubah teks di dalam elemen denganclass="pesan".$("#kotak2").mouseenter(...): Menggunakan selector ID untuk menargetkandivdenganid="kotak2". Ketika mouse diarahkan ke atasnya, properti CSSbackground-color-nya berubah menjadi kuning.$(this): Kata kunci ini sangat penting. Dalam event handler,$(this)merujuk pada elemen yang sedang menerima event tersebut. Ini membuat kode lebih fleksibel dan reusable.
Dengan memahami selector dan event, kamu sudah memiliki dasar yang kuat untuk mulai membuat website yang interaktif. Pada tutorial berikutnya, kita akan membahas tentang metode dan efek jQuery untuk memanipulasi elemen secara lebih dinamis. Teruslah berlatih!
