jQuery ye hızlı bi başlangıcın ardından bu derste jQuery nin belki de en onemli konusu olan nesne secme işlemini yapıcaz.
eskiden Javascript 'le bir nesneyi id ye gore secmek icin şu kodu yazardık;
HTML:
document.getElementById('ahmet')
jQuery almış bunu şu hale sokmuş;
HTML:
$('#ahmet')
Bir nesneyi class a gore secmek icinde şunu;
HTML:
document.getElementByClass('ahmet')
jQuery bunuda almış şu hale sokmuş;
HTML:
$('.ahmet')
Css dilini bilen arkadaşların kafalarda bi kıpırdanma oldu sanırım. Cunku jQuery bu konuda css den kopya cekmiş demicem birebir aynı secici yontemini kullanmış.
yani jQuery de nesne secmek icin standart olarak dolar işareti( $ ) koyduktan ve parantez acıp tırnak işaretleriyle birlikte acıp-kapattıktan sonra iceriğinde aynı css de olduğu gibi;
tag secmek icin direk tag ismi orneğin body tagından bi işlem yapmak icin;
HTML:
$('body')
veya id ye gore secmek icin sharp( # ) işaretiyle birlikte;
HTML:
$('#nesneidsi')
veya class a gore secmek icin nokta( . ) işaretiyle birlikte;
HTML:
$('.classismi')
jQuery secicilerde hiyerarşi de kullanabilirsiniz. tıpkı css de olduğu gibi diyelim body nin altında bir div bu div in icinde bir ahmet class lı div ve bu divinde icinde ahmetakan id li bi a tagı var;
HTML:
$('body div .ahmet #ahmetakan')
Gorduğunuz gibi bir nesneyi secerken diyelim ahmetakan id li a tagını secerken sadece id sini tanımlasakta yetiyor. yani .ahmet -> div.ahmet gorevini veya #ahmetakan -> a#ahmetakan gorevini de gorebiliyor.
Diyelim class ı ahmet olan iki tag var. birisi div birisi a
HTML:
$('.ahmet')
Dediğimizde jQuery bunların ikisini de secer.
Ama;
HTML:
$('div.ahmet')
Dediğimizde yalnızca div taglarından class ı ahmet olanları secer.
Bir diğer mevzu coklu secim. yani siz aynı işleve ahmet id li bi tag ı da tabii tutmak istiyosunuz akan class lı bi paragrafı da. O zaman da yine aynı css deki gibi virgul( , ) ile birden fazla secim yapabilirsiniz;
HTML:
$('#ahmet , p.akan')
Bu durumda belirleyeceğiniz işlevi ikisine de gercerli kılar.
Secicilerle ilgili bir diğer can alıcı nokta ozelliğine gore nesne secimi. Diyelim bir suru a tagımız var ama href ozellikleri anasayfa.htm, index.php ve ana.html şeklinde bu 3 unden birisi. ama 50 60 tane var bu a tagından diyelim.. Ben yalnızca href ozelliği anasayfa.htm olanları almak istiyorum.
jQuery bu konudada Css yi taklit etmiş( taklit diyince kotu bişe algılamayın. iyki boyle yapmış cunku cok daha basitleşmiş bizim icin hem oğrenimi hem kullanımı. ) hah ne diyoduk: yalnızca bi ozelliği = bişe olanları secmek icin css deki gibi şu kodu kullanıcaz;
HTML:
HTML:
$('a[href=anasayfa.htm]')
Bu kod ilk yazdığım a tagına işlev gercekleştirecektir.
Veya mesela yalnızca href ozelliği .php yle biten a taglarını secmek istiyorum;
HTML:
$('a[href^=.php]')
Veya yalnızca ana ile başlayan a taglarını secelim;
HTML:
$('a[href$=ana]')
Veya yalnızca icinde herangi bi yerlerde dex kelimesi gecenleri secmek istiyorum;
HTML:
$('a[href*=dex]')
Veya href ozelliği olsun yeter iceriği salla diyosan;
HTML:
$('a[href]')
Bi tane de coklu deniyelim ana ile başlasın icinde .htm gecsin ve l harfiyle bitsin. bu a taglarından 3 yu sececektir bu ozelliklere uyduğu icin;
HTML:
$('a[href$=ana]href*=.htmhref^=l')
Veya ozellikler arasında değilde bi metin paragrafı
direk tagın icindeki metinde belli bi ozellik arıyalım. mesela icinde agraf gecen p leri arıyalım;
HTML:
$('p:contains("agraf")')
bu şekilde de yazdığımız paragrafı secebiliriz. Burada dikkat edilmesi gereken şey :contains in buyuk kucuk harfe duyarlı olması. yani neyse tam onu yazmalısınız.
Veya gorunum olarak gizli yani
HTML:
ozelliğindeki nesneleri secelim;
HTML:
$('div:hidden')
Veya gizlileri boş verip gorunenleri secelim;
HTML:
$('div:visible')
Bu konu da anlatılması gereken aslında input secicileri diye ayrı bi mevzu var ama ona hic gerek duymuyorum. cunku mesela :text dersek en son oğrendiğimiz type=text le aynı veya :checkbox dersek type=checkbox la aynı. bu şekilde tum type ları ikinokta( : ) koyarak kısaca yazabilirsiniz. Ama dediğim gibi bence gereksiz cunku zaten var.
Ve gecelim bir diğer mevzu sectiğiniz nesnenin sırası ile alakalı secimler yapma. Yani sectiğiniz nesnelerden birden cok varsa hangi sıradakini belirtebilirsiniz. bunu yaparsanız istediğiniz sıradakine işlevi uygular. yapmazsanız diyelim a tagını sectiniz tum a taglarına o işlevi uygular. Şimdi orneğin belli nesneler arasından 4. sıradakini almayı veya cift sıradakileri almayı veya ilk ini veya sonuncu yu almayı gorelim;
Diyelim boyle bir sayfamız var; Bu a tagları arasında gidip gelicez şimdi;
HTML:
Orneğin ilk ini secelim. yalnız bu sırayla alakalı secimleri yaparken dikkat edeceğimiz kural sıralamanın 0 dan başlaması. yani bizim 1. gorduğumuz ilk elemanın liste sırası 0 dır. veya ciftleri sec dersek bize gore( gorduğumuz elemanlardan ) 1. yi alarak başlar 3. yu 5. yi alarak devam eder ama aslında o 0, 2, 4 u almıştır. Pardon ne diyoduk: ilk ini secelim;
HTML:
$('a:first')
Sonuncuyu secelim;
HTML:
$('a:last')
2. sıradakini secelim
HTML:
$('a:eq(1)') liste sıraları 0 dan başladığı icin bizim gorduğumuz 2. elemanın liste sırası 1
3 den sonrasını secelim;
HTML:
$('a:gt(3)') // 4, 5, 6, 7
3 den oncesini secelim;
HTML:
$('a:lt(3)') // 1, 2
Şimdi de cift ve tek leri secelim. ikinokta dan sonra ciftler icin even tekler icin ise odd
HTML:
$('a:even') // 0, 2, 4 $('a
dd') // 1, 3, 5 jQuery de tonla secici var. Burda hepsini anlatmadım. Ama bundan fazlasına ihtiyac duymayacağınızı garanti edebilirim.
Bir sonraki dersimizde yavaş yavaş işlevlere girişicez. Şimdiye kadar anlattığım secicilerin tek başına hic bir amacı yok. $('#ahmet').islev(parametre); diyerek bir dahaki dersimizde ilk işlevlerimizi oluşturucaz.
edit: jQuery Dersleri #3 | İşlevlere giriş