Jquery basitçe John Resig tarafından geliştirilmeye başlanmış ve bugüne kadar birçok kişi tarafından eklentisi yazılmış olan kullanımı kolay bir javascript kütüphanesi olarak tanımlanabilir. Jquery.com anasayfasında basit bir örnek var ve bu örnek çok kısa bir javascript koduyla nasıl ilginç ve faydalı şeyler yapabileceğinizi göstermek üzere yazılmış uygulamalı bir tanıtım kodu. Jquery ile belgenizdeki herhangi bir öğeye erişmek için fazla çaba sarfetmenize gerek yok. Kolayca herhangi bir öğeye erişebilir, içeriğini değiştirebilir, css özelliklerini değiştirebilir, animasyon uygulayabilirsiniz. Bunun yanında çok faydalı bir kullanım alanı da ajax uygulamaları geliştirmek. Kütüphanenin son sürümünün (v1.2.3) boyutu yaklaşık 100 kb ama paketlenmiş hali 30kb yani birçok web sitesinde bulunan resim dosyaları kadar. Bu yüzden verimli bir şekilde kullanılabiliyor.
Jquery, yapısı gereği eklenti yazmaya çok uygun. Jquery için yazılmış eklentileri sitesindeki plugins bölümünde bulabilirsiniz. Aklınıza gelebilecek her türlü ihtiyaç için eklentiler yazılmış. Jquery ifadeleri klasik yapısal programlama ifadelerinden biraz farklı bir yapıya sahip. Herşeyden önce ihtiyacınız olan işlemleri yapmak için farklı ifadeler kullanmak yerine zincirleme bir işlemler dizisi kullanabilirsiniz. Çünkü herhangi bir işleve yapılan çağrı yine bir jquery nesnesi döndürüyor ve bu sayede üzerinde tekrar tekrar işlem yapabileceğiniz zincirleme ifadeler oluşturabilirsiniz. Jquery.com da yer alan örnek ifadeye bir göz atalım:
$("p.surprise").addClass("ohmy").show("slow");
Burada ilk dikkatinizi çeken $ işareti aslında jquery nesnesini oluşturan temel işlevin adı. Bazı kaynaklarda bunun yerine jquery() kullanıldığını görebilirsiniz. $ şeklindeki kullanımın işleri kolaylaştırmak için sonradan eklendiğini tahmin ediyorum.
Parametre olarak verilen "p.surprise" ise bir seçici sözcesi. Yeri gelmişken, jquery 'deki query kelimesi Türkçe'de sorgu anlamına geldiğini söylemeliyim. Jquery ile sanki bir veritabanında sorgulama yapıyormuş gibi sayfanızın tamamında yada herhangi bir bölümünde istediğiniz koşullara uyan öğelere erişebilirsiniz. Bu sizi şaşırtmasın çünkü jquery ile sadece sayfanızdaki herhangi bir öğeye değil aslında bir eşlemeye uyan tüm öğelere erişirsiniz. Yani jquery içsel bir döngüyle çalışır. Hatta each işlevi ile bu sorgudan dönen sonuçlar üzerinde bir döngü kurabilir ve her öğe üzerinde işlem yapabilirsiniz.
Örneği açıklamaya devam edelim. İfademizin ilk kısmı olan $("p.surprise") ile surprise sınıfıyla tanımlanmış tüm p imlerine yani tüm paragraf öğelerine erişiyoruz. Yani bu ifade ile sayfamızda bulunan
<p class="surprise">merhaba jquery</p>
şeklinde bir öğeyi (ve varsa diğerlerini de) elde ederiz. Zincirin ikinci kısmı olan .addClass("ohmy") ile bu öğeye ohmy sınıfını ekliyoruz. Paragrafımızın yeni hali şöyle oluyor:
<p class="surprise ohmy">merhaba jquery</p>
İfademiz, zincirimizin son parçası olan .show("slow") ile tamamlanıyor. Burada paragraf öğemizi bir efekt kullanarak görünür kılıyoruz ve hızını da parametre olarak verdiğimiz değerle ayarlıyoruz. Bu değer örnekteki gibi öntanımlı sabitlerden biri de olabilir (slow,normal,fast) ms cinsinden zaman da olabilir. Ayrıca jquery ile kendi animasyonlarınızı da oluşturabilirsiniz. Sayısal olarak arttırılabilir değerlerden oluşan iki grup css sınıfı arasında belirli bir zaman içinde geçiş yaparak istediğiniz animasyonları oluşturabilirsiniz.
Yazımın sonunda ilgilenenler için çok faydalı olacağını düşündüğüm görsel bir jquery rehberi sitesinin adresini vermek istiyorum. Visualjquery.com adresinde jquery kütüphanesinin işlevlerini kategorilere ayrılmış olarak listeleyen ve örneklerle açıklayan bir rehber bulabilirsiniz. Sitenin kendisinin jquery ile oluşturulduğunu belirtmeme gerek yoktur sanırım.
Hiç yorum yok:
Yorum Gönder