Bab 4: Selector jQuery – Panduan Lengkap Memilih Elemen HTML

Bab 4: Selector jQuery – Panduan Lengkap Memilih Elemen HTML

Setelah memahami struktur dasar jQuery, kini saatnya mempelajari salah satu konsep terpenting dalam jQuery, yaitu Selector jQuery. Selector berfungsi untuk memilih elemen HTML yang akan dimanipulasi, diberi efek, atau ditambahkan event.

Tanpa memahami selector jQuery, hampir semua fitur jQuery tidak dapat digunakan secara maksimal. Oleh karena itu, bab ini wajib dipahami oleh pemula.

Apa Itu Selector jQuery?

Selector jQuery adalah cara untuk memilih satu atau lebih elemen HTML berdasarkan tag, id, class, atribut, atau kondisi tertentu.

Struktur dasarnya:

$(selector).aksi();

Contoh:

$("#judul").hide();

Artinya: memilih elemen dengan id="judul" lalu menyembunyikannya.

Selector Berdasarkan Tag HTML

Selector ini digunakan untuk memilih elemen berdasarkan nama tag.

Contoh:

$("p").css("color", "red");

Kode di atas akan mengubah warna semua elemen <p> menjadi merah.

Selector Berdasarkan ID

Selector ID menggunakan tanda # dan hanya memilih satu elemen unik.

Contoh:

$("#header").hide();

Digunakan ketika ingin memanipulasi elemen tertentu saja.

Selector Berdasarkan Class

Selector class menggunakan tanda . dan dapat memilih lebih dari satu elemen.

Contoh:

.box").css("background", "yellow");

Semua elemen dengan class box akan terkena efek.

Selector Kombinasi (Gabungan)

jQuery juga mendukung selector gabungan.

Contoh:

$("div p").hide();

Artinya: memilih semua <p> yang berada di dalam <div>.

$("ul li").css("color", "blue");

Selector Atribut

Selector atribut digunakan untuk memilih elemen berdasarkan atribut HTML.

Contoh:

$("input[type='text']").val("Hello");

Selector this

Selector this merujuk pada elemen yang sedang digunakan.

Contoh:

$("button").click(function(){
  $(this).hide();
});

Saat tombol diklik, hanya tombol tersebut yang disembunyikan.

Selector :first, :last, dan :even

jQuery menyediakan selector tambahan (pseudo selector).

Contoh:

$("li:first").css("color", "red");
$("li:last").css("color", "blue");
$("li:even").css("background", "lightgray");

Selector :odd dan :nth-child()

$("li:odd").css("color", "green");
$("li:nth-child(2)").hide();

Selector ini sangat berguna untuk tabel dan list.

Contoh Lengkap Penggunaan Selector jQuery

<!DOCTYPE html>
<html>
<head>
  <title>Selector jQuery</title>
</head>
<body>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("li:first").css("color", "red");
</script>

</body>
</html>

Kesalahan Umum Saat Menggunakan Selector jQuery

Beberapa kesalahan yang sering terjadi:

  • ❌ Lupa tanda # untuk ID
  • ❌ Lupa tanda . untuk class
  • ❌ Salah penulisan selector
  • ❌ Elemen belum dimuat saat dipanggil

Solusi: gunakan $(document).ready().

Kesimpulan

Pada Bab 4: Selector jQuery, kita telah mempelajari berbagai jenis selector jQuery mulai dari selector dasar hingga pseudo selector. Selector adalah fondasi utama dalam jQuery karena semua aksi dimulai dari pemilihan elemen.

Pada bab berikutnya, kita akan membahas Event jQuery untuk membuat website lebih interaktif.

Related Posts