jQuery Academy · Pelajaran

Pemilih Atribut Tingkat Lanjut

Jelajahi pemilih atribut yang kompleks untuk menargetkan elemen berdasarkan keberadaan, nilai, atau kecocokan sebagian atributnya sehingga pemilihan menjadi lebih presisi.

Pemilih Atribut Tingkat Lanjut 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.

Halo, Pemilih Attribute!

Selamat datang di cara yang ampuh untuk memilih elemen dalam jQuery! Kita akan membahas pemilih attribute, yang memungkinkan Anda memilih elemen berdasarkan attribute HTML-nya.

Anggaplah attribute sebagai data tambahan yang melekat pada tag HTML, seperti id, class, href, data-*, dan lainnya.

Memilih Berdasarkan Keberadaan Attribute

Pemilih attribute paling sederhana menemukan elemen yang memiliki attribute tertentu, apa pun nilainya. Penulisannya adalah [attributeName].

Ini sangat berguna ketika Anda hanya perlu mengetahui apakah sebuah attribute ada pada elemen. Misalnya, $('[title]') akan menemukan semua elemen dengan attribute title.

Coba: Keberadaan Attribute

Mari gunakan pemilih keberadaan untuk menemukan semua elemen yang memiliki attribute title dan menampilkan nama tag-nya.

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

Mencocokkan Nilai Attribute yang Tepat

Untuk memilih elemen yang memiliki nilai attribute tepat, gunakan [attributeName="value"].

Pemilih ini sangat presisi! Pemilih ini hanya akan cocok jika nilai attribute identik dengan yang Anda tentukan, termasuk huruf besar-kecil (pencocokan nilai attribute jQuery peka huruf besar-kecil).

Pencocokan Tepat dalam Praktik

Temukan elemen dengan attribute data-type yang nilainya tepat "primary".

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

Nilai Attribute yang Diawali dengan...

Pemilih [attributeName^="value"] menemukan elemen yang nilai attribute-nya diawali string tertentu.

Berguna untuk mengelompokkan elemen dengan pola penamaan yang serupa.
Sangat baik untuk menyaring tautan (misalnya, semua tautan yang diawali /products).

Nilai yang Diakhiri dan Mengandung...

Pemilih ini menawarkan fleksibilitas lebih untuk pencocokan sebagian:

[attributeName$="value"]: Cocok jika nilai attribute diakhiri string yang ditentukan.
[attributeName*="value"]: Cocok jika nilai attribute mengandung string yang ditentukan di bagian mana pun.

Demo Langsung: Pencocokan Sebagian

Amati bagaimana ^=, $=, dan *= menargetkan elemen yang berbeda berdasarkan sebagian nilai attribute dalam attribute href-nya.

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

Pemilih Kata dan Tanda Hubung

Dua pemilih khusus lainnya:

[attributeName~="value"]: Cocok jika nilai attribute mengandung kata tertentu yang dipisahkan oleh spasi. Sering digunakan dengan attribute class.
[attributeName|="value"]: Cocok jika nilai attribute tepat "value", atau diawali "value-" (diikuti tanda hubung). Umumnya digunakan untuk kode bahasa seperti lang="en-US".

Pemeriksaan Singkat: Pemilih

Pemilih jQuery mana yang akan mengidentifikasi elemen <div> di bawah ini dengan benar?

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

Ringkasan: Pemilih Attribute

Kerja bagus! Anda telah menguasai pemilih attribute tingkat lanjut:

[attr]: Memeriksa keberadaan attribute.
[attr="val"]: Mencocokkan nilai yang tepat.
[attr^="val"]: Mencocokkan nilai yang diawali.
[attr$="val"]: Mencocokkan nilai yang diakhiri.
[attr*="val"]: Mencocokkan nilai yang mengandung.
[attr~="val"]: Mencocokkan nilai yang mengandung kata yang dipisahkan spasi.
[attr|="val"]: Mencocokkan nilai yang tepat atau diawali 'val-'.

Gunakan pemilih ini untuk menulis kode jQuery yang sangat presisi dan efisien!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemilih Atribut Tingkat Lanjut” gratis?

Ya — teks lengkap “Pemilih Atribut Tingkat Lanjut” 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 “Pemilih Atribut Tingkat Lanjut”?

Jelajahi pemilih atribut yang kompleks untuk menargetkan elemen berdasarkan keberadaan, nilai, atau kecocokan sebagian atributnya sehingga pemilihan menjadi lebih presisi. 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 “Pemilih Atribut Tingkat Lanjut” 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

← Kembali ke jQuery Academy