jQuery dünyasına adım atıyoruz
javaScript kütüphaneleri kendilerine çok sağlam bir yer edindiler. Gerek kod yazma sürecini azaltmaları, gerek tarayıcı farklılıklarından doğan pek çok sorunla boğuşmamızı engellemeleri ve nesne tabanlı yapıları itibariyle javaScript kütüphaneleri çabuk benimsendiler. Prototype.js‘nin tetiklediği bu süreçte yüzlerce javaScript kütüphanesi duyuruldu. Dolayısıyla bunların arasından bir seçim yapmak gerekiyor. Bugüne kadar benim seçimim Prototype.js idi ama artık çok daha isabetli bir seçim olduğuna inandığım jQuery ile yoluma devam ediyorum.
jQuery nedir ve kimler tarafından kullanılıyor?
jQuery hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. 2006′nın Ocak ayında bir javaScript gurusu olan John Resig tarafından duyurulmuş. Şu anda ise 15 kişilik bir ekip tarafından gelişimi sürdürülüyor. Lisans konusuna da kısaca değinmek gerekirse, MIT veya GPL lisansının şartlarına uyduğunuz sürece kendi uygulamalarınızda kullanabiliyorsunuz. Bu konuda jQuery’nin resmi web sitesi olan www.jquery.com‘dan daha fazla bilgi alabilirsiniz. Hem bu web sitesinden jQuery ile ilgili dokümantasyona, eğitsellere, eklentilere ve sorularınızı yazabileceğiniz foruma da ulaşabilirsiniz.
jQuery çok geniş bir kullanıcı kitlesine sahiptir. Bunlardan da biraz örnek vermek istiyorum. Sosyal haber sitesi Digg, açık kaynak kodlu projelere ev sahipliği yapan SourceForge, blog sitelerini analiz eden Technorati, RSS kaynaklarımızı yönettiğimiz FeedBurner ve birçoğumuzun kullandığı blog yazılımı WordPress bu örneklerden yalnızca birkaçıdır. Daha fazlası için jQuery Kullanan Siteler sayfasına bakabilirsiniz.
jQuery’yi nasıl indireceğim ve kullanacağım?
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. Gördüğünüz gibi 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ü indirmenizi tavsiye ediyorum.
Eğer indirdiyseniz artık sıra onu kullanmaya gelmiş demektir. jQuery tek bir dosyadan oluşuyor. Bu dosyayı da web sayfanıza aşağıdaki örnekte olduğu gibi dâhil etmelisiniz. Web sayfanıza dahil ettikten sonra artık jQuery’nin bizlere sunmuş olduğu özellikleri kullanmaya başlayabilirsiniz. Özellik demişken şimdi de jQuery’nin özelliklerine kısaca göz atalım 
<script type="text/javascript" src="jquery-latest.js"></script>
jQuery’nin birkaç özelliği
Basit kullanım: Gerçekten jQuery’nin son derece basit bir kullanımı var. Yapmak istediğiniz pek çok işlemi çoğu zaman “tek bir satırda” halledebiliyorsunuz. Örneğin web sayfanızdaki bütün div etiketlerini $('div') kodu ile yakalayabiliyorsunuz. Yok ben sadece class özniteliği “baslik” olan div etiketlerini yakalayacağım derseniz $('div.baslik') kodunu kullanmanız yetiyor. Yani jQuery’nin sloganında da yazdığı gibi: “daha az yazın, daha fazlasını yapın”
Zincirlenebilirlik: jQuery’nin Sihri (The Magic of jQuery) olarak isimlendirilmiş bu özellik sayesinde çok kısa kodlar yazabilirsiniz. jQuery içerisindeki methodları birbirine zincirleyerek tek satırda birden fazla işlemi yapabilirsiniz. Örneğin şöyle bir kod ile web sayfanızdaki 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’nin bir başka mükemmel özelliği de eklentileridir. 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, web sayfanıza bir mp3 player yerleştirmek isterseniz jMP3 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 eklentisi vardır ve vakti geldikçe de bu konuda tanıtımlar yapacağım
Uyumluluk: jQuery, şu anda en çok kullanılan web tarayıcılarında çalışabilmektedir. Internet Explorer 6.0+, Firefox 1.5+, Safari 2.0+ ve Opera 9.0+ ile sorunsuzca jQuery kullanabilirsiniz. Bunun haricinde Prototype.js gibi başka kütüphaneler ile birlikte de uyum içerisinde kullanabilirsiniz. Bu konuda jQuery’yi Diğer Kütüphaneler İle Birlikte Kullanmak sayfası size yardımcı olacaktı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");
AJAX: jQuery diğer konularda olduğu gibi AJAX konusunda da kullanıcılarına kolaylıklar sağlıyor. Böylece web sayfanızın tamamı yüklenmeden, başka bir web sayfası ile etkileşime geçebiliyorsunuz. AJAX işlemi başlamadan önce veya bittikten sonra bir olayı tetiklemek, sunucudan gelen veri türüne göre (xml, json) işlem yapmak, belli zaman aralıklarında tekrar tekrar istekler yollamak v.s. jQuery ile yapabileceklerinizin küçük bir bölümü. Örneğin alttaki örnek kod ile AJAX kullanarak form.php dosyasına Erhan ve 23 verilerini post etmiş oluyoruz.
$.ajax({
type: “POST”,
url: “form.php”,
data: “isim=Erhan&yas=23″
});
Bu da basitleştirilmiş ve kolaylaştırılmış versiyonu:
$.post( "form.php", {isim:"Erhan", yas:"23"} );
Sonuç…
Evet, basite indirgeyerek jQuery kütüphanesinden bahsetmeye çalıştım. Bundan böyle jQuery ile ilgili haberleri, kaynakları, örnek kodları ve kullanışlı eklentileri paylaşmaya gayret göstereceğim. Bu sayede Türkçe içeriğe de bir katkım olacağını düşünüyorum. Zira jQuery ile ilgili maalesef kendi dilimizde doğru düzgün bir kaynak bulunmuyor. Kendi web sitem haricinde bir de javam.org sitesinde de jQuery ile ilgili birkaç yazı bulabilirsiniz. Eğer sizin de bildiğiniz başka Türkçe jQuery yazıları varsa lütfen yorum kısmında belirtiniz
çok güzel bir makale eburhan
bense script.aculo.us ve prototype kullanıyordum ama tez zamanda jquery’e geçicem
Gerçekten de kullanılası bir alet.
Bu kütüphanenin en iyi yanı kullanışının çok basit olması.
Merhaba Erhan,
jQuery Prototype Moo.tools un selector lerini test eden bir sayfa vardı prototype sonuçlarda gayet tatmın ediciydi. O sayfayı bulabilirsem tekrar buraya yazarım. Geliştirmekte olduğumuz bir proje için ajax ve js ihtiyaçlarımızı karşıladığımız DWR var (Direct Web Remoting) kendi içinde bir javascript kütüphenesi barındırıyor. Sanırım script.aculio.us ın kütüphanesi olması gerek. Ancak effectler için bir kütüphane seçmem gerekecek. Yazın bellirliyici bir nitelik taşıyor. O yüzden teşekkür ederim.
Güzel bir makale eburhan, teşekkürler, prototypten jquery’e geçirecek kadar güzel denilebilir
@Kadir Doğan
Bahsettiğiniz selector test’i için günlüğümde yazı yazmıştım
Alttaki linkten ulaşabilirsiniz.
Javascript kütüphanelerindeki Css Seçicileri ne kadar hızlı?
- - -
Diğer yorum yazan arkadaşlar. Yazıyı beğendiğinize sevindim. Teşekkür ederim
Evet belki de sizin sitenizde görmüştüm. Unutkanlığımı mazur görün :).
Bu yapılmış olan teste ve jquery tanıtım yazınına göre performans mı sade ve kolay yazım mı şeklinde bir tercih arasında kaldığımızı söylemem gerek
çok yararlı bir makale , teşekkürler…
@Kadir Doğan
Bildirgeç’te de bunun hakkında kısa bir yazı yazmıştım. Yine alttaki linkten ulaşabilirsiniz 
Kısacası şu anda jQuery’nin performans sorunu yoktur kesinlikle.
Dikkatinizi çekmek istediğim bir nokta var. O yazımda performansı düşüktü ama o zamanki jQuery sürümü 1.1.2 idi. Şu anki sürümü olan 1.1.3 ise bir önceki sürüme göre %800 daha hızlı
JQuery 1.1.3 çıktı. Şimdi %800 daha hızlı.
- - -
@fatih günaydın
Çok teşekkürler
Tamam jQuery kullanacak birisini daha kazandırdınız
Framework’lere nedense bir türlü ısınamadım, evet halâ old-school javascript ile -kendi yazdığım ufak sınıflarla- idare ediyorum
Fakat şu yazı, artık ‘bırak artık yns geri kafalılığı’ dedirtti. Özellikle eklenti olayı güzelmiş, bildirim için teşekkürler.
@Kadir Doğan
sevindim
@Yns
uzun süre ben de direndim ama bi noktadan sonra kullanmak zorunda kalıyorsun. Özellikle tarayıcı farklılıkları benim yılmamda önemli rol oynadı.
Sonunda yazmış olmana sevindim. Hadi hayırlısı, gerisini de bekleriz
Erhan jQuery’e transfer olmana çok sevindim
Diğerlerini aramayacağına eminim. Link için de teşekkür ederim.
@yakuter
Gerisi gelecek inşallah.
Evet sonunda yazabildim nihayet
@Altan
Yorumun için teşekkürler
Bir linkin lafı mı olur
gerçekten oldukça basit, anlaşılır ve bilgilendirici bir makale… kodlardan anlamak isteyipte bir türlü anlamayan ben bile anladım
devamını da isterim…
Devamı gelecek inşallah. Beni izlemeye devam edin
Uygulamalı olarak gösterseniz.. Böyle hiçbirşey anlamadım, daha yeniyiz…
merhalabar,
jquery ile post metodu ile çalışan bir form örneği bileniniz varmı?
Merhaba Erhan,
dedikten sonra jQuery i indirdim çalıştırdım ufak denemeler sonrasında kullanım kolaylığı ve gerçekten güzel düşünülmüş fonksiyonları ile harika bir kütüphane. Yazın jquery ile tanışmama vesile oldu. Teşekkürler
@fatih jQuery sitesindeki docs larda bir örnek mevcut
http://docs.jquery.com/Ajax#.24.post.28_url.2C_params.2C_callback_.29
erhancım çok güzel bir makale olmuş vakti gelmişti zaten
jQuery ile ilgili kafamdaki tek paradox performans idi 1.1.3 deki %800 lük hızlanmayı duyunca gayet sıcak bakmaya başladım açıkcası. Bu tür minimalist ve verimli uygulamaları oldum olası sevmişimdir
jQuery hakkında yazan bu kadar çok kişi olduğunu görmek çok güzel
jquery çok güzel bir kütüphane ancak firefoxta bana yavaş gelmesi ve efektlerde tıklama sırasında tekrar efekt çalıştırma gibi basit bir hatadan dolayı bırakmak zorunda kaldığım kütüphanedir. Ancak yeni sürümünde böyle sorunlar kalmadığı kanaatindeyim.
@ismailaltuntas
En son sürümünü (1.3.1.1) denemediysen mutlaka denemeni öneririm. Birçok sorunun giderildiğini ve hız artışının olduğunu göreceksin.
sayenizde güzel bir kütaphane hakkında, detaylı bir bilgi sahibi olduk. Teşekkürler
Güzel bir makale olmuş ben de bir arkadaşımın sayesinde jquery’e geçtim çok memnunum halâ da geliştirmeye çalışıyorum ama ajax’la birlikte kullanırken combobox’larda biraz sorun yaşadım birbirine bağlı bir çok combobox arasında bazen sorun yaratıyor. Buna rağmen yine de jquery’de ısrar ediyorum.
Kütüphane oldukca güzel ve anlattığın gibi kolay ve kullanışlı ama dikkatimi çeken şu oldu örneklerde php kodlarıyla yapılmış asp’de böyle bir kütüphaneyi kullanamazmıyım? Kullanmam gerekirse nasıl bir yol izlemeliyim… Yada html sayfalarında… Sanırım ben js konusunda bilgisizim özellikle kütüphaneler hakkında.
@Ali Beşkazalı
Asp, Php farketmez istediğin dil ile birlikte kullanabilirsin. Yalnız bu kütüphaneler javascript konusunda hiç bilgisi olmayanlara göre değildir. O yüzden önce javascript öğrenmeniz yararınıza olacaktır.
Jquery ye yeni başladım bence çok yararlı ancak gene de yeterince döküman bulunmuyor. yeni başlayanların google’da baya bi araştırıp etmesi gerekiyor. ilgilenenlere kolay gelsin
jquery ‘i çok iyi özetlemişsiniz. teşekkürler.
bu tür kütüphaneler ilk çıktığında ben de diklenmiştim bunlara
sonunda herkes gibi ben de bir kütüphane kullanmaya karar verdim. ufak çaplı bir araştırmadan sonra jquery’de karar kıldım. özellikle seçiciler çok iyi hazırlanmış.
aslında kendi sitesindeki documentation birlikte Türkçe’ye cevrilebilir. anlatımlar kısa ve öz. anlatan kişi kendi örneklerini de eklerse çok iyi olur.
@gokhanweb
Yazıyı beğendiğinize sevindim.
Aslında günlüğümde jQuery için Türkçe bir kaynak oluşturma çabasındayım. Gerçi bu konuda biraz yavaş kalıyorum. Fakat vakit buldukça jQuery ile ilgili Türkçe yazılar yazmaya devam ediyorum. jQuery etiketi altından hepsine ulaşabilirsiniz
WP için eklenti yazmayla ilgileniyorum. Malum WP jquery kullanıyor ve sanırım ajax uygulamalarını da jquery’ye dayandırıyor ya da jquery’den yararlanıyor.
Benim istediğim WP içindeki entegre kütüphaneyi nasıl kullanabileceğimize ilişkin küçük bir örnek, yazı bulabilmek. Özellikle WP’de AJAX uygulamaları için.
WP için yazılmış AJAX uygulamalarından incelediklerimde, eklentilere JQuery kütüphane dosyası da eklenmiş oluyor.
Eklentilerimde ekstra jquery kütüphanesi kullanmadan, WP’ye dahil edilmiş Jquery kütüphanesi kullanmak istiyorum, öneriniz var mı?
Güzel bir makale, çok faydalı oldu. Teşekkürler.
extJS ile başladık ama çok yavaştı. Yaşasın JQuery
slm Erhan, jQuery’den bahsetmen çok iyi olmuş, ben amatör bir css tasarımcısı olarak şunu sormak istiyorum, acaba JQuery’nin tasarımdaki farklılıkları çözmesine bir örnek verebilir misin acaba bloğunda, mesela ben bir site kodlarken yaptığım tasarımlar IE ve Firefox’ta farklı koordinatlarda açılıyor bazen fazlaca kaymalar oluyor, daha önce de sana bu konuda danıştığımda css reset dosyası ve css resetleme yöntemlerinden bahsetmiştin. Bu iki yöntemi de denedim fakat sonuç pek değişmedi
Kodlamalarımda javaScript yani jQuery kütüphanelerini kullanmadığım için olmuş olabilir mi? Veya her düzenli sitenin arkasında Javascript kodları da olmak zorunda mı? Cevabın için şimdiden teşekkürler 
Biraz uzun oldu ama …
@mbardak
Bahsettiğin sorunların jQuery ile veya javaScript ile ilgisi bulunmuyor. Sen her Css’ye yeni başlayan gibi tarayıcı farklılıkları konusunda sorun yaşıyorsun ki bu son derece doğal
Yapabileceğin tek şey var, o da CSS konusunda bol bol okumak ve pratik yapmak. CSS ile kodlanmış web sitelerinin css kodlarına bakıp, bu kodlardan bir anlam çıkarmak. Fatih Hayrioğlu‘nun sitesi bu konuda sana fazlasıyla yardımcı olacaktır
güzel makale olmuş eline sağlık