Jquery Dersleri 2 - First ve Last Seçicileri

Değerli okurlarımız, bu yazımızda da JQuery derslerimize devam ediyoruz. İlk dersimizde seçicilere giriş yaptık ve DOM kullanarak elde ettiğimiz html elementlerini $("element elde etme metodu") kullanarak değiştirmeyi, css class eklemeyi, html kodu eklemeyi inceledik. Ayrıca filtrelerin kullanımına da örnekler verdik. (Basic selectors, Attribute Filters)

Bu dersimizde ise Jquery filtrelerini incelemeye devam edeceğiz.

Temel Filtreler

Temel filtreler(Basic Filters) bir veya daha fazla elemente çeşitli kriterler kullanarak erişmeyi sağlarlar. Örnek vermek gerekirse, bir DOM elementinin ilk veya sonuncu elementine erişmek veya bir listede tek veya çift elementlere erişim veya bir elemente index numarasıyla erişmeyi sayabiliriz.

:first ve :last kullanımı

:first ve :last kullanarak herhangi bir spesifik elementin ilk veya sonuncu elemanına ulaşabilirsiniz, bunun pratikte kullanımını örneklersek mesela bir liste yaptık.

Not: ul (HTML dilinde Unordered list, yani sırasız liste oluşturmaya yarar, li ise list-item yani her bir liste elemanını temsil eder)

<ul id="ul-ders-2">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
</ul>

Şimdi JQuery kodunu oluşturalım.

$("#ul-ders-2 li:first").css("color", "#0000FF");
$("#ul-ders-2 li:last").addClass("liste-son");

Sıra geldi bu 2 satırlık JQuery kodunun açıklamasına;

$(" ").xxx(""); şeklindeki tanımlama aslında her iki satırda da aynıdır, sebebi dolar işareti ve parantez içerisinde tırnak içinde seçmek istediğimiz elementi belirtiriz.

Sonra .xxx olan yerde ise, seçtiğimiz elementle ilgili hangi metodu kullanacağımızı belirtiriz. ("") tekrar tırnak içerisinde ise, bu metoda ait parametreleri tanımlarız. Bunların sayısı kullandığımız metoda göre değişebilir, daha fazla ayrıntı için JQuery dokumantasyonuna bakabilir ve buradan hangi paramatrenin ne işe yaradığını ve ne tip veri tipi gerektirdiğini de öğrenebilirsiniz.

Bu açıklamalardan sonra gerçek örneğimize devam edelim...

Satır-1

$("#ul-ders-2 li:first") yazdığımız zaman yukarıda da belirttiğimiz gibi seçicimizi tanımlarız, burada # sembolü (number) olarak geçer, ilk dersimizde de öğrendiğimiz gibi, bu bir elementi id özelliğini kullanarak seçmeye yarar.

Bizim örneğimizde <ul id="ul-ders-2"> sırasız listemizin id si ul-ders-2 olarak tanımlandığından bu listeyi seçmiş oluruz. Aynı HTML dosyasında farklı bir elemanı id özelliği ile seçmek isteseydik yine ona ait id yi #elemanid şeklinde yazarak elde edebilirdik.

Daha sonra li:first temel filtersini kullandık, :first yukarıda anlattığımız gibi herhangi bir elemanın ilk elementine gitmeyi sağlıyordu, burada sırasız listesinin ilk elemanını seçmiş olduk , yani Item A elamanını seçtik. Artık elemanımızla ilgili istediğimiz değişikliği yapabiliriz. Bu da .css ile başlayan metodu kullanarak css koduna 2 parametre ile renk ve değer girerek ilk liste elemanının rengini mavi yapmak olacak. Bunu da "color", "#0000FF" şeklinde ("parametre-1","parametre-2",...) tanımlıyoruz.

Satır-2

Bu satırda ise yine seçicileri ve filtre özelliğini kullanarak listemizin son elemanını seçiyoruz. $("#ul-ders-2 li:last") daha sonra .xxx(""); syntaxını kullanarak seçtiğimiz listemizin son elemanını üzerinde hangi işlemi yapmak istediğimizi belirtiyoruz.

Bu seferki örnekte ilkinden farklı olarak kendimiz css kodunu vermek yerine, direkt olarak kullanmak istediğimiz css classımızı bu elemana ekliyoruz.

Bu işlemi de addClass("") metodunu kullanarak yapıyoruz, parantez içinde de parametre olarak class ismini veriyoruz, örneğimizdeki ismi .addClass("liste-son"). Artık css dosyamızdan bu class üzerinde ekleme yaparak listemizin son elemanının biçimlendirmesi üzerinde değişiklik gerçekleşmesini sağlayabiliriz.