JQuery nasıl çalışır ?
JQuery-tr Wiki sitesinden
Konu başlıkları |
jQuery:Temel Bilgiler
Bu sizin jQuery'ye başlangıç yapmanız için temel oluşturacak bir yazıdır. Eğer henüz bir deneme sayfası oluşturmadıysanız, aşağıdaki içerikle bir html sayfası oluşturarak başlayın:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>
script etiketindeki src özelliği elinizdeki jQuery kütüphanesini gösterecek şekilde düzenleyin. Örneğin, eğer jquery.js HTML dosyanızla aynı klasördeyse şunu kullanabilirsiniz:
<script type="text/javascript" src="jquery.js"></script>Kendi jQuery kopyanızı jQuery indirme sayfasından indirebilirsiniz.
Belge Hazır Olduğunda Kodları Başlatmak
Birçok Javascript programcısının dönüp dolaşıp geldiği nokta programlarına şöyle bir kod eklemektir:
window.onload = function(){ alert("welcome"); }
Bu iki problemin de üstesinden gelmek için, jQuery'nin ready olayı (belgenin hazır olması durumu) olarak bilinen basit bir ifade yönetemi vardır:
$(document).ready(function(){ // Kodlarnız buraya ... });
ready olayı içinde, linklere tıklandığında ( click event/olayı) çalışacak bir fonksiyon atayalım:
$(document).ready(function(){ $("a").click(function(event){ alert("Geldiğiniz için teşekkürler!"); }); });
HTML dosyanızı kaydedip, tarayıcınızı yenileyin. Sayfanızdaki linke tıkladığınızda jQuery anasayfasına gitmeden önce bir uyarı penceresi açıyor olmalı.
event.preventDefault ile Click ve çoğu diğer olaylar için, öntanımlı davranışı değiştirebilirsiniz (bu örnekte linkin bizi jQuery sayfasına yönlendirmesi):
$(document).ready(function(){ $("a").click(function(event){ alert("Gördüğünüz gibi link artık sizi jquery.com adresine yönlendirmiyor."); event.preventDefault(); }); });
Örneğin Tamamı
Aşağıdaki eğer kodu kendi dosyanızda kullanırsanız HTML dosyasının nasıl görüneceğinin bir örneği. JQuery çekidek dosyalarını yüklemek için Google'ın CDN'sine bağlantı yapıldığına dikkat edin. Bunun yanında, burada kodlarımızın <head> içinde olmasına rağmen, bunun genellikle ayrı bir dosyada olması ve <script> etiketinin src özelliğiyle referans verilmesi daha tercih edilen bir durumdur.
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ alert("Gördüğünüz gibi link artık sizi jquery.com adresine yönlendirmiyor."); event.preventDefault(); }); }); </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>
CSS Sınıfı Ekleme/Çıkarma
Dikkat: Bundan sonraki örnekler ready olayı içinde yapılmalı ki belge hazır olduğunda çalışmaya başlayabilsin. (Detaylar için bkz. Belge Hazır Olduğunda Kodları Başlatmak)
Bir diğer sıkça yapılan iş de bir CSS (Cascading Style Sheet) sınıfını eklemek/çıkarmaktır.
Öncelikler <head> kısmına aşağıdaki gibi bir stil bilgisi ekleyin:
<style type="text/css"> a.test { font-weight: bold; } </style>
Şimdi de, kodunuza addClass çağrısı ekleyin:
$("a").addClass("test");
Şu anda bütün a elementleriniz kalın oldu.
Sınıfı kaldırmak için, removeClass methodunu kullanın:
$("a").removeClass("test");
- (CSS bir elemente birden fazla sınıf eklemeye izin verir.)
Özel Efektler
Sayfalanızı bir nebze daha öne çıkarmak için jQuery bize birkaç kullanışlı efekt sağlar. Bunu denemek için daha önce kullanığımız click olayını şu şekilde değiştirelim:
$("a").click(function(event){ event.preventDefault(); $(this).hide("slow"); });
Şimdi eğer bir linke tıklarsak link yavaşça kayboluyor.
Callback ve Fonksiyonlar
Callback diğer bir fonksiyona argüman olarak atanan ve ebeveyn fonksiyonu çalışmasını bitirdiğinde çalışan bir diğer fonksiyondur.Callback fonksiyonunun özelliği ise "ebeveyn" fonksiyonundan sonra gelen fonksiyonlar callback fonksiyon çalışmadan önce çalışabilir.
Bir diğer önemli nokta da callback'i nasıl düzgün bir şekilde atayacağımızdır. Burada doğru sözdizimi kullanmak önemlidir.
Argümanı olmayan callback
Hiçbir argümanı olmayan callback şu şekilde atanır:
$.get('myhtmlpage.html', myCallBack);
İkinci parametremizin sadece bir fonksiyon ismi olduğuna (parantezleri olmadan ve tırnak içinde değil) dikkat edin. JavaScript'de fonksiyonlar değişken gibi atanıp daha sonra çalıştırılabilirler.
Argümanı olan callback
"Eğer callback fonksiyonumuzda argüman kullanmak istersek nasıl olur?" diye sorabilirsiniz kendize.
Yanlış
Yanlış yol (Çalışmaz!)
$.get('myhtmlpage.html', myCallBack(param1, param2));
Bu çalışmaz çünkü ilk önce
myCallBack(param1, param2)
fonksiyonunu çalıştırır, daha sonra bu fonksiyonun sonucunu $.get() fonksiyonunun ikinci parametresi olarak atar.
Doğru
Yukarıdaki örnekte problem myCallBack(param1, param2)'nin bir callback fonksiyonu olarak atanmadan önce çalıştırılması. JavaScript ve dolayısıyla jQuery bu gibi durumlarda fonksiyon göstergesi (setTimeout fonksiyonunda olduğu gibi) bekler. Aşağıdaki kullanımda isimsiz bir fonksiyon tanımlanıp callback fonksiyonu olarak kaydediliyor. "function(){" ibaresinin kullanımına dikkat edin. İsimsiz fonksiyonumuz sadece tek bir şey yapıyor, o da param1 ve param2 parametreleriyle myCallBack fonksiyonunu çalıştırmak.
$.get('myhtmlpage.html', function(){ myCallBack(param1, param2); });
param1 ve param2 $.get sayfayı yüklemeyi bitirdikten sonra değerlendiriliyor.
Daha Fazla Okumak İçin
jQuery kullanıcıları Örnekler ve Adım Adım bölümlerinde sizin jQuery'yi öğrenme sürecinde yanınızda olacak güzel yazılar hazırladı.
Bunda sonra muhtemelen Anasayfadaki belgeleri okumaya devam edeceksiniz. Eğer herhangi bir sorunuz olursa jquery-turkish@googlegroups.com e-posta grubundan bize ulaşabilirsiniz.
