- Katılım
- 30 Aralık 2010
- Mesajlar
- 256
- Reaction score
- 3
jQuery ye hızlı bi başlangıcın ardından bu derste jQuery nin belki de en önemli konusu olan nesne seçme işlemini yapıcaz.
eskiden Javascript 'le bir nesneyi id ye göre seçmek için şu kodu yazardık;
jQuery almış bunu şu hale sokmuş;
Bir nesneyi class a göre seçmek içinde şunu;
jQuery bunuda almış şu hale sokmuş;
Css dilini bilen arkadaşların kafalarda bi kıpırdanma oldu sanırım. Çünkü jQuery bu konuda css den kopya çekmiş demicem birebir aynı seçici yöntemini kullanmış.
yani jQuery de nesne seçmek için standart olarak dolar işareti( $ ) koyduktan ve parantez açıp tırnak işaretleriyle birlikte açıp-kapattıktan sonra içeriğinde aynı css de olduğu gibi;
tag seçmek için direk tag ismi örneğin body tagından bi işlem yapmak için;
veya id ye göre seçmek için sharp( # ) işaretiyle birlikte;
veya class a göre seçmek için nokta( . ) işaretiyle birlikte;
jQuery seçicilerde hiyerarşi de kullanabilirsiniz. tıpkı css de olduğu gibi diyelim body nin altında bir div bu div in içinde bir ahmet class lı div ve bu divinde içinde ahmetakan id li bi a tagı var;
Gördüğünüz gibi bir nesneyi seçerken diyelim ahmetakan id li a tagını seçerken sadece id sini tanımlasakta yetiyor. yani .ahmet -> div.ahmet görevini veya #ahmetakan -> a#ahmetakan görevini de görebiliyor.
Diyelim class ı ahmet olan iki tag var. birisi div birisi a
Dediğimizde jQuery bunların ikisini de seçer.
Ama;
Dediğimizde yalnızca div taglarından class ı ahmet olanları seçer.
Bir diğer mevzu çoklu seçim. 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 virgül( , ) ile birden fazla seçim yapabilirsiniz;
Bu durumda belirleyeceğiniz işlevi ikisine de gerçerli kılar.
Seçicilerle ilgili bir diğer can alıcı nokta özelliğine göre nesne seçimi. Diyelim bir sürü a tagımız var ama href özellikleri anasayfa.htm, index.php ve ana.html şeklinde bu 3 ünden birisi. ama 50 60 tane var bu a tagından diyelim.. Ben yalnızca href özelliği anasayfa.htm olanları almak istiyorum.
jQuery bu konudada Css yi taklit etmiş( taklit diyince kötü bişe algılamayın. iyki böyle yapmış çünkü çok daha basitleşmiş bizim için hem öğrenimi hem kullanımı. ) hah ne diyoduk: yalnızca bi özelliği = bişe olanları seçmek için css deki gibi şu kodu kullanıcaz;
Bu kod ilk yazdığım a tagına işlev gerçekleştirecektir.
Veya mesela yalnızca href özelliği .php yle biten a taglarını seçmek istiyorum;
Veya yalnızca ana ile başlayan a taglarını seçelim;
Veya yalnızca içinde herangi bi yerlerde dex kelimesi geçenleri seçmek istiyorum;
Veya href özelliği olsun yeter içeriği salla diyosan;
Bi tane de çoklu deniyelim ana ile başlasın içinde .htm geçsin ve l harfiyle bitsin. bu a taglarından 3 yü seçecektir bu özelliklere uyduğu için;
Veya özellikler arasında değilde bi <p>metin paragrafı</p> direk tagın içindeki metinde belli bi özellik arıyalım. mesela içinde agraf geçen p leri arıyalım;
bu şekilde de yazdığımız paragrafı seçebiliriz. Burada dikkat edilmesi gereken şey :contains in büyük küçük harfe duyarlı olması. yani neyse tam onu yazmalısınız.
Veya görünüm olarak gizli yani
özelliğindeki nesneleri seçelim;
Veya gizlileri boş verip görünenleri seçelim;
Bu konu da anlatılması gereken aslında input seçicileri diye ayrı bi mevzu var ama ona hiç gerek duymuyorum. çünkü mesela :text dersek en son öğrendiğimiz [type=text] le aynı veya :checkbox dersek [type=checkbox] la aynı. bu şekilde tüm type ları ikinokta( : ) koyarak kısaca yazabilirsiniz. Ama dediğim gibi bence gereksiz çünkü zaten var.
Ve geçelim bir diğer mevzu seçtiğiniz nesnenin sırası ile alakalı seçimler yapma. Yani seçtiğiniz nesnelerden birden çok varsa hangi sıradakini belirtebilirsiniz. bunu yaparsanız istediğiniz sıradakine işlevi uygular. yapmazsanız diyelim a tagını seçtiniz tüm a taglarına o işlevi uygular. Şimdi örneğin belli nesneler arasından 4. sıradakini almayı veya çift sıradakileri almayı veya ilk ini veya sonuncu yu almayı görelim;
Diyelim böyle bir sayfamız var; Bu a tagları arasında gidip gelicez şimdi;
Örneğin ilk ini seçelim. yalnız bu sırayla alakalı seçimleri yaparken dikkat edeceğimiz kural sıralamanın 0 dan başlaması. yani bizim 1. gördüğümüz ilk elemanın liste sırası 0 dır. veya çiftleri seç dersek bize göre( gördüğümüz elemanlardan ) 1. yi alarak başlar 3. yü 5. yi alarak devam eder ama aslında o 0, 2, 4 ü almıştır. Pardon ne diyoduk: ilk ini seçelim;
Sonuncuyu seçelim;
2. sıradakini seçelim
3 den sonrasını seçelim;
3 den öncesini seçelim;
Şimdi de çift ve tek leri seçelim. ikinokta dan sonra çiftler için even tekler için ise odd
jQuery de tonla seçici var. Burda hepsini anlatmadım. Ama bundan fazlasına ihtiyaç duymayacağınızı garanti edebilirim.
Bir sonraki dersimizde yavaş yavaş işlevlere girişicez. Şimdiye kadar anlattığım seçicilerin tek başına hiç bir amacı yok. $('#ahmet').islev(parametre); diyerek bir dahaki dersimizde ilk işlevlerimizi oluşturucaz.
edit: jQuery Dersleri #3 | İşlevlere giriş <- Bu bağlantıyla 3. ders e geçebilirsiniz.
eskiden Javascript 'le bir nesneyi id ye göre seçmek için şu kodu yazardık;
HTML:
document.getElementById('ahmet')
HTML:
$('#ahmet')
HTML:
document.getElementByClass('ahmet')
HTML:
$('.ahmet')yani jQuery de nesne seçmek için standart olarak dolar işareti( $ ) koyduktan ve parantez açıp tırnak işaretleriyle birlikte açıp-kapattıktan sonra içeriğinde aynı css de olduğu gibi;
tag seçmek için direk tag ismi örneğin body tagından bi işlem yapmak için;
HTML:
$('body')
<body></body>
HTML:
$('#nesneidsi')
<a id="neneidsi"></a>
HTML:
$('.classismi')
<p class="classismi"></p>
HTML:
$('body div .ahmet #ahmetakan')
<body>
<div>
<div class="ahmet">
<a id="ahmetakan"></a>
</div>
</div>
</body>Diyelim class ı ahmet olan iki tag var. birisi div birisi a
HTML:
$('.ahmet')
<div class="ahmet"></div>
<a class="ahmet"></div>Ama;
HTML:
$('div.ahmet')
<div class="ahmet"></div>
<a class="ahmet"></div>Bir diğer mevzu çoklu seçim. 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 virgül( , ) ile birden fazla seçim yapabilirsiniz;
HTML:
$('#ahmet , p.akan')
<herangibitag id="ahmet"></herangibitag>
<p class="akan"></p>Seçicilerle ilgili bir diğer can alıcı nokta özelliğine göre nesne seçimi. Diyelim bir sürü a tagımız var ama href özellikleri anasayfa.htm, index.php ve ana.html şeklinde bu 3 ünden birisi. ama 50 60 tane var bu a tagından diyelim.. Ben yalnızca href özelliği anasayfa.htm olanları almak istiyorum.
jQuery bu konudada Css yi taklit etmiş( taklit diyince kötü bişe algılamayın. iyki böyle yapmış çünkü çok daha basitleşmiş bizim için hem öğrenimi hem kullanımı. ) hah ne diyoduk: yalnızca bi özelliği = bişe olanları seçmek için css deki gibi şu kodu kullanıcaz;
HTML:
<a href="anasayfa.htm"></a>
<a href="index.php"></a>
<a href="ana.html"></a>
HTML:
$('a[href=anasayfa.htm]')Veya mesela yalnızca href özelliği .php yle biten a taglarını seçmek istiyorum;
HTML:
$('a[href^=.php]')
HTML:
$('a[href$=ana]')
HTML:
$('a[href*=dex]')
HTML:
$('a[href]')
HTML:
$('a[href$=ana][href*=.htm][href^=l]')Veya özellikler arasında değilde bi <p>metin paragrafı</p> direk tagın içindeki metinde belli bi özellik arıyalım. mesela içinde agraf geçen p leri arıyalım;
HTML:
$('p:contains("agraf")')Veya görünüm olarak gizli yani
HTML:
<div style="display:none"></div>
HTML:
$('div:hidden')
HTML:
$('div:visible')Bu konu da anlatılması gereken aslında input seçicileri diye ayrı bi mevzu var ama ona hiç gerek duymuyorum. çünkü mesela :text dersek en son öğrendiğimiz [type=text] le aynı veya :checkbox dersek [type=checkbox] la aynı. bu şekilde tüm type ları ikinokta( : ) koyarak kısaca yazabilirsiniz. Ama dediğim gibi bence gereksiz çünkü zaten var.
Ve geçelim bir diğer mevzu seçtiğiniz nesnenin sırası ile alakalı seçimler yapma. Yani seçtiğiniz nesnelerden birden çok varsa hangi sıradakini belirtebilirsiniz. bunu yaparsanız istediğiniz sıradakine işlevi uygular. yapmazsanız diyelim a tagını seçtiniz tüm a taglarına o işlevi uygular. Şimdi örneğin belli nesneler arasından 4. sıradakini almayı veya çift sıradakileri almayı veya ilk ini veya sonuncu yu almayı görelim;
Diyelim böyle bir sayfamız var; Bu a tagları arasında gidip gelicez şimdi;
HTML:
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
HTML:
$('a:first')
HTML:
$('a:last')
HTML:
$('a:eq(1)')
liste sıraları 0 dan başladığı için bizim gördüğümüz 2. elemanın liste sırası 1
HTML:
$('a:gt(3)') // 4, 5, 6, 7
HTML:
$('a:lt(3)') // 1, 2Şimdi de çift ve tek leri seçelim. ikinokta dan sonra çiftler için even tekler için ise odd
HTML:
$('a:even') // 0, 2, 4
$('a:odd') // 1, 3, 5jQuery de tonla seçici var. Burda hepsini anlatmadım. Ama bundan fazlasına ihtiyaç duymayacağınızı garanti edebilirim.
Bir sonraki dersimizde yavaş yavaş işlevlere girişicez. Şimdiye kadar anlattığım seçicilerin tek başına hiç bir amacı yok. $('#ahmet').islev(parametre); diyerek bir dahaki dersimizde ilk işlevlerimizi oluşturucaz.
edit: jQuery Dersleri #3 | İşlevlere giriş <- Bu bağlantıyla 3. ders e geçebilirsiniz.
