PricingLoginStart free
jQuery Academy · Pelajaran

Membina Pemilih Pseudo Tersuai

Pelajari cara mendaftarkan pemilih pseudo tersuai sendiri dengan jQuery.expr[':'] untuk memudahkan logik pemilihan elemen kompleks dan meningkatkan kebolehbacaan kod.

Pelajaran 1 daripada 312 langkah

Membina Pemilih Pseudo Tersuai ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran jQuery Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Mengapa Pemilih Tersuai?

Pemilih terbina dalam jQuery sangat berkuasa, tetapi kadangkala Anda menghadapi keperluan penapisan tertentu yang kompleks atau berulang.

Di sinilah pemilih pseudo tersuai berguna! Pemilih ini membolehkan Anda mentakrifkan penapis khusus sendiri, memudahkan logik pemilihan yang kompleks serta menjadikan kod lebih kemas dan mudah dibaca.

Apabila Pemilih Lalai Tidak Mencukupi

Bayangkan Anda sering perlu memilih semua elemen <div> yang bukan sahaja mempunyai kelas tertentu, tetapi juga atribut data-status yang ditetapkan kepada 'active'.

Walaupun Anda boleh menggabungkan pemilih standard, cara ini boleh menjadi panjang dan kurang intuitif jika logiknya lebih rumit atau jika Anda perlu menggunakannya berulang kali dalam aplikasi.

Kenali jQuery.expr[':']

jQuery.expr[':'] ialah objek tempat Anda mendaftarkan pemilih pseudo tersuai. Anggaplah ia sebagai peluasan kepada enjin pemilihan teras jQuery.

Apabila jQuery menemui pemilih seperti :myCustomSelector, jQuery mencari myCustomSelector dalam objek ini. Anda menetapkan fungsi kepada kunci (nama pemilih Anda), kemudian jQuery melaksanakan fungsi itu untuk setiap elemen yang diuji.

Mentakrifkan `:has-tooltip`

Mari takrifkan pemilih tersuai mudah, :has-tooltip, yang mengenal pasti elemen dengan atribut title. Beginilah cara Anda menambahkannya pada jQuery.expr[':'].

Fungsi yang Anda sediakan menerima DOM elem semasa yang sedang diuji. Fungsi itu harus mengembalikan true jika elemen tersebut sepadan dengan kriteria Anda, dan false jika sebaliknya.

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

Menggunakan Pemilih Tersuai Anda

Setelah pemilih :has-tooltip ditakrifkan, kita boleh menggunakannya seperti mana-mana pemilih pseudo jQuery yang lain! Cuba jalankan contoh di bawah.

Contoh ini akan menyerlahkan semua elemen yang mempunyai atribut title, sekali gus menunjukkan keupayaan penapis tersuai baharu 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`

Apabila fungsi pemilih tersuai Anda dilaksanakan, fungsi itu menerima tiga argumen penting:

  • elem: Elemen DOM semasa yang sedang diuji.
  • i: Indeks elem dalam set elemen yang sedang diulangi oleh jQuery.
  • match: Tatasusunan yang mengandungi hasil daripada ungkapan nalar yang digunakan untuk menghuraikan pemilih. Ini penting bagi pemilih yang menerima argumen.

Untuk pemilih mudah, Anda biasanya hanya akan menggunakan argumen elem.

Pemilih Berdasarkan Atribut Data

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

Nilai 'active' (argumen dalam kurungan) akan ditemui dalam match[3]. Hal ini membolehkan pemilih Anda bersifat dinamik!

<!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]`

Tatasusunan match ialah hasil penghuraian ungkapan nalar dalaman jQuery terhadap rentetan pemilih anda. Bagi pemilih seperti :yourSelector(argument), bahagian argument biasanya ditangkap dalam match[3].

Mekanisme ini amat penting untuk mencipta pemilih tersuai yang dinamik dan fleksibel, yang boleh menerima parameter, menjadikannya lebih boleh digunakan semula dan berkuasa untuk pelbagai senario penapisan.

Logik Lanjutan: `:containsExact`

Mari bina pemilih yang lebih lanjutan: :containsExact(text). Tidak seperti :contains() lalai jQuery, pemilih ini hanya akan sepadan dengan elemen yang keseluruhan kandungan teksnya (tidak termasuk elemen anak) sama tepat dengan teks yang diberikan.

Hal ini biasanya melibatkan perbandingan teliti antara $(elem).text().trim() untuk memastikan padanan 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>

Petua untuk Pemilih Tersuai

Ingat amalan terbaik berikut semasa mencipta pemilih tersuai:

  • Prestasi: Logik yang kompleks boleh menjejaskan prestasi, terutamanya pada DOM yang besar. Optimumkan fungsi pemilih anda.
  • Kejelasan: Namakan pemilih anda dengan jelas supaya tujuannya dapat difahami serta-merta oleh sesiapa yang membaca kod anda.
  • Kebolehgunaan semula: Reka bentuknya supaya cukup umum untuk berguna dalam pelbagai konteks, bukan hanya satu senario tertentu.
  • Elakkan Konflik: Pilih nama yang unik untuk mengelakkan pertembungan dengan pemilih jQuery akan datang atau pemalam lain yang mungkin anda gunakan.

Cabaran Pemilih Tersuai

Anda mahu mencipta pemilih tersuai :is-empty yang memilih elemen yang tiada kandungan teks dan tiada elemen anak. Pemilih ini serupa dengan pemilih terbina dalam jQuery, iaitu :empty.

Antara petikan kod berikut, yang manakah mentakrifkan pseudo-pemilih tersuai ini dengan betul?

Jawab dalam pelajaran interaktif

Imbas Kembali: Pemilih Tersuai

Dalam pelajaran ini, anda telah mempelajari cara melanjutkan keupayaan pemilihan jQuery yang berkuasa dengan mencipta pseudo-pemilih tersuai sendiri menggunakan jQuery.expr[':'].

Anda telah meneroka cara mentakrifkan pemilih mudah, menghantar argumen kepadanya melalui tatasusunan match, dan menggunakannya untuk memudahkan logik penapisan yang kompleks, sekali gus menjadikan kod jQuery anda lebih mudah dibaca, diselenggara dan cekap.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
22
Pelajaran
48
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Membina Pemilih Pseudo Tersuai” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Membina Pemilih Pseudo Tersuai”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Membina Pemilih Pseudo Tersuai”?

Pelajari cara mendaftarkan pemilih pseudo tersuai sendiri dengan jQuery.expr[':'] untuk memudahkan logik pemilihan elemen kompleks dan meningkatkan kebolehbacaan kod. Anda berlatih jQuery Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan jQuery Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran jQuery Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 3.

Berapa lamakah pelajaran “Membina Pemilih Pseudo Tersuai” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Membina Pemilih Pseudo Tersuai
  2. Penapisan Lanjutan dengan .filter()
  3. Mengecualikan Elemen dengan .not()
← Kembali ke jQuery Academy