JQuery Nedir ?

jQuery, hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. 2006 başında John Resig tarafından duyurulmuş ve hali hazırda 15 kişilik bir ekip tarafından gelişimi sürdürülmektedir. Açık kaynak bir framework olmasından dolayı üzerine bir çok eklenti yazılmış ve bu sayede de tüm dünyada kullanıcı kitlesi bir anda artmıştır.

www.jquery.com adresinden indirebileceğiniz jQuery, sıkıştırılmış ve sıkıştırılmamış olmak üzere iki farklı şekilde dağıtılmaktadır. Sıkıştırılmamış sürümü yaklaşık olarak 61 KB iken, sıkıştırılmış sürümü ise yaklaşık 21 KB. Kısacası dosya boyutları hem javaScript, hem ajax, hem de efekt kütüphanesi için yeterince hafif. Eğer ki jQuery’yi oluşturan kodlara bakmak ve kodlar üzerinde değişiklik yapmak gibi bir düşünceniz yoksa her zaman için sıkıştırılmış sürümünü indirmeniz önerilir.

JQuery nasıl çalışır ?

JQuery tek bir JavaScript dosyasından ibarettir. Bu tek dosya sayfaya aşağıdaki kod kullanılarak dahil edilir.

JQuery’nin çalışması için DOM hazır olması gerekir. Bunun için temelde JQuery kodları şu block içine yazılarak DOM hazır olduğunda kodların çalışması sağlanır:

$(document).ready(function(){

// kod

// kod

});

JQuery $ veya $. fonksiyonu ile kullanılabilir. Örneğin $ fonksiyonu ile jquery kullanımı:

$(”div.test”).html(”html içerik”);

Sayfadaki bir elemanı temel javascript metodu olan getElementByClass veya getElementById yerine JQuery sayesinde $ fonksiyonu ile seçip, yine JQuery sayesinde innerHTML yerine html() fonksiyonu ile iç değer atandı.

$. fonksiyonu ise daha çok global eylemler için kullanılmakta. $. aynı zamanda $(). olarak da yazılabilir. Aynı ifadenin farklı yazılışlarıdır. Örneğin $. ile jquery kullanımı:

$.each( { ad: “John”, soyad: “Resig” }, function(a, s){

alert( “Ad: ” + a + “, Soyad: ” + s );

});

JQuery’nin Özellikleri

Basit kullanım: Özellikle seçiciler yardımıyla tek bir satırda ilgili özelliğe sahip tüm elemanları seçebiliyorsunuz. Örneğin sayfadaki tüm div etiketlerini $(’div’) kodu ile seçebiliyor ve bu seçilenierin tümüne yine tek bir satırda çeşitli özellikler tanımlayabiliyorsunuz.

Zincirlenebilirlik: jQuery kodu yazarken seçiciler ile seçtiğiniz element grubuna vereceğiniz özellikleri zincirleyerek zincirleyerek tek satırda birden fazla işlemi yapabilirsiniz. Örneğin aşağıdaki kod yardımıyla tüm linkleri önce yakalarsınız, sonra bir class ataması yaparsınız ve son olarak da onclick olayına bir fonksiyon eklersiniz:

$(’a').addClass(’deneme’).click(fonksiyon);

Eklentiler: jQuery eklentileri, belli görevleri yapan ve jQuery kütüphanesi üzerinden geliştirilmiş kod parçacıkları olarak tanımlayabiliriz. Örneğin web sitenizde “sekme (tab) menüler” kullanmak isterseniz Tabs eklentisi ya da bir dosya yükleme uygulaması sunmak isterseniz jqUploader eklentisi ihtiyacınızı karşılamaya hazırdır. Buna benzer yüzlerce jQuery eklentisini Google yardımıyla kolaylıkla bulabilirsiniz.

Uyumluluk: Internet Explorer 6.0+, Firefox 1.5+, Safari 2.0+ ve Opera 9.0+ ile sorunsuzca çalışmaktadır.

Efektler: jQuery, script.aculo.us gibi tamamen bir efekt kütüphanesi olmamasına rağmen yine de sık kullanılan efektleri sunuyor. Örneğin fadeOut efekti sayesinde bir nesnenin görünürlüğünü yavaş yavaş azaltırken, show efekti sayesinde daha önceden gizlenmiş bir nesneyi görünür kılabiliyorsunuz. En önemlisi de bu efektleri kullanmak çok basittir. Alttaki örnek kodda, “hide” efektini kullanarak “myDiv” isimli nesneyi yavaşça gizlemiş oluyoruz.

$(”#myDiv”).hide(”slow”);