jQuery dersleri 1 – jquery nedir?

Şubat 3, 2009 | In: Ajax, jQuery, javascript

Ajax gibi metodlarla ivme kazanan ve hızla gelişen javascript kütüphaneleri getirdikleri yeniliklerle tasarımcı yazılımcı arkadaşlara müthiş vakit kazandıracak uygulamalar geliştirdiler. Bunların içerisinden sıyrılan bir kütüphanede varki son derece kolay kullanımı fonksiyonelliği ve sayfalarımızı şenlendirmesi ile tüm dikkatleri üzerine çekmeyi başardı.

jQuery Nedir?
jQuery hem javaScript hem ajax hem de efekt kütüphanesi bulunan bir js framework olarak sunulmaktadır.
15 kişilik bir ekip tarafından gelişimi sürdürülen bu uygulamanın resmi web sitesi olan www.jquery.com‘dan daha fazla bilgi alabilirsiniz. Bu adreste test etmeniz ve incelemeniz için eklentilerde bulabilirsiniz.
jQuery Nasıl Kullanılır?

jQuery
jQuery, sıkıştırılmış ve sıkıştırılmamış olarak bulabilir ve kullanabilirsiniz, herhangi bir değişikliğe gitmeyecekseniz sıkıştırılmış sürümü rahatlıkla kullanabilirsiniz.
Tek bir js dosyasından oluşan bu kütüphaneyi 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.

<script type=”text/javascript” src=”jquery-latest.js”></script>
jQuery’nin Özellikleri Nelerdir?
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” 
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);

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 

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.

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″} );



1 Response to jQuery dersleri 1 – jquery nedir?

Avatar

zuhtu kayali

Ağustos 5th, 2009 at 08:12

html-DOM-javascript-Ajax-JQuery-PHP-MySql temelli projeler geliştiriyorum. sitenizden haber beslemesi alam istiyorum. paylaşımlarınız için teşekkürler

Comment Form

Categories