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

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.

JS

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

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.

JS

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.

 

 

 

2 E ~ F Seçicileri

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

 

 

3 E > F Seçicileri

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

 4 E F G Seçicileri

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

 5 * Seçicisi

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

 

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

 

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