JQUERY SEÇİCİLER (SELECTORS)

Tarhi : 02-06-2017 06:00:49 | Yazar : ÇAĞLAR BOSTANCI

JQUERY SEÇİCİLER (SELECTORS)

BASİT SEÇİCİLER (BASIC SELECTORS)<BR />
JQUERY ile bir nesneyi seçmenin üç yöntemi bulunmaktadır. Bunlar:
1. Tag (ait olduğu etiket sınıfı) $(‘a’)<br />
2. Class(stil grubu) $(‘.sinif’)<br />
3. #id (farklı bir kimlik) $(‘#id’)<br />
TAG SEÇİCİLER
HTML taglarının isimlerini yazarak istediğimiz tagı seçebiliriz.
Aşağıdaki örnekte butona tıklandığında p elementlerini arkaplan ve text rengini değiştirdik.

$('#tagsec').click(function(){
	$('p').css("background","#333");
	$('p').css("color","white");
	alert("p elementlerinin arkaplan rengi değişti");
	});

$('#tagsec').click(function(){

$('p').css("background","#333");

$('p').css("color","white");

alert("p elementlerinin arkaplan rengi değişti");

});

CLASS SEÇİCİ
Css ile classları . ile oluşturmaktayız. Jquery ile ise aynı şekilde seçerek işlem yapabilmekteyiz.

$('#classsec').click(function(){
	$('.li1').css("background","#333");
	$('.li1').css("color","white");
	alert("listedeki li1 clasının arkaplan rengi değişti");
	});

$('#classsec').click(function(){

$('.li1').css("background","#333");

$('.li1').css("color","white");

alert("listedeki li1 clasının arkaplan rengi değişti");

});

ID SEÇİCİ
ID adını yazdığımız bütün nesnelere ulaşabilmekte ve bir çok özellik atayabilmekteyiz.

$('#idsec').click(function(){
	$('#icerik').css("background","#333");
	$('#icerik').css("color","white");
	alert("listenin zemin rengi değişti ve birinci elementinin text rengi değişti");
	});

$('#idsec').click(function(){

$('#icerik').css("background","#333");

$('#icerik').css("color","white");

alert("listenin zemin rengi değişti ve birinci elementinin text rengi değişti");

});

SIRALI (HIERARCHY) SEÇİCİLER
Html sayfasındaki DOM hiyararşi sırası aşağıdaki gibi verilmiştir.
document(düzey 1)=>body(duzey 2)=>div(düzey 3)=>ul(düzey 4)=>li(düzey 5)

E F SEÇİCİLERİ
Css de olduğu gibi dede torun seçicilerdir. Bir elementin kapsayanı varsa sıralı bir şekilde cocuktan dedeye doğru gider.

$('#Ssecici').click(function(){
	$('body ul').css("font-size","24px");
	});

$('#Ssecici').click(function(){

$('body ul').css("font-size","24px");

});

E+F SEÇİCİLER
Komşulu düzeyi aynı olan nesnelerden ikincisini seçer. Kardeş seçici de diyebiliriz.

$('#Skardes').click(function(){
	$('#icerik2+p').css("background","#CCC");
	$('#icerik2+p').css("color","white");
	$('.metin1+p').css("background","#CCC");
	$('#icerik+div').css("font-size","24px");
	});

$('#Skardes').click(function(){

$('#icerik2+p').css("background","#CCC");

$('#icerik2+p').css("color","white");

$('.metin1+p').css("background","#CCC");

$('#icerik+div').css("font-size","24px");

});

E~F Birinci nesneden sonra komşuluk düzeyi aynı olan ikinci nesnenin benzerini seçer.

$('#Skardes2').click(function(){
	$('p~p').css("font-size","40px");
	$('div~p').css("color","red");
	});

$('#Skardes2').click(function(){

$('p~p').css("font-size","40px");

$('div~p').css("color","red");

});

E>F SEÇİCİLERİ
Birinci elementin içinde bulunan bütün f elementlerini seçer.

$('#Scocuk').click(function(){
	$('body>div').css('background',"#333");
	$('#icerik2>p').css("color","white");
	$('div>ul').css("color","white");
	});

$('#Scocuk').click(function(){

$('body>div').css('background',"#333");

$('#icerik2>p').css("color","white");

$('div>ul').css("color","white");

});

E,F,G SEÇİCİLER
Sıralı ve birbirinden virgül ile yarılmış elementleri seçer.

$('#siralisec').click(function(){
	$('#icerik,#icerik2,p').css("color","blue");
	});

$('#siralisec').click(function(){

$('#icerik,#icerik2,p').css("color","blue");

});

SEÇİCİ
Sayfadaki büyün nesleri seçer.

$('#genelsecici').click(function(){
	$('*').css('color',"red");	
	});

$('#genelsecici').click(function(){

$('*').css('color',"red");

});

Ö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 HTML nesnelerini seçebiliriz.

$('#null').click(function(){
	$('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 öz niteliğine sahip linkleri seçer.
	$('a[name]');	//Name özelliği olan linkleri seçer.
	$('a[name="iletisim"]');	//Name özelliği iletişim olan linkleri seçer.
	$('a[name^="ilet" ]');	//Name özelliği ilet ile başlayan linkleri seçer.
	$('a[name$="sim"]');	//Name özelliği sim ile biten linkleri seçer.
	$('a[name!="iletisim"]');//	Name özelliği iletişim olmayan linkleri seçer.
	$('a[name|="iletişim"]');//	Name özelliği iletisim'e hem eşit olanf hem de iletişim ile başlayan linkleri seçer.
	$('a[name*="et"]');	//Name özelliği içerisinde et ifadesi geçen linkleri seçer.
});

$('#null').click(function(){

$('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 öz niteliğine sahip linkleri seçer.

$('a[name]'); //Name özelliği olan linkleri seçer.

$('a[name="iletisim"]'); //Name özelliği iletişim olan linkleri seçer.

$('a[name^="ilet" ]'); //Name özelliği ilet ile başlayan linkleri seçer.

$('a[name$="sim"]'); //Name özelliği sim ile biten linkleri seçer.

$('a[name!="iletisim"]');// Name özelliği iletişim olmayan linkleri seçer.

$('a[name|="iletişim"]');// Name özelliği iletisim'e hem eşit olanf hem de iletişim ile başlayan linkleri seçer.

$('a[name*="et"]'); //Name özelliği içerisinde et ifadesi geçen linkleri seçer.

});

FORM SEÇİCİLER

$('input[type="text"]'); /*2. Yöntem */ $('input:text');
$('input[type="password"]'); /*2. Yöntem */ $('input:password');
$('input[type="file"]'); /*2. Yöntem */ $('input:file');
$('input[type="hidden"]'); /*2. Yöntem */ $('input:hidden');
$('input[type="checkbox"]'); /*2. Yöntem */ $('input:checkbox');
$('input[type="radio"]'); /*2. Yöntem */ $('input:radio');
$('input[type="select"]');	
$('input[type="image"]'); /*2. Yöntem */ $('input:image');
$('input[type="submit"]'); /*2. Yöntem */ $('input:submit');
$('input[type="reset" ]'); /*2. Yöntem */ $('input:reset');
$('input[type="button"]'); /*2. Yöntem */ $('input:button');
$('input[type="textarea"]');

$('input[type="text"]'); /*2. Yöntem */ $('input:text');

$('input[type="password"]'); /*2. Yöntem */ $('input:password');

$('input[type="file"]'); /*2. Yöntem */ $('input:file');

$('input[type="hidden"]'); /*2. Yöntem */ $('input:hidden');

$('input[type="checkbox"]'); /*2. Yöntem */ $('input:checkbox');

$('input[type="radio"]'); /*2. Yöntem */ $('input:radio');

$('input[type="select"]');

$('input[type="image"]'); /*2. Yöntem */ $('input:image');

$('input[type="submit"]'); /*2. Yöntem */ $('input:submit');

$('input[type="reset" ]'); /*2. Yöntem */ $('input:reset');

$('input[type="button"]'); /*2. Yöntem */ $('input:button');

$('input[type="textarea"]');

Form nesnelerini seçmeye yarayan bu seçiciler form elemanlarına kolayca erişmemizi sağlar. I. Metot ile II. Metot aynı nesneleri seçer.

:first indeks numarası 0 olan nesneyi seçer
:last En son indeks numarasına sahip nesneyi seçer.
:not Belirtilen özelliğin değilini seçer.
:even Çift indeks numaralı nesneleri seçer.
:odd Tek indeks numaralı nesneleri seçer.
:eq(n), :nth(n) Belirtilen indeks numaralı nesneyi seçer.
:gt(n) Girilen indeksten daha büyük indekse sahip olan nesneleri seçer.
:lt(n) Girilen indeksten daha küçük indekse sahip olan nesneleri seçer.
:header <hl>, <h2> gibi başlık nesnelerini seçer.
:animated Animasyon halindeki nesnelerini seçer.
:lang Belirtilen dile sahip nesneleri seçer. ,
:root Sayfanın DOM hiyerarşisindeki kökte bulunan nesneyi seçer.

$('div:nth-child(3)');  //Div’ler arasında 3 indeks numaralı div'tn //altındaki bütün nesneleri seçer.
$(1div span:nth-last-child(2)');  //Spanlar arasından sondan 2.’leri seçer.
$(’div span:nth-of-type(2)’);  //Her div grubunun içindeki 2. spanları seçer.
$(’div span:nth-last-of-type(3)*) //Her div grubunun içindeki sondan 3. spanları seçer.
$('div span:first-child'); //Div’in altındaki ilk span’ı seçer.
$(*div span:last-child');//Div’in altındaki son span’ı seçer.
$('div button:only-child');//Bütün div’ler arasında içinde sadecerb ir tane buton olan div’i seçer.
$(1div span:first-of-type'); // Div nesneleri içindeki ilk spanları seçer.
$(1div span:last-of-type'); // Div nesneleri içindeki son spanları seçer.
$('div span:only-of-type');//Div nesneleri içindeki herhangi bir tanesini seçer

$('div:nth-child(3)'); //Div’ler arasında 3 indeks numaralı div'tn //altındaki bütün nesneleri seçer.

$(1div span:nth-last-child(2)'); //Spanlar arasından sondan 2.’leri seçer.

$(’div span:nth-of-type(2)’); //Her div grubunun içindeki 2. spanları seçer.

$(’div span:nth-last-of-type(3)*) //Her div grubunun içindeki sondan 3. spanları seçer.

$('div span:first-child'); //Div’in altındaki ilk span’ı seçer.

$(*div span:last-child');//Div’in altındaki son span’ı seçer.

$('div button:only-child');//Bütün div’ler arasında içinde sadecerb ir tane buton olan div’i seçer.

$(1div span:first-of-type'); // Div nesneleri içindeki ilk spanları seçer.

$(1div span:last-of-type'); // Div nesneleri içindeki son spanları seçer.

$('div span:only-of-type');//Div nesneleri içindeki herhangi bir tanesini seçer

BAŞARILAR.

İlgili

JQUERY

JQUERY SEÇİCİLER (SELECTORS)

Hemen Başla

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

JQUERY SEÇİCİLER (SELECTORS)