0Pricing
jQuery Academy · Ders

Özel Sözde Seçiciler Oluşturma

Karmaşık öğe seçimi mantığını basitleştirmek ve kod okunabilirliğini artırmak için kendi özel sözde seçicilerinizi jQuery.expr[':'] ile kaydetmeyi öğrenin.

Özel Sözde Seçiciler Oluşturma, 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.

Özel Seçiciler Neden Kullanılır?

jQuery'nin yerleşik seçicileri son derece güçlüdür; ancak bazen karmaşık veya tekrarlanan özel filtreleme gereksinimleriyle karşılaşırsınız.

Özel sözde seçiciler bu noktada işe yarar! Kendi özelleştirilmiş filtrelerinizi tanımlamanıza olanak tanır; karmaşık seçim mantığını basitleştirir ve kodunuzu daha temiz ve okunabilir hâle getirir.

Varsayılan Seçiciler Yetersiz Kaldığında

Yalnızca belirli bir sınıfa sahip olmakla kalmayıp data-status özniteliği de 'active' olarak ayarlanmış tüm <div> öğelerini sık sık seçmeniz gerektiğini düşünün.

Standart seçicileri birleştirebilirsiniz; ancak mantık daha kapsamlıysa veya bunu uygulamanız genelinde sık sık uygulamanız gerekiyorsa bu yaklaşım uzayabilir ve sezgiselliğini kaybedebilir.

jQuery.expr[':'] ile Tanışın

jQuery.expr[':'], özel sözde seçicilerinizi kaydettiğiniz nesnedir. Bunu jQuery'nin temel seçim motorunu genişletmek gibi düşünebilirsiniz.

jQuery :myCustomSelector gibi bir seçiciyle karşılaştığında bu nesnede myCustomSelector anahtarını arar. Bir anahtara (seçicinizin adına) bir işlev atarsınız; jQuery de bu işlevi test ettiği her öğe için çalıştırır.

:has-tooltip Tanımlama

title özniteliğine sahip öğeleri belirleyen basit bir özel seçici olan :has-tooltip'u tanımlayalım. Bu seçiciyi jQuery.expr[':']'e şu şekilde eklersiniz.

Sağladığınız işlev, test edilen geçerli DOM elem'ini alır. Öğe ölçütlerinizle eşleşiyorsa true, aksi takdirde false döndürmelidir.

jQuery.expr[':'].hasTooltip = function(elem) {
  // Check if the element has a 'title' attribute
  return !!$(elem).attr('title');
};

Özel Seicinizi Kullanma

:has-tooltip seçicimiz artık tanımlandığına göre onu diğer jQuery sözde seçicileri gibi kullanabiliriz! Aşağıdaki örneği çalıştırmayı deneyin.

Bu örnek, title özniteliğine sahip tüm öğeleri vurgulayarak yeni özel filtrenizin gücünü gösterecektir.

<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .highlight {
    border: 2px solid green;
    background-color: #e0ffe0;
  }
</style>
</head>
<body>
  <p title="This is a tooltip">Paragraph with tooltip</p>
  <div id="no-tooltip">Just a div</div>
  <span title="Another tooltip here">Span with tooltip</span>

  <script>
    jQuery.expr[':'].hasTooltip = function(elem) {
      return !!$(elem).attr('title');
    };

    $(document).ready(function() {
      $('p:has-tooltip, span:has-tooltip').addClass('highlight');
    });
  </script>
</body>
</html>

`elem`, `i` ve `match` Bağımsız Değişkenleri

Özel seçici işleviniz çalıştırıldığında üç önemli bağımsız değişken alır:

  • elem: Test edilen geçerli DOM öğesi.
  • i: jQuery'nin o anda üzerinde yineleme yaptığı öğe kümesinde elem'in dizini.
  • match: Seçiciyi ayrıştırmak için kullanılan düzenli ifadeden elde edilen sonuçları içeren dizi. Bu, bağımsız değişken kabul eden seçiciler için gereklidir.

Basit seçiciler için öncelikle elem bağımsız değişkenini kullanırsınız.

Veri Özniteliklerine Dayalı Seçici

data-status özniteliğinin 'active' değerine eşit olduğu öğeleri bulmak için :data-status(active) seçicisini oluşturalım. Bu, match bağımsız değişkeninin nasıl kullanılacağını gösterir.

'active' değeri (parantez içindeki bağımsız değişken) match[3] içinde bulunur. Bu, seçicinizin dinamik olmasını sağlar!

<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .active-item {
    background-color: lightgreen;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div data-status="active">Item 1 (Active)</div>
  <div data-status="inactive">Item 2 (Inactive)</div>
  <p data-status="active">Item 3 (Active)</p>
  <span>Item 4 (No Status)</span>

  <script>
    jQuery.expr[':'].dataStatus = function(elem, i, match) {
      const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
      const actualStatus = $(elem).data('status');
      return actualStatus === expectedStatus;
    };

    $(document).ready(function() {
      $(':data-status(active)').addClass('active-item');
    });
  </script>
</body>
</html>

`match[3]` değerini anlama

match dizisi, seçici dizenizin jQuery tarafından dahili düzenli ifade ayrıştırması sonucunda oluşturulur. :yourSelector(argument) gibi bir seçicide argument bölümü genellikle match[3] içinde yakalanır.

Bu mekanizma, parametre kabul edebilen dinamik ve esnek özel seçiciler oluşturmak için kritik öneme sahiptir. Böylece bu seçiciler çeşitli filtreleme senaryolarında daha yeniden kullanılabilir ve güçlü hâle gelir.

İleri Düzey Mantık: `:containsExact`

Daha gelişmiş bir seçici oluşturalım: :containsExact(text). jQuery'nin varsayılan :contains() seçicisinden farklı olarak bu seçici, yalnızca tüm metin içeriği (alt öğeler hariç) verilen metinle tam olarak eşleşen öğeleri bulur.

Bu işlemde, tam eşleşmeyi güvence altına almak için genellikle $(elem).text().trim() değerleri dikkatlice karşılaştırılır.

<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .exact-match {
    font-weight: bold;
    color: blue;
    background-color: #e0f0ff;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div>Hello World</div>
  <div>Hello there!</div>
  <p>Hello</p>
  <span>World</span>

  <script>
    jQuery.expr[':'].containsExact = function(elem, i, match) {
      const searchText = match[3]; // The text inside the parentheses
      const elementText = $(elem).text().trim();
      return elementText === searchText;
    };

    $(document).ready(function() {
      $(':containsExact(Hello World)').addClass('exact-match');
    });
  </script>
</body>
</html>

Özel Seçiciler İçin İpuçları

Özel seçicilerinizi oluştururken şu en iyi uygulamaları aklınızda bulundurun:

  • Performans: Karmaşık mantık, özellikle büyük DOM yapılarında performansı etkileyebilir. Seçici işlevlerinizi optimize edin.
  • Açıklık: Seçicilerinize, amaçları kodunuzu okuyan herkes tarafından hemen anlaşılacak şekilde açık adlar verin.
  • Yeniden kullanılabilirlik: Seçicileri yalnızca tek bir özel durum için değil, çeşitli bağlamlarda kullanılabilecek kadar genel tasarlayın.
  • Çakışmalardan kaçınma: Gelecekte kullanabileceğiniz jQuery seçicileri veya diğer eklentilerle çakışmayı önlemek için benzersiz adlar seçin.

Özel Seçici Görevi

Metin içeriği ve alt öğeleri olmayan öğeleri seçen :is-empty adlı özel bir seçici oluşturmak istiyorsunuz. Bu seçici, jQuery'nin yerleşik :empty seçicisine benzer.

Aşağıdaki kod parçacıklarından hangisi bu özel sözde seçiciyi doğru şekilde tanımlar?

Özet: Özel Seçiciler

Bu derste, jQuery.expr[':'] kullanarak kendi özel sözde seçicilerinizi oluşturup jQuery'nin güçlü seçim yeteneklerini nasıl genişleteceğinizi öğrendiniz.

Basit seçicileri nasıl tanımlayacağınızı, match dizisi aracılığıyla bu seçicilere bağımsız değişkenler aktaracağınızı ve karmaşık filtreleme mantığını basitleştirmek için bunları nasıl uygulayacağınızı incelediniz. Böylece jQuery kodunuz daha okunabilir, bakımı daha kolay ve daha verimli hâle gelir.

Sıkça Sorulan Sorular

“Özel Sözde Seçiciler Oluşturma” dersi ücretsiz mi?

Evet — “Özel Sözde Seçiciler Oluşturma” 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.

“Özel Sözde Seçiciler Oluşturma” dersinde ne öğreneceğim?

Karmaşık öğe seçimi mantığını basitleştirmek ve kod okunabilirliğini artırmak için kendi özel sözde seçicilerinizi jQuery.expr[':'] ile kaydetmeyi öğrenin. 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.

“Özel Sözde Seçiciler Oluşturma” 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

  1. Özel Sözde Seçiciler Oluşturma
  2. .filter() ile Gelişmiş Filtreleme
  3. .not() ile Öğeleri Hariç Tutma
← jQuery Academy Sayfasına Dön