Seçiciler ~ Selectors

Merhaba Arkadaşlar
Bugün üzerinde duracağım konu sitemizde bulunan nesnelerin özelliklerini bir seçici tarafından nasıl değiştirebileceğimiz olacak.

Her zaman ki örnekler göstererek daha iyi anlamanızı istiyorum ve html kodlarımı yazıyorum.

HTML

<body>
    <p id="Meyve">Meyve Türleri aşağıdaki gibidir.</p>
    <div>
        Meyveler
        <ul id="liste">
            <li class="e1">Erik</li>
            <li class="e2">Elma</li>
            <li class="e3">Çilek</li>
            <li class="e4">Kavun</li>
            <li class="e5">Portakal</li>
        </ul>
    </div>
    <p class="p1">Sebze Türleri Aşağıdaki Gibidir.</p>
    <p class="p2">Tahıl Ürünleri Aşağıdaki Gibidir.</p>
</body>

<body>

<p id="Meyve">Meyve Türleri aşağıdaki gibidir.</p>

<div>

Meyveler

<li class="e3">Çilek</li>

<li class="e4">Kavun</li>

<li class="e5">Portakal</li>

</ul>

</div>

<p class="p1">Sebze Türleri Aşağıdaki Gibidir.</p>

<p class="p2">Tahıl Ürünleri Aşağıdaki Gibidir.</p>

</body>

TAG SEÇİCİLER

<a>,<p>,<table>,<h1>,<img>,<span>,<div>,<form>,<select> ve bunlar gibi taglarımızdan sayfamızdan 1 den fazla bulunuyo olabilir.
Bütün bu tagların aynı değerlerde ki css özelliklerine sahip olmasını istiyorsak kullanımı şu şekilde yapmamız gerekir.

$('p').css(
  {
    'text-decoration':'underline',
    'color' : 'red'
  }
);

$('p').css(

{

'text-decoration':'underline',

'color' : 'red'

}

);

Bu yazım js kodumuzla sayfadaki bütün p seçip css şekli olarak altıçizili yapmış olduk.

See the Pen Tag Seçiciler / tags selectors by Aycan BÜLBÜL (@AycanB) on CodePen.

CLASS SEÇİCİLER

Yukarda HTML kodunu yazdığımız bölümde ul içerisindeki e1 class lı meyveleri seçmek istersek; JS

$('.e1').css('text-decoration','underline'); 
$('li.e3').css('text-decoration','underline');

1 2	$('.e1').css('text-decoration','underline'); $('li.e3').css('text-decoration','underline');

See the Pen Class seçici, class selectors by Aycan BÜLBÜL (@AycanB) on CodePen.

şeklinde yazarak e1 ve e3 stiline sahip nesnelerin altını çizdik.

ID SEÇİCİLER

En esnek yapıda css özelliği verebileceğimiz seçiciler Class ve İd seçicilerdir.
Çünkü bu seçim tarzlarında oluşturucağımız yapının sadece verilen id veya class’a ait değişiklik yapacağımızı belirtir.

$('#Meyve').css('text-decoration','underline');
$('#liste .e3').css('text-decoration','underline');

1 2	$('#Meyve').css('text-decoration','underline'); $('#liste .e3').css('text-decoration','underline');

Bu şekilde yazarak Meyve id’li nesne ile e3 stiline sahip liste id’li nesneyi seçtik ve altı çizili yaptık.

See the Pen Id ve Class Seçici by Aycan BÜLBÜL (@AycanB) on CodePen.

SIRALAMALI (HIERARCHY) SEÇİCİLER

1 E F SEÇİCİLERİ

Bu seçiciye Css’den de hatırlayacağımız gibi dede-torun ilişkisi yada miras seçiciside denmekte. İlk belirtilen nesnenin altındaki torunu olan nesne seçilir.
1-> E + F Seçicileri

Komşuluk düzeyi aynı olan iki nesneden ikinciyi seçer. Yani birinciden sonra belirtilen ilk ikinci nesneyi seçer.

$('div+p').css('color','red');  //div nesnesinden sonra aynı düzeyde hemen p paragrafı gelmektedir.

1	$('div+p').css('color','red'); //div nesnesinden sonra aynı düzeyde hemen p paragrafı gelmektedir.

$('ul li+p').css('color','red');  //hiçbirşey görüntülenmez. Çünkü li etiketi ul ve div içinde p ise div ile aynı düzeydedir.

1	$('ul li+p').css('color','red'); //hiçbirşey görüntülenmez. Çünkü li etiketi ul ve div içinde p ise div ile aynı düzeydedir.

$('#Meyve+div').css('color','red'); //Meyve id'li paragrafla div aynı düzeydedir. Buda ikisininde altı çizileceğini gösterir.

1	$('#Meyve+div').css('color','red'); //Meyve id'li paragrafla div aynı düzeydedir. Buda ikisininde altı çizileceğini gösterir.

2 E ~ F Seçicileri

Birinci nesneden sonra komşuluk düzeyi aynı olan ikinci nesnenin benzerlerini seçer. “prev~siblings” de denir.

$('div-p').css('color','red'); //div nesnesinden sonra aynı düzeyde olan diğer p paragraflarını seçtik.

1	$('div-p').css('color','red'); //div nesnesinden sonra aynı düzeyde olan diğer p paragraflarını seçtik.

$('p~p').css('color','red'); //baştaki p paragrafından sonra aynı düzeyde olan diğer p paragraflarını seçer.

1	$('p~p').css('color','red'); //baştaki p paragrafından sonra aynı düzeyde olan diğer p paragraflarını seçer.

3 E > F Seçicileri

Birinci nesnenin içinde olan bütün nesneleri seçer. “child selector” ‘ da denir.

$('body>p').css('color','red'); //body etiketinin altındaki bütün paragraflar seçilir.

$('div>li').('color','red'); //div nesnesinin altındaki bütün listeler seçilir.

$('body>p').css('color','red'); //body etiketinin altındaki bütün paragraflar seçilir.

$('div>li').('color','red'); //div nesnesinin altındaki bütün listeler seçilir.

4 E F G Seçicileri

Sırasıyla ile belirtilen nesneler seçilir.

$('#Meyve,#liste').css('color','red');  //#Meyve ve #liste id'li nesneler seçildi.

$('.e1,.p1').css('color','red'); //e1 ve p1 stiline sahip nesneleri seçtik.

$('#Meyve,#liste').css('color','red'); //#Meyve ve #liste id'li nesneler seçildi.

$('.e1,.p1').css('color','red'); //e1 ve p1 stiline sahip nesneleri seçtik.

5 * Seçicisi

* bu simgeyle seçimlerimizde bütün nesneyi seçilmiş duruma getiriyoruz.

$('*').css('color','red'); //Sayfadaki bütün nesneler seçilir.

$('div>*').css('color','red'); //div'in altındaki bütün nesneler seçilir.

$('*').css('color','red'); //Sayfadaki bütün nesneler seçilir.

$('div>*').css('color','red'); //div'in altındaki bütün nesneler seçilir.

ÖZNİTELİK (ATTRIBUTE) SEÇİCİLER

Her nesnenin içerisinde barındırdığı bazı özellikler olduğundan yukarıda da bahsetmiştik.
Bunlar o nesnenin genişlik, yükseklik, isim, kaynak, değer, id gibi olabilir.
Bu değerlere sahip bir objeyi seçebiliriz.

$('div[id="katman"]').css('color','red'); // id değeri katman olan divi kırmızı yapar.

$('button[value$="Kaydet"]'); // value değeri Kaydet ile biten butonları seçer.

$('a[href^="ga"][href$="me"]'); // "ga" ile başlayıp "me" ile biten href özniteliğine sahip linkleri seçer.

$('div[id="katman"]').css('color','red'); // id değeri katman olan divi kırmızı yapar.

$('button[value$="Kaydet"]'); // value değeri Kaydet ile biten butonları seçer.

$('a[href^="ga"][href$="me"]'); // "ga" ile başlayıp "me" ile biten href özniteliğine sahip linkleri seçer.

Örneğin sayfamızda <a href=”search.php”=”iletisim” id=”2″>Tıkla</a> link olsun.

METHOD	AÇIKLAMA
$(a[name]);	Name özelliği olan linki seçer.
$(‘a[name=”iletisim”]’);	Name özelliği iletisim olan linkleri seçer.
$(‘a[name^=”ilet”]’);	Name özelliği ilet ile başlayan renkleri seçer.
$(‘a[name$=”sim”]’);	Name özelliği sim ile biten linkleri seçer.
$(‘a[name!=”iletisim”]’);	Name özelliği iletisim olmayan linkleri seçer.
$(‘a[name*=”et”]’);	Name özelliği içerisnde et ifadesi geçen linkleri seçer.

FORM SEÇİCİLER

Arkadaşlar form elementlerinde kullandığımız input nesnelerini seçmek için genel olan yapı, input nesnesinin hangisini olduğunu belirtmemizdir.

FORM NESNESİ	METOD
Text	$(‘input[type=”text”]’);
Password	$(‘input[type=”password”]’);
File	$(‘input[type=”file”]’);
Hidden	$(‘input[type=”hidden”]’);
Checbox	$(‘input[type=”checkbox”]’);
Radio	$(‘input[type=”radio”]’);
Select	$(‘input[type=”select”]’);
Image	$(‘input[type=”image”]’);
Submit	$(‘input[type=”submit”]’);
Reset	$(‘input[type=”reset”]’);
Button	$(‘input[type=”button”]’);
Textarea	$(‘input[type=”textarea”]’);

Bu seçiciler sayesinde form elemanlarına kolayca erişebiliyoruz.

Post Views: 2.475