Eğer jquery seçicisi hoşunuza gittiyse jquery ekibinin sadece seçici kütüphanesi olarak hazırladığı ve dağıttığı Sizzle adlı kütüphane ile javascript geliştirmeleriniz için büyük kolaylık saplayabilir. Makalenin devamnda sizzle ile detaylı bilgiye ulaşabilirsiniz.
Sizzle.js ile jquery seçicisini kullanma
Web projelerinizde sürekli javascript’in document.getElementById, getElementByName, getElementsByClassName gibi seçicileri kullanmaktansa jQuery kullandıysanız eğer o seçicileri kullanabilmektesiniz böylelikle document.getElementByClassName('test')
yerine $('.test')
yazmanız yeterli olacakltır. Şİmdi ise Sizzle.js’nin bazı özelliklerini görelim.
Sizzle.js’nin bazı özellikleri
- Hiçbir kütüphane ile bağımlılığı yoktur
- En sık kullanılan seçiciler arasında hızı ile öne geçen bir seçicidir.
- gzip ve minifield ile sadece 4KB
- Kolay kullanımlı API ile geliştirilebilir.
- CSS3 Seçicilerin tümünü desteklemektedir
Sizzle.js’nin bazı kullanım yerleri
- Has seçicisi ile nesnenin varlığını kontrol etme mesela p etiketi altında table olan p etiketlerini almak isterseniz şu şekilde bir kodlama yapmalısınız…
1 | Sizzle('p:has(table)') |
- Pozisyon seçicileri kullanmayı alttaki tabloda görebilirsiniz.
Pozisyon pseudo’ları | Açıklama | Örnek | Örnek Açıklama |
---|---|---|---|
:first | ilk nesneyi seçme | Sizzle(tr:first) | İlk tr etiketini seçiyoruz |
:last | Son nesneyi seçme | Sizzle(tr:last) | Son tr etiketini seçiyoruz |
:odd | İndex değeri tek olan nesneleri seçer | Sizzle(tr:odd) | İndex değeri 1-3-5-7… olan tr etiketlerini seçiyoruz |
:even | İndex değeri çift olan nesneleri seçer | Sizzle(tr:even) | İndex değeri 0-2-4-6-8… olan tr etiketlerini seçiyoruz |
:gt | Greater than(daha büyük)’in kısaltılmışıdır ve belirttiğimiz index değerinden büyük olaranları seçer | Sizzle(tr:gt(4)) | tr Index değeri 4’den büyük olanları seçiyoruz |
:lt | Less than(daha küçük)’in kısaltılmışıdır ve belirttiğimiz index değerinden küçük olanları seçer | Sizzle(tr:lt(4)) | tr Index değeri 4’den küçük olanları seçiyoruz |
:eq | Equal(eşite)’in kısaltılmışıdır belirttiğimiz index değerini seçer | Sizzle(tr:eq(4)) | Index değeri 4 olan tr etiketini seçer |
- Kolayca form nesnelerini seçebilirsiniz :input, :text, :checkbox, :file, :password, :submit, :image, :reset, :button
Sizzle.js kütüphanesi jQuery’nin kendi içerisinde kullandığı bir seçicidir ve sadece seçicilerini seçicileri çıkatılarak oluşturulmuştur Sizzle.js yani gidipte css(), append(), animate() gibi fonksiyonları kullanmaya kalkmayın çalışmayacaktır bu paket sadece nesne seçim işlemleri için kullanılmaktadır eğer hem jQuery fonksiyonlarını hemde seçicisini kullanmak istiyorum derseniz o zaman jquery.com’dan jquery kütüphanesini kullanmanız gerekecek
Sizzle.js kütüphanesini indirmek için tıklayınız.
çok faydalı oldu eline sağlık
Teşekkürler