0Pricing
jQuery Academy · Pelajaran

Kelas Semu dan Pemilih Kustom

Pahami kelas semu bawaan seperti :has(), :not(), dan :nth-child(), lalu pelajari cara membuat pemilih kustom sendiri untuk penyaringan elemen yang dapat digunakan ulang.

Kelas Semu dan Pemilih Kustom adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Buka Kekuatan Pseudo-Class

Selamat datang di Pemilih Tingkat Lanjut! Hari ini, kita akan mempelajari pseudo-class, yaitu kata kunci khusus yang ditambahkan ke pemilih untuk menentukan keadaan khusus elemen yang dipilih.

  • Pseudo-class memungkinkan Anda menargetkan elemen yang sulit dipilih menggunakan attribute atau nama HTML standar.
  • Anggaplah pseudo-class sebagai filter dinamis untuk pilihan Anda.

Pseudo-class diawali dengan titik dua (:), seperti :hover atau :first-child.

Menargetkan Berdasarkan Posisi: :nth-child()

Pseudo-class :nth-child() memilih elemen berdasarkan posisinya di antara sekelompok elemen saudara. Fitur ini sangat berguna untuk memberi gaya pada daftar atau baris tabel.

  • :nth-child(n): Memilih anak ke-n.
  • :nth-child(odd): Memilih anak bernomor ganjil.
  • :nth-child(even): Memilih anak bernomor genap.

Penghitungan dimulai dari 1 untuk anak pertama.

Memberi Gaya dengan :nth-child(odd/even)

Mari lihat bagaimana :nth-child(odd) dan :nth-child(even) dapat menerapkan gaya berselang-seling dengan cepat, seperti pola belang pada zebra dalam sebuah daftar.

Cobalah menjalankan contoh ini untuk melihat efeknya:

$(document).ready(function() {
  // Selects odd list items and makes their text blue
  $('li:nth-child(odd)').css('color', 'blue');
  // Selects even list items and makes their text green
  $('li:nth-child(even)').css('color', 'green');
});

// HTML Structure (imagine this is in your page):
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
//   <li>Item 4</li>
// </ul>

Rumus Lanjutan :nth-child()

Anda dapat menggunakan rumus yang lebih kompleks di dalam :nth-child(), seperti An+B. Di sini, A menunjukkan ukuran siklus, sedangkan B adalah pergeseran.

  • :nth-child(3n): Memilih setiap anak ke-3 (ke-3, ke-6, ke-9...).
  • :nth-child(3n+1): Memilih anak ke-1, ke-4, ke-7, dan seterusnya.

Dengan demikian, Anda dapat melakukan pemilihan berdasarkan interval dengan sangat presisi.

Mengecualikan Elemen dengan :not()

Pseudo-class :not() memungkinkan Anda mengecualikan elemen tertentu dari suatu pemilihan. Ibaratnya Anda mengatakan, "pilih semua paragraf, kecuali yang memiliki class 'intro'".

  • Fitur ini menerima selector lain sebagai argumen: :not(selector).
  • Fitur ini sangat berguna untuk menyaring pemilihan yang sudah ada tanpa harus menulis pemilihan baru yang kompleks.

Menggunakan :not() dalam Praktik

Bayangkan Anda ingin menambahkan border ke semua item daftar kecuali item yang paling pertama. :not(:first-child) sangat tepat untuk keperluan ini.

Lihat bagaimana :not() membantu kita mengecualikan item pertama:

$(document).ready(function() {
  // Selects all list items that are NOT the first child
  $('li:not(:first-child)').css('border-top', '1px solid gray');
});

// HTML Structure:
// <ul>
//   <li>First Item</li>
//   <li>Second Item</li>
//   <li>Third Item</li>
// </ul>

Memilih Elemen Induk dengan :has()

Pseudo-class :has() memiliki keunikan: pseudo-class ini memilih sebuah elemen jika elemen tersebut berisi setidaknya satu elemen yang cocok dengan selector yang diberikan sebagai argumen.

  • Fitur ini seperti meminta, "Berikan semua <div> yang memiliki tag <p> di dalamnya."
  • Dengan demikian, Anda dapat memilih elemen induk berdasarkan karakteristik anak-anaknya.

Menyoroti dengan :has()

Misalnya, Anda ingin menyoroti hanya container <div> yang berisi gambar. :has('img') dapat melakukannya secara efisien.

Jalankan kode ini untuk melihat div yang mendapatkan border:

$(document).ready(function() {
  // Selects divs that contain an image and adds a border
  $('div:has(img)').css('border', '2px solid red');
});

// HTML Structure:
// <div id="container1">
//   <p>Text only</p>
// </div>
// <div id="container2">
//   <img src="example.png" alt="An image">
//   <p>Text and image</p>
// </div>

Selector Kustom: Memperluas jQuery

Bagaimana jika selector bawaan jQuery tidak cukup? Anda dapat membuat pseudo-selector kustom sendiri! Dengan begitu, Anda dapat menyaring elemen berdasarkan logika kustom yang sangat spesifik.

  • Daftarkan selector tersebut menggunakan jQuery.expr[':'].
  • Dengan demikian, kode pemilihan Anda menjadi lebih bersih dan dapat digunakan kembali.

Ini adalah fitur tingkat lanjut untuk kebutuhan penyaringan yang benar-benar unik.

Membuat :contains-word() Kustom

Mari buat selector kustom bernama :contains-word() yang menemukan elemen yang berisi kata utuh tertentu, bukan sekadar substring.

Contoh ini mendefinisikan :contains-word() lalu menggunakannya:

$(document).ready(function() {
  // Define a custom pseudo-selector ':contains-word'
  $.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
    var pattern = new RegExp('\b' + word + '\b', 'i');
    return function(elem) {
      return pattern.test($(elem).text());
    };
  });

  // Use the custom selector to find paragraphs containing 'hello'
  $('p:contains-word("hello")').css('background-color', 'yellow');
});

// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>

Tantangan Pseudo-Class

Perhatikan HTML berikut:

<ul>
  <li class="special">One</li>
  <li>Two</li>
  <li class="special">Three</li>
  <li>Four</li>
  <li class="special">Five</li>
</ul>

Selector jQuery mana yang akan menargetkan hanya 'Two' dan 'Four'?

Ringkasan: Pseudo-Class & Selector Kustom

Anda telah menguasai teknik pemilihan jQuery yang andal!

  • Pseudo-class (seperti :nth-child(), :not(), :has()) memungkinkan Anda memilih elemen berdasarkan statusnya atau hubungannya dengan elemen lain.
  • :nth-child() menargetkan elemen berdasarkan posisi, termasuk menggunakan rumus.
  • :not() mengecualikan elemen dari suatu pemilihan.
  • :has() memilih elemen induk berdasarkan anak-anaknya.
  • Anda bahkan dapat membuat pseudo-selector kustom sendiri dengan jQuery.expr[':'] untuk penyaringan yang sangat spesifik.

Teruslah berlatih menggunakan fitur-fitur ini untuk menyempurnakan penargetan DOM Anda!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kelas Semu dan Pemilih Kustom” gratis?

Ya — teks lengkap “Kelas Semu dan Pemilih Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Kelas Semu dan Pemilih Kustom”?

Pahami kelas semu bawaan seperti :has(), :not(), dan :nth-child(), lalu pelajari cara membuat pemilih kustom sendiri untuk penyaringan elemen yang dapat digunakan ulang. Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Kelas Semu dan Pemilih Kustom” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Pemilih Atribut Tingkat Lanjut
  2. Kelas Semu dan Pemilih Kustom
  3. Teknik Traversal DOM yang Efisien
← Kembali ke jQuery Academy