jQuery Academy · Ders

Etkili DOM Gezinme Teknikleri

DOM ağacında verimli şekilde gezinmek ve performans darboğazlarından kaçınmak için .closest(), .siblings(), .find() ve .parentsUntil() gibi yöntemlerde ustalaşın.

3. ders / 311 adım

Etkili DOM Gezinme Teknikleri, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

DOM Ağacında Gezinme

Hoş geldiniz! Bu derste Belge Nesne Modeli (DOM) içinde verimli bir şekilde gezinme tekniklerinde ustalaşacağız.

DOM'u web sayfanızdaki öğeler için bir aile ağacı gibi düşünebilirsiniz. Bu ağacı nasıl dolaşacağınızı anlamak, doğrudan kimlikler veya sınıflar olmadan bile öğeleri hassas biçimde seçmenizi sağlar.

Dolaşma: Bir şeyin üzerinde veya içinde ilerleme.
DOM: Tarayıcının HTML yapınızın dâhilî gösterimi.

.find() ile Alt Öğeleri Bulma

.find() yöntemi, alt öğeleri bulmak için idealdir. Geçerli olarak seçilmiş öğelerin *içinde* eşleşen öğeleri arar.

Bunu, belirli bir kutunun içindeki belirli öğeleri aramaya benzetebilirsiniz. Aramanızı daraltmak için çok güçlüdür.

Sözdizimi: $(selector).find(filterSelector)
Döndürdüğü değer: Bulunan alt öğeleri içeren yeni bir jQuery nesnesi.

.find() Kullanım Örneği

Belirli bir sırasız listenin (<ul>) içindeki tüm liste öğelerini (<li>) bulalım.

Kodu çalıştırıp hangi öğelerin yeşil arka plan aldığını görün!

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

.closest() ile Yukarı Çıkma

Bazen bir öğenin üst öğesini, büyük üst öğesini veya başka bir atasını bulmanız gerekir. .closest() yöntemi tam olarak bunu yapar.

Geçerli öğeden başlayarak DOM ağacında *yukarı* doğru ilerler ve verilen seçiciyle eşleşen *ilk* üst öğeyi döndürür.

Sözdizimi: $(selector).closest(filterSelector)
Döndürdüğü değer: En yakın tek üst öğeyi içeren bir jQuery nesnesi.

.closest() Kullanım Örneği

İç içe geçmiş bir yapının derinliklerindeki bir düğmeye tıkladığınızı düşünün. Düğmenin ana kapsayıcısını bulmak istiyorsunuz. .closest() bunun için idealdir.

En yakın <div> üst öğesini vurgulamak için aşağıdaki düğmeye tıklayın.

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

.siblings() ile Kardeş Öğeleri İnceleme

DOM ağacında aynı düzeyde bulunan öğelere 'kardeş öğeler' denir. .siblings() yöntemi bunların tümünü seçmenize yardımcı olur.

Geçerli öğeyle aynı üst öğeyi paylaşan tüm öğeleri bulur; geçerli öğenin kendisini *hariç tutar*.

Sözdizimi: $(selector).siblings(filterSelector)
Döndürdüğü değer: Tüm kardeş öğeleri içeren yeni bir jQuery nesnesi.

.siblings() Kullanım Örneği

Belirli bir liste öğesine tıkladığınızda tüm kardeş öğelerini vurgulayalım. Bu, etkileşimli listeler veya menüler için kullanışlıdır.

Kardeş öğelerinin renginin değiştiğini görmek için herhangi bir liste öğesine tıklayın!

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

.parentsUntil() ile Yukarı Doğru İlerleme

Belirli bir noktada durarak *birden fazla* üst öğeyi seçmek isterseniz ne yaparsınız? .parentsUntil() bu durumda kullanışlıdır.

Bu yöntem DOM ağacında yukarı doğru ilerler ve seçiciyle belirtilen öğeye ulaşana *kadar* geçerli öğenin tüm üst öğelerini seçer. 'Durdurma' öğesinin kendisi seçime dâhil edilmez.

Sözdizimi: $(selector).parentsUntil(stopSelector, filterSelector)
Döndürdüğü değer: Seçilen üst öğeleri içeren bir jQuery nesnesi.

.parentsUntil() Kullanım Örneği

Derin biçimde iç içe geçmiş bir yapımız var. Bir <span> öğesinin tüm üst öğelerini, belirli bir <div class="container"> öğesine ulaşana kadar seçelim.

Hangi öğelerin kenarlık aldığını görmek için bu örneği çalıştırın; ancak 'container' div öğesinin kendisinin atlandığına dikkat edin!

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

Kısa Kontrol

Bir <img> öğesi, bir <div class="gallery-item"> öğesinin içinde, o da bir <div class="gallery-row"> öğesinin içinde bulunuyor. <img> öğesini seçtiğinizde yalnızca <div class="gallery-item"> öğesini almak için hangi jQuery yöntemini kullanırsınız?

İnteraktif derste cevapla

Özet: Verimli DOM Dolaşımı

Harika iş çıkardınız! Verimli DOM dolaşımı için temel jQuery yöntemlerinde ustalaştınız:

.find(): Alt öğeleri bulmak için öğelerin *içinde* arama yapar.
.closest(): Ağaçta *yukarı* çıkarak bir seçiciyle eşleşen *en yakın üst öğeyi* bulur.
.siblings(): Geçerli öğeyle *aynı düzeydeki* tüm öğeleri seçer (geçerli öğenin kendisi hariç).
.parentsUntil(): Belirtilen durdurma öğesine *kadar* olan, ancak onu içermeyen birden fazla üst öğeyi seçer.

Bu yöntemleri doğru kullanmak, dinamik web uygulamaları için daha hassas, yüksek performanslı ve okunabilir jQuery kodları yazmanıza yardımcı olur!

Başlamak ücretsiz

Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 22
Dersler: 48

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Etkili DOM Gezinme Teknikleri” dersi ücretsiz mi?

Evet — “Etkili DOM Gezinme Teknikleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“Etkili DOM Gezinme Teknikleri” dersinde ne öğreneceğim?

DOM ağacında verimli şekilde gezinmek ve performans darboğazlarından kaçınmak için .closest(), .siblings(), .find() ve .parentsUntil() gibi yöntemlerde ustalaşın. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 3. dersidir.

“Etkili DOM Gezinme Teknikleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← jQuery Academy Sayfasına Dön