JQuery'de bir döküman üzerinden script kodlarının çalışması için dökümanın tarayıcıya başarılı bir şekilde yüklenmiş olması gerekir. Bunun için JQuery kodları aşağıdaki gibi bir ifade içerisine alınır :
$(document).ready(function(){
// Kod buraya
});
$(document).ready(function(){} ifades, web sayfasının script ile değiştirmek için hazır olduğu belirtmek için kullanılır. Eğer döküman hazır ise (ready durumunda) içerisine verilen function çalışacak demektir
JQuery ile bir elemente bir CSS class'ı atanabilir veya elementin CSS class'ı kaldırılabilir :
$("a").addClass("test");
Yukarıdaki örnekte bir a elementinin CSS class'ını test olarak değiştirilmektedir.
$("a").removeClass("test");
Yukarıdaki örnekte bir a elementinin test adndaki CSS class'ı kaldırılmaktadır.
JQuery'de bir fonksiyonun çalışmasından sonra heme arkasından başka bir fonksiyonun çağrılması sağlanabilir. Bunu yapmak için fonksiyona başka bir fonksiyon argüman olarak verilebilir. Bir fonksiyona daha sonradan çağrılması için verilen bu fonksiyonlara callback denilmektedir. İki türlü çağrılabilir :
JQuery() fonksiyonun temel olarak 4 farklı kullanımı bulunmaktadır :
Aşağıda bir bağlantıyı tıklandığında ekranda alert mesajı gösteren örnek görülmektedir :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <a href="http://www.fibiler.com/">fibiler'e git</a> <script src="jquery-1.7.2.min.js"></script> <script> $(document).ready(function(){ $("a").click(function(event){ alert("Hello JQuery"); }); }); </script> </body> </html>
document.ready ile dökümanın hazır olması beklenmekte ve sayfa içindeki a etiketinin click event'i (olay) için kod yazılmıştır. Belge içinde tek bir a olması nedeniyle sadece $("a") ile elementin seçilmesi yeterli olmuştur.
JQuery'de bir event'i yakalayan kod bloğu çalıştıktan sonra aksi belirtilmez ise event'in normal davranışı devam eder. Örneğin bir a bağlantısının click event'ine bir kod yazıldı ise önce o kod çalışır ve ardından bağlantının gideceği adres gösterilir. Siz bağlantının verilen adrese gitmemesi için (yani normal davranışını göstermemesi için) event.preventDefault(); ifadesini kullanabilirsiniz :
$(document).ready(function(){
$("a").click(function(event){
alert("Hello JQuery");
event.preventDefault();
});
});
Yukarıda görüldüğü gibi click event'inde event.preventDefault(); satırı ile adrese gidilmesi engellenmiştir. Bağlantı tıklandığında ekranda "Hello JQuery" yazan bir alert mesajı gözükecektir sadece. Eğer event.preventDefault(); satırı olmaz ise "Hello JQuery" mesajı gözüktükten sonra Ok'e basarsanız a elementinin href'inde belirtilen adrese gidilecektir.
JQuery Mobile'de bir uzun bir başlık koyulduğunda , başlık belirli sayıda karakterden sonra kesilip sonu ... ile gösterilmektedir . Bunu engelemek için başlık için bir tane daha ek div koyulabilir:
Yukarıdaki gibi kullanıldığında başlık ... şeklinde kesilmez ve alt satırdan devam eder.
Diğer bir engelleme yöntemi aşağıdaki gibidir :
white-space: normal diyerek kırpılmasının önüne geçilmektedir.
Bir HTML sayfası içinde Javascript kodunda bir URL , AJAX kullanılarak aşağıdaki gibi çağrılabilir :
$(a).click(function(event){
alert('Linke tiklandigini bu sekilde anlayabilirsiniz...')
});
Yukarıdaki örnekte $(a) yerine jQuery(a) da yazabiliriz. Bu ifadelerden herhangi birisini yazdığımızda bir JQuery objesi yaratmış oluruz ve JQuery’nin sağladığı tüm fonksiyonlara bu obje üzerinden erişebiliriz.
jQuery.fn.myPlugin = function() {
// plugin kodu
};
Buradaki fn in ne demek olduğu kolay bir şekilde anlaşılmıyor. Biraz araştırdıktan sonra javascript’in tüm nesneleri anında değiştirmek için var olan prototype özelliğine bir kısayol olarak jQuery objesinde tanımlanmış bir değişken olduğu gördüm.
(function($) {
// kod
})(jQuery);
Burada bir javascript fonksiyonu tanımı var onu anlayabiliyoruz ama hemen arkasındaki parantez içersindeki jQuery ifadesi de ne demek oluyor? Bunun da detayda javascript’te var olan bir özellikle alakalı olduğu hatta bunun isminin “immediate/interactive code execution” olduğunu gördüm. Yani fonksiyon tanımını yapıp hemen çalıştırma işi. Yerine:
function myFunction($) {
// kod
};
myFunction(jQuery);
de yazabilirsiniz. Fakat burada myFunction isimli özel bir fonksiyon yaratıyorsunuz. Öncesindeki örnekte yaratılan fonksiyonun ismini umurunuzda değil hatta ilk çağırmadan sonra ona bir daha erişmek gibi bir niyetiniz de yok.
$(document).ready(function(){
// uygulama kodu
});