JQuery_emresupcin

 

Merhaba sevgili okurlar,

Az önce yazmış olduğum makalemde sizlere JQuery’i kapsamlı anlatmaya çalıştım ancak özelliklerine fazla değinemedim. Özelliklerini ayrı bir makalede anlatma gereği duydum. Neyse sözü fazla uzatmadan yazımıza geçelim;

 

JQuery 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:

 

1   $('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 ile 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.

 

1   $("#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 (xmljson) 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.

 

1   $.ajax({
2           type: "POST",
3           url: "form.php",
4           data: "isim=Emre&yas=18"
5   });

 

Bu da basitleştirilmiş ve kolaylaştırılmış versiyonu:

1   $.post( "form.php", {isim:"Emre", yas:"18"} );

 

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.

Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:JQuery Nedir? Nasıl Kullanılır?

Sonraki Yazı:Dreamweaver’da Rollover Image Nasıl Yapılır?

YORUMLAR
SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.