jQuery Academy · Pelajaran

Membangun Pemilih Semu Kustom

Pelajari cara mendaftarkan pemilih semu kustom Anda sendiri dengan jQuery.expr[':'] untuk menyederhanakan logika pemilihan elemen yang kompleks dan meningkatkan keterbacaan kode.

Pelajaran 1 dari 312 langkah

Membangun Pemilih Semu Kustom adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Mengapa Menggunakan Pemilih Kustom?

Pemilih bawaan jQuery sangat ampuh, tetapi terkadang Anda menemukan kebutuhan penyaringan tertentu yang rumit atau berulang.

Di sinilah pemilih semu kustom berguna! Pemilih ini memungkinkan Anda menentukan penyaring khusus sendiri, menyederhanakan logika pemilihan yang rumit, serta membuat kode lebih bersih dan mudah dibaca.

Ketika Pemilih Bawaan Tidak Memadai

Bayangkan Anda sering perlu memilih semua elemen <div> yang tidak hanya memiliki class tertentu, tetapi juga atribut data-status yang ditetapkan ke 'active'.

Anda memang dapat menggabungkan pemilih standar, tetapi cara ini bisa menjadi panjang dan kurang intuitif jika logikanya lebih rumit atau jika perlu diterapkan berulang kali di seluruh aplikasi.

Mengenal jQuery.expr[':']

jQuery.expr[':'] adalah objek tempat Anda mendaftarkan pemilih semu kustom. Anggaplah ini sebagai perluasan mesin pemilihan inti jQuery.

Ketika jQuery menemukan pemilih seperti :myCustomSelector, jQuery mencari myCustomSelector dalam objek ini. Anda menetapkan fungsi ke sebuah kunci (nama pemilih Anda), lalu jQuery menjalankan fungsi tersebut untuk setiap elemen yang diuji.

Mendefinisikan `:has-tooltip`

Mari kita definisikan pemilih kustom sederhana, :has-tooltip, yang mengidentifikasi elemen dengan atribut title. Beginilah cara menambahkannya ke jQuery.expr[':'].

Fungsi yang Anda berikan menerima DOM elem saat ini yang sedang diuji. Fungsi tersebut harus mengembalikan true jika elemen sesuai dengan kriteria Anda, dan false jika tidak.

jQuery.expr[':'].hasTooltip = function(elem) {
  // Check if the element has a 'title' attribute
  return !!$(elem).attr('title');
};

Menggunakan Pemilih Kustom Anda

Setelah pemilih :has-tooltip ditentukan, kita dapat menggunakannya seperti pemilih semu jQuery lainnya! Cobalah menjalankan contoh di bawah ini.

Contoh tersebut akan menyoroti semua elemen yang memiliki atribut title, sehingga menunjukkan kemampuan penyaring kustom baru Anda.

<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .highlight {
    border: 2px solid green;
    background-color: #e0ffe0;
  }
</style>
</head>
<body>
  <p title="This is a tooltip">Paragraph with tooltip</p>
  <div id="no-tooltip">Just a div</div>
  <span title="Another tooltip here">Span with tooltip</span>

  <script>
    jQuery.expr[':'].hasTooltip = function(elem) {
      return !!$(elem).attr('title');
    };

    $(document).ready(function() {
      $('p:has-tooltip, span:has-tooltip').addClass('highlight');
    });
  </script>
</body>
</html>

Argumen `elem`, `i`, dan `match`

Ketika fungsi pemilih kustom Anda dijalankan, fungsi tersebut menerima tiga argumen penting:

elem: Elemen DOM saat ini yang sedang diuji.
i: Indeks elem dalam kumpulan elemen yang sedang diiterasi oleh jQuery.
match: Larik yang berisi hasil dari ekspresi reguler yang digunakan untuk mengurai pemilih. Argumen ini penting untuk pemilih yang menerima argumen.

Untuk pemilih sederhana, Anda terutama akan menggunakan argumen elem.

Pemilih Berdasarkan Atribut Data

Mari kita buat pemilih :data-status(active) untuk menemukan elemen yang atribut data-status-nya sama dengan 'active'. Ini menunjukkan cara menggunakan argumen match.

Nilai 'active' (argumen di dalam tanda kurung) akan ditemukan di match[3]. Dengan demikian, pemilih Anda dapat bersifat dinamis!

<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .active-item {
    background-color: lightgreen;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div data-status="active">Item 1 (Active)</div>
  <div data-status="inactive">Item 2 (Inactive)</div>
  <p data-status="active">Item 3 (Active)</p>
  <span>Item 4 (No Status)</span>

  <script>
    jQuery.expr[':'].dataStatus = function(elem, i, match) {
      const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
      const actualStatus = $(elem).data('status');
      return actualStatus === expectedStatus;
    };

    $(document).ready(function() {
      $(':data-status(active)').addClass('active-item');
    });
  </script>
</body>
</html>

Memahami `match[3]`

Array match merupakan hasil penguraian ekspresi reguler internal jQuery terhadap string selektor Anda. Untuk selektor seperti :yourSelector(argument), bagian argument biasanya ditangkap dalam match[3].

Mekanisme ini sangat penting untuk membuat selektor khusus yang dinamis dan fleksibel, yang dapat menerima parameter sehingga lebih mudah digunakan kembali dan lebih andal untuk berbagai skenario penyaringan.

Logika Lanjutan: `:containsExact`

Mari kita buat selektor yang lebih lanjutan: :containsExact(text). Berbeda dari :contains() bawaan jQuery, selektor ini hanya akan mencocokkan elemen yang seluruh isi teksnya (tidak termasuk elemen anak) sama persis dengan teks yang diberikan.

Hal ini sering memerlukan perbandingan yang cermat antara $(elem).text().trim() untuk memastikan kecocokan yang tepat.

<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .exact-match {
    font-weight: bold;
    color: blue;
    background-color: #e0f0ff;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div>Hello World</div>
  <div>Hello there!</div>
  <p>Hello</p>
  <span>World</span>

  <script>
    jQuery.expr[':'].containsExact = function(elem, i, match) {
      const searchText = match[3]; // The text inside the parentheses
      const elementText = $(elem).text().trim();
      return elementText === searchText;
    };

    $(document).ready(function() {
      $(':containsExact(Hello World)').addClass('exact-match');
    });
  </script>
</body>
</html>

Kiat untuk Selektor Khusus

Ingat praktik terbaik berikut saat membuat selektor khusus:

Performa: Logika yang rumit dapat memengaruhi performa, terutama pada DOM berukuran besar. Optimalkan fungsi selektor Anda.
Kejelasan: Beri nama selektor Anda dengan jelas agar tujuannya segera dipahami oleh siapa pun yang membaca kode Anda.
Dapat digunakan kembali: Rancang selektor agar cukup umum untuk berguna dalam berbagai konteks, bukan hanya satu skenario tertentu.
Hindari Konflik: Pilih nama yang unik untuk mencegah benturan dengan selektor jQuery mendatang atau plugin lain yang mungkin Anda gunakan.

Tantangan Selektor Khusus

Anda ingin membuat selektor khusus :is-empty yang memilih elemen tanpa isi teks dan tanpa elemen anak. Selektor ini mirip dengan selektor bawaan jQuery, yaitu :empty.

Manakah cuplikan kode berikut yang dengan benar mendefinisikan pseudo-selektor khusus ini?

Jawab di pelajaran interaktif

Rangkuman: Selektor Khusus

Dalam pelajaran ini, Anda mempelajari cara memperluas kemampuan pemilihan jQuery yang andal dengan membuat pseudo-selektor khusus Anda sendiri menggunakan jQuery.expr[':'].

Anda mempelajari cara mendefinisikan selektor sederhana, meneruskan argumen kepadanya melalui array match, dan menerapkannya untuk menyederhanakan logika penyaringan yang rumit, sehingga kode jQuery Anda menjadi lebih mudah dibaca, dipelihara, dan efisien.

Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 48

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Pemilih Semu Kustom” gratis?

Ya — teks lengkap “Membangun Pemilih Semu 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 “Membangun Pemilih Semu Kustom”?

Pelajari cara mendaftarkan pemilih semu kustom Anda sendiri dengan jQuery.expr[':'] untuk menyederhanakan logika pemilihan elemen yang kompleks dan meningkatkan keterbacaan kode. 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 1 dari 3.

Berapa lama pelajaran “Membangun Pemilih Semu 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

Membangun Pemilih Semu Kustom
Penyaringan Tingkat Lanjut dengan .filter()
Mengecualikan Elemen dengan .not()

← Kembali ke jQuery Academy