jQuery Academy · Pelajaran

Kelas Pseudo dan Pemilih Tersuai

Fahami kelas pseudo terbina dalam seperti :has(), :not() dan :nth-child(), kemudian pelajari cara mencipta pemilih tersuai sendiri untuk penapisan elemen yang boleh digunakan semula.

Pelajaran 2 daripada 312 langkah

Kelas Pseudo dan Pemilih Tersuai ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 2 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.

Buka Kuasa dengan Pseudo-Class

Selamat datang ke Pemilih Lanjutan! Hari ini, kita akan meneroka pseudo-class, iaitu kata kunci khas yang ditambahkan pada pemilih untuk menentukan keadaan khas elemen yang dipilih.

Pseudo-class membolehkan Anda menyasarkan elemen yang sukar dipilih menggunakan attribute atau nama HTML standard.
Anggaplah pseudo-class sebagai penapis dinamik untuk pilihan Anda.

Pseudo-class bermula dengan titik bertindih (:), seperti :hover atau :first-child.

Sasarkan Mengikut Kedudukan: :nth-child()

Kelas pseudo :nth-child() memilih elemen berdasarkan kedudukannya dalam kumpulan elemen adik-beradik. Ia amat berguna untuk menggayakan senarai atau baris jadual.

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

Pengiraan bermula daripada 1 untuk anak pertama.

Menggayakan dengan :nth-child(odd/even)

Mari lihat cara :nth-child(odd) dan :nth-child(even) boleh digunakan dengan pantas untuk menerapkan gaya berselang-seli, seperti corak belang pada senarai.

Cuba jalankan contoh ini untuk melihat kesannya:

$(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>

Formula Lanjutan :nth-child()

Anda boleh menggunakan formula yang lebih kompleks dalam :nth-child(), seperti An+B. Di sini, A mewakili saiz kitaran, manakala B ialah anjakan.

: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...

Ini membolehkan pemilihan berdasarkan sela dilakukan dengan sangat tepat.

Mengecualikan Elemen dengan :not()

Kelas pseudo :not() membolehkan anda mengecualikan elemen tertentu daripada pemilihan. Ia seperti berkata, "pilih semua perenggan, kecuali yang mempunyai kelas 'intro'".

Ia menerima pemilih lain sebagai argumen: :not(selector).
Ini berguna untuk memperhalus pemilihan sedia ada tanpa menulis pemilihan baharu yang kompleks.

Menggunakan :not() dalam Amalan

Bayangkan anda mahu menambahkan jidar pada semua item senarai kecuali item yang paling pertama. :not(:first-child) sangat sesuai untuk tujuan ini.

Lihat cara :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 Induk dengan :has()

Kelas pseudo :has() adalah unik: ia memilih sesuatu elemen jika elemen itu mengandungi sekurang-kurangnya satu elemen yang sepadan dengan pemilih yang diberikan sebagai argumen.

Ia seperti bertanya, "Berikan saya semua <div> yang mempunyai tag <p> di dalamnya."
Ini membolehkan anda memilih elemen induk berdasarkan ciri-ciri anaknya.

Menyerlahkan dengan :has()

Andaikan anda mahu menyerlahkan hanya bekas <div> yang mengandungi imej. :has('img') boleh melakukannya dengan cekap.

Jalankan kod ini untuk melihat div yang mendapat jidar:

$(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>

Pemilih Tersuai: Melanjutkan jQuery

Bagaimana jika pemilih terbina dalam jQuery tidak mencukupi? Anda boleh mencipta pemilih pseudo tersuai sendiri! Ini membolehkan anda menapis elemen berdasarkan logik tersuai yang sangat khusus.

Anda mendaftarkannya menggunakan jQuery.expr[':'].
Ini menjadikan kod pemilihan anda lebih kemas dan boleh digunakan semula.

Ini ialah ciri lanjutan untuk keperluan penapisan yang benar-benar unik.

Membina :contains-word() Tersuai

Mari cipta pemilih tersuai bernama :contains-word() yang mencari elemen yang mengandungi perkataan penuh tertentu, bukan sekadar subrentetan.

Contoh ini mentakrifkan :contains-word() dan kemudian 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>

Cabaran Kelas Pseudo

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>

Pemilih jQuery manakah yang akan menyasarkan hanya 'Two' dan 'Four'?

Jawab dalam pelajaran interaktif

Ulang Kaji: Kelas Pseudo & Pemilih Tersuai

Anda telah menguasai teknik pemilihan jQuery yang berkuasa!

Kelas pseudo (seperti :nth-child(), :not(), :has()) membolehkan anda memilih elemen berdasarkan keadaannya atau hubungannya dengan elemen lain.
:nth-child() menyasarkan elemen mengikut kedudukan, termasuk dengan formula.
:not() mengecualikan elemen daripada pemilihan.
:has() memilih elemen induk berdasarkan anaknya.
Anda juga boleh mencipta pemilih pseudo tersuai sendiri dengan jQuery.expr[':'] untuk penapisan yang sangat khusus.

Teruskan berlatih menggunakannya untuk memperhalus penyasaran DOM anda!

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 percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Kelas Pseudo dan Pemilih Tersuai” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Kelas Pseudo dan Pemilih 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 “Kelas Pseudo dan Pemilih Tersuai”?

Fahami kelas pseudo terbina dalam seperti :has(), :not() dan :nth-child(), kemudian pelajari cara mencipta pemilih tersuai sendiri untuk penapisan elemen yang boleh digunakan semula. 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 2 daripada 3.

Berapa lamakah pelajaran “Kelas Pseudo dan Pemilih 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

← Kembali ke jQuery Academy