Jquery dilinde seçicilerin(selectors)
önemini jquery'de kod yazanlar bilir. Adından da anlaşılacağı
gibi seçiciler html içerisinden bir veya birkaç elemanı seçmeye
yarar. Seçtiğimiz elemanları daha sonra istediğimiz gibi
kullanabiliriz. Öncelikle jquery'de yeni olanlar için, jquery
javascript işlemlerini kolaylaştırmak için yazılmış bir
kütüphanedir. Yani bu demek oluyor ki jqueryde yapılan tüm
işlemleri javascriptte de yapabiliriz, ancak biraz daha başımız
ağrır. Peki jqueryi yazdığımız bir sitede nasıl
kullanabiliriz? Bunun için
http://jquery.com/download/
adresine giderek jquery'i bilgisayarımıza indiriyoruz. Bu “.js”
uzantılı bir dosyadır. Sonra sitemizde herhangi bir yere (</head>
taginin hemen üzeri veya </html> 'nin hemen üzeri idealdir.
Ben bunu head tagi başında kullanmayı tercih ediyorum, kodun
okunmasını kolaylaştırmak ve neleri eklemiş olduğumu daha
rahat görebilmek için.)
satırını ekliyoruz. Arkasından,
eklediğimiz zaman işimiz tamamdır.
$(document).ready() demek <body onload=”fonksiyon()”> ile
aynı anlama geliyor. Yani sayfa yüklenmesi bittiğinde bunu yap
demek istiyoruz. Şimdiye kadarki işlemleri doğru yapıp
yapmadığımızı test etmek için ;
yaziyoruz. Eğer kutu içerisinde mesajımız çıkarsa jquery kütüphanesini ekleyebilmişiz demektir.
Hatırlatmak isterim, eğer ki eklediğimiz ' ' satırı scriptimizi yazacağımız yerin altındaysa ,' $(document).ready(function(){ }); ' satırını yazmadan direk kodlamaya başlayabiliriz.
Artık seçiciler konusuna girebiliriz.
Bunun için öncelikle bir index.php veya index.html sayfası oluşturuyoruz. Örnek vereceğim sayfa için kodlar;
//...
//...
şeklinde. (Sayfanın en altında tüm kodları görebilirsiniz. Şu an sadece bizi ilgilendiren kısmını gösteriyorum.)
Şu anda sayfamızın şekli ;
Bu kutular üzerinde fadeIn() fonksiyonunu kullanarak, seçtiğimiz kutuların görünmesini sağlayacağız. Tabiki scriptimizin başına $('.kutu').hide(); yazıyoruz ki , ilk durumda sayfamızda hiçbir kutu olmasın.
$('.kutu:first') secicisi kutu classina sahip ilk div elemanini secer. Ayni sekilde first yerine last yazdigimizda kutu classina sahip en son div'i secer.
yazdığımızda çıkan sonuç ;
$('.kutu:nth-child(3)') secicisi classi kutu olan ustten 3. div'i secer.
yazdığımızda
$('.kutu:nth-child(odd)') secicisi kutu classina sahip tek sayidaki divleri secer. Ayni sekilde even olanlar da cift sayidakileri sececek.
sonuç,
$('.kutu:gt(2)') secicisi index'i 2 den buyuk olan elemanlari secer. index nedir peki ? kutu clasina sahip elemanlarin 0 dan baslayarak siralandigini dusunelim . iste bu 0,1,2... bu elemanlarin indexidir. Ayni sekilde gt yerine lt yazarsak 2'den kucuk indexler secilecek .
$('.kutu:eq(2)') secicisi index'i 2 olan elemani sececek.
$(parent > child) cinsindeki seciciler once bir parent elemanini seciyor ki bu bizim ornegimizde kutular classina sahip div elemanlari. Sonra icinden child elemanini seciyor ki bu da ornegimiz icin .sari classina sahip eleman.
yazdığımızda;
$('eleman,eleman,...') -> aralara virgül koyarak birden fazla elemani ayni anda secebiliriz.
yazdığımızda ;
:not() secicisi parantez içerisindeki eleman disindakileri secer.
yazdığımızda;
Elbette tüm seçiciler bunlardan ibaret değil. Jquery resmi sitesinde documentation içersinde çok daha kapsamlı örnekler bulabilirsiniz. Burada seçicileri ; tüm örnekleri tek bir sayfa üzerinden göstererek ve aynı fonksiyonu kullanarak daha basit bir şekilde anlatmaya çalıştım.
Ayrıca jquery ile yapılabilecekleri görebilmek adına aklıma gelen en güzel örnek site ; http://net.tutsplus.com/ . Bununla birlikte Türkçe ve çok anlaşılır bir dille jquery
i anlatan http://www.eburhan.com/ sitesini tavsiye ederim.
Burada biraz jquery sınırları zorlanmış. Ama yeni başlasanız dahi örnekleri anlayabilirsiniz. Önümüzdeki günlerde Jquery ile Ajax işlemleri yapmayı anlatmaya çalışacağım. Görüşmek üzere..
Kaynak Kodlar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Jquery Seciciler
</head>
<body>
</body>
</html>
Hiç yorum yok:
Yorum Gönder