jQuery Academy · Pelajaran

Teknik Merentasi DOM yang Cekap

Kuasai kaedah seperti .closest(), .siblings(), .find() dan .parentsUntil() untuk menavigasi pepohon DOM dengan cekap serta mengelakkan kesesakan prestasi.

Pelajaran 3 daripada 311 langkah

Teknik Merentasi DOM yang Cekap ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 3 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.

Menavigasi Pepohon DOM

Selamat datang! Dalam pelajaran ini, kita akan menguasai teknik yang cekap untuk bergerak dalam Model Objek Dokumen (DOM).

DOM ibarat salasilah keluarga bagi elemen halaman web anda. Memahami cara melaluinya membolehkan anda memilih elemen dengan tepat, walaupun tanpa ID atau kelas secara langsung.

Melalui: Bergerak atau mengembara merentasi atau melalui sesuatu.
DOM: Perwakilan dalaman pelayar bagi struktur HTML anda.

Mencari Keturunan dengan .find()

Kaedah .find() sangat sesuai untuk mencari elemen keturunan. Ia mencari *di dalam* elemen yang sedang dipilih untuk mendapatkan sebarang padanan.

Anggaplah ia seperti mencari item tertentu di dalam kotak tertentu. Ia sangat berguna untuk mengecilkan skop carian anda.

Sintaks: $(selector).find(filterSelector)
Mengembalikan: Objek jQuery baharu yang mengandungi elemen keturunan yang ditemui.

.find() dalam Tindakan

Mari cari semua item senarai (<li>) di dalam senarai tidak tersusun (<ul>) tertentu.

Cuba jalankan kod ini dan lihat item yang mendapat latar belakang hijau!

<div id="container">
  <ul id="myList">
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
  </ul>
  <p>Some other text</p>
  <ul id="anotherList">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all <li> elements within #myList
    $('#myList').find('li').css('background-color', 'lightgreen');

    // You can also chain with specific selectors
    $('#myList').find('.active').css('font-weight', 'bold');
  });
</script>

Mendaki ke Atas dengan .closest()

Adakalanya anda perlu mencari leluhur (induk, datuk, dan sebagainya) bagi sesuatu elemen. Kaedah .closest() melakukan tugas ini.

Ia bermula pada elemen semasa dan bergerak *ke atas* pepohon DOM, lalu mengembalikan leluhur *pertama* yang sepadan dengan pemilih yang diberikan.

Sintaks: $(selector).closest(filterSelector)
Mengembalikan: Objek jQuery yang mengandungi satu leluhur terdekat.

.closest() dalam Tindakan

Bayangkan anda mengklik butang yang berada jauh di dalam struktur bersarang. Anda mahu mencari bekas utamanya. .closest() sangat sesuai untuk tujuan ini.

Klik butang di bawah untuk menyerlahkan leluhur <div> terdekatnya.

<div class="grandparent">
  <div class="parent">
    <p>Some text here</p>
    <button id="myButton">Click Me</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myButton').on('click', function() {
      // Find the closest ancestor div and add a border
      $(this).closest('div').css('border', '2px solid blue');
    });
  });
</script>

Meneroka Elemen Adik-beradik dengan .siblings()

Elemen yang berada pada aras yang sama dalam pepohon DOM dipanggil 'adik-beradik'. Kaedah .siblings() membantu anda memilih kesemuanya.

Ia mencari semua elemen yang berkongsi induk yang sama dengan elemen semasa, *tidak termasuk* elemen semasa itu sendiri.

Sintaks: $(selector).siblings(filterSelector)
Mengembalikan: Objek jQuery baharu yang mengandungi semua elemen adik-beradik.

.siblings() dalam Tindakan

Mari serlahkan semua elemen adik-beradik bagi item senarai tertentu apabila anda mengkliknya. Ini berguna untuk senarai atau menu interaktif.

Klik mana-mana item senarai untuk melihat warna elemen adik-beradiknya berubah!

<ul id="menu">
  <li>Home</li>
  <li class="current">About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#menu li').on('click', function() {
      // Remove highlight from previously selected siblings
      $('#menu li').css('background-color', '');
      // Highlight the clicked item's siblings
      $(this).siblings().css('background-color', 'lightyellow');
      // Highlight the clicked item itself (optional)
      $(this).css('background-color', 'lightblue');
    });
  });
</script>

Bergerak ke Atas dengan .parentsUntil()

Bagaimana jika anda mahu memilih *beberapa* leluhur, tetapi berhenti pada titik tertentu? Di sinilah .parentsUntil() berguna.

Kaedah ini bergerak ke atas pepohon DOM sambil memilih semua leluhur elemen semasa, *sehingga* mencapai elemen yang ditentukan oleh pemilih. Elemen 'berhenti' itu sendiri tidak disertakan.

Sintaks: $(selector).parentsUntil(stopSelector, filterSelector)
Mengembalikan: Objek jQuery yang mengandungi leluhur yang dipilih.

.parentsUntil() dalam Tindakan

Kita mempunyai struktur yang bersarang secara mendalam. Mari pilih semua elemen induk bagi <span> sehingga kita mencapai <div class="container"> tertentu.

Jalankan contoh ini untuk melihat elemen yang mendapat jidar, tetapi perhatikan bahawa div 'container' itu sendiri dilangkau!

<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <section>
        <article>
          <p>Hello <span>World!</span></p>
        </article>
      </section>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all parents of 'span' until the '.container' div
    $('span').parentsUntil('.container').css('border', '1px dashed orange');
  });
</script>

Semakan Pantas

Anda mempunyai elemen <img> yang bersarang di dalam <div class="gallery-item">, yang pula berada di dalam <div class="gallery-row">. Jika anda memilih <img>, kaedah jQuery manakah yang akan anda gunakan untuk mendapatkan *hanya* <div class="gallery-item">?

Jawab dalam pelajaran interaktif

Ulang Kaji: Melalui DOM dengan Cekap

Syabas! Anda telah menguasai kaedah jQuery utama untuk melalui DOM dengan cekap:

.find(): Mencari *di dalam* elemen untuk mendapatkan keturunan.
.closest(): Mencari *leluhur terdekat* yang sepadan dengan pemilih dengan bergerak *ke atas* pepohon.
.siblings(): Memilih semua elemen pada *aras yang sama* dengan elemen semasa (tidak termasuk elemen itu sendiri).
.parentsUntil(): Memilih beberapa leluhur *sehingga* (tetapi tidak termasuk) elemen berhenti yang ditentukan.

Menggunakan kaedah ini dengan bijak membantu anda menulis kod jQuery yang lebih tepat, berprestasi tinggi dan mudah dibaca untuk aplikasi web dinamik!

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 “Teknik Merentasi DOM yang Cekap” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Teknik Merentasi DOM yang Cekap”, 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 “Teknik Merentasi DOM yang Cekap”?

Kuasai kaedah seperti .closest(), .siblings(), .find() dan .parentsUntil() untuk menavigasi pepohon DOM dengan cekap serta mengelakkan kesesakan prestasi. 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 3 daripada 3.

Berapa lamakah pelajaran “Teknik Merentasi DOM yang Cekap” 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