jQuery Academy · Ders

Gelişmiş Öznitelik Seçicileri

Özniteliklerin varlığına, değerine veya kısmi eşleşmelerine göre öğeleri hedefleyen karmaşık öznitelik seçicilerini keşfederek seçim hassasiyetinizi artırın.

Gelişmiş Öznitelik Seçicileri, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 1. 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.

Merhaba, Attribute Seçiciler!

jQuery'de elementleri seçmenin güçlü bir yoluna hoş geldiniz! Elementleri HTML attribute'larına göre seçmenizi sağlayan attribute seçicilerini inceleyeceğiz.

Attribute'ları bir HTML tag'ına eklenmiş ekstra veriler gibi düşünebilirsiniz; örneğin id, class, href, data-* ve daha fazlası.

Attribute Varlığına Göre Seçme

En basit attribute seçicisi, değerinden bağımsız olarak belirli bir attribute'a sahip olan elementleri bulur. Yazımı şöyledir: [attributeName].

Bir attribute'un elementte bulunup bulunmadığını bilmeniz gerektiğinde bu yöntem çok kullanışlıdır. Örneğin $('[title]'), title attribute'una sahip tüm elementleri bulur.

Deneyin: Attribute Varlığı

Varlık seçicisini kullanarak title attribute'una sahip tüm elementleri bulalım ve tag adlarını görüntüleyelim.

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

Tam Attribute Değerlerini Eşleştirme

Bir attribute'un tam değerine sahip olduğu elementleri seçmek için [attributeName="value"] kullanın.

Bu seçici kesin sonuç verir! Yalnızca attribute değeri belirttiğiniz değerle, büyük/küçük harf kullanımı da dahil olmak üzere tamamen aynıysa eşleşir (jQuery attribute değeri eşleştirmesi büyük/küçük harfe duyarlıdır).

Tam Eşleştirme Uygulaması

Tam olarak "primary" değerine sahip bir data-type attribute'u bulunan elementleri bulun.

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

Şununla Başlayan Attribute Değerleri...

[attributeName^="value"] seçicisi, attribute değeri belirli bir dizeyle başlayan elementleri bulur.

Benzer adlandırma kurallarına sahip elementleri gruplamak için kullanışlıdır.
Bağlantıları filtrelemek için idealdir (örneğin /products ile başlayan tüm bağlantılar).

Biten ve İçeren Değerler

Bu seçiciler kısmi eşleştirmeler için daha fazla esneklik sunar:

[attributeName$="value"]: Attribute değeri belirtilen dizeyle bitiyorsa eşleşir.
[attributeName*="value"]: Attribute değeri içinde belirtilen dizeyi herhangi bir yerde içeriyorsa eşleşir.

Canlı Gösterim: Kısmi Eşleştirmeler

href attribute'larındaki kısmi değerlere göre ^=, $= ve *= ifadelerinin farklı elementleri nasıl hedeflediğini gözlemleyin.

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

Kelime ve Tire Seçicileri

İki özel seçici daha:

[attributeName~="value"]: Attribute değeri, boşluklarla ayrılmış belirli bir kelimeyi içeriyorsa eşleşir. Genellikle class attribute'larıyla kullanılır.
[attributeName|="value"]: Attribute değeri tam olarak "value" ise veya bir tireyle devam eden "value-" ile başlıyorsa eşleşir. lang="en-US" gibi dil kodlarında yaygın olarak kullanılır.

Hızlı Kontrol: Seçiciler

Aşağıdaki <div> elementini hangi jQuery seçici(leri) doğru şekilde tanımlar?

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

Tekrar: Attribute Seçicileri

Harika iş! Gelişmiş attribute seçicilerinde ustalaştınız:

[attr]: Attribute'un varlığını kontrol eder.
[attr="val"]: Tam değerlerle eşleşir.
[attr^="val"]: Belirtilen değerle başlayan değerlerle eşleşir.
[attr$="val"]: Belirtilen değerle biten değerlerle eşleşir.
[attr*="val"]: Belirtilen değeri içeren değerlerle eşleşir.
[attr~="val"]: Boşlukla ayrılmış bir kelimeyi içeren değerlerle eşleşir.
[attr|="val"]: Tam olarak eşleşen veya 'val-' ile başlayan değerlerle eşleşir.

Son derece kesin ve verimli jQuery kodları yazmak için bunları kullanın!

Sıkça Sorulan Sorular

“Gelişmiş Öznitelik Seçicileri” dersi ücretsiz mi?

Evet — “Gelişmiş Öznitelik Seçicileri” 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.

“Gelişmiş Öznitelik Seçicileri” dersinde ne öğreneceğim?

Özniteliklerin varlığına, değerine veya kısmi eşleşmelerine göre öğeleri hedefleyen karmaşık öznitelik seçicilerini keşfederek seçim hassasiyetinizi artırı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 1. dersidir.

“Gelişmiş Öznitelik Seçicileri” 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