Bir içerik oluşturup aynı anda birden çok elementin içine ekleyebilirsiniz. append() ‘dan farklı olarak önce eklenecek element seçilir.
$(document).ready(function(){
$("a").click(function(){
$("<span> HOŞGELDİNİZ</span>").appendTo("p");
});
});
.append(content[,content])
Bu fonksiyon elementin son çocuğu olarak belirtilen bir içerik ekler. Ayrıca istediğiniz nesneleri seçili elementin sonuna eklemeniz mümkün olacaktır. Ayrıca bir elementi seçip başka bir elementin içine ekleyebilirsiniz.
$(document).ready(function(){
$("a").click(function(){
$("ul").append("<li>W3TR</li>");
});
});
.append(content[,content])
CSS özelliklerine bir dizi özel animasyonlar gerçekleştirebilirsiniz. CSS özellikleri olarak width, height, border, color, background gibi bir çok değeri değiştirebilirsiniz.
Animasyonun süre ayarını yapmak için varsayılan değer 400 mili saniye üzerinden değerlendirilir. Yani 1 saniyelik bir animasyon için 1000 mili saniye vermeniz gerekmektedir. Fonksiyon içerisine birden fazla animasyon yazılabilir.
$(document).ready(function(){
$(".büyüt").click(function(){
$("div").animate({width: "400px"});
});
$(".kücült").click(function(){
$("div").animate({width: "150px"});
});
});
.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )
Seçili olan elementten bir önceki nesneyide ekleyerek seçimi genişletir.
Not: jquery 1.8 den sonra kullanılmamalıdır. Bunun yerine .addBack(); kullanılabilir.
$( ".w3tr" ).nextAll().andSelf().css( "background-color", "yellow" );
.andSelf():
Ajax isteği başarı ile tamamlandığında gerçekleşir. .ajaxComplate ile karıştırılmaması gerekir. .ajaxCompalete() bir ajax isteği tamamladıktan sonra gerçekleşirken .ajaxSuccess() bütün ajax olayı başarı ile gerçekleştiğinde çalışır.
$(document).ready(function(){
$(document).ajaxSuccess(function(){
alert("Tüm AJAX istekleri tamamlandı");
});
$("a").click(function(){
$("div").load("demo_ajax_load.txt");
});
});
.ajaxSuccess(handler):
Ajax isteği tamamlanmadığı durumda çalıştırılacak işlemdir. Bu işlem gerçekleşmeden önce jquery başka bir ajax isteği olup olmadığını denetler yok ise bunu işlemi çalıştırır.
$(document).ready(function(){
$(document).ajaxStop(function(){
alert("Tüm AJAX istekleri tamamlandı");
});
$("a").click(function(){
$("div").load("demo_ajax_load.txt");
$("div").load("demo_ajax_load.asp");
});
});
.ajaxStop(handler):
Ajax isteği gönderilirken yani işlem gerçekleşirken bu süreçte gerçekleşecek olayı belirler. Örneğin bu süreç gerçekleşirken kullanıcıya ‘yükleniyor’ yazısı gösterilebilir. Bu işlem gerçekleşmeden önce jquery başka bir ajax isteği olup olmadığını denetler yok ise bunu işlemi çalıştırır.
$(document).ready(function(){
$(document).ajaxStart(function(){
$(this).html("<img src='demo.gif'>");
});
$("a").click(function(){
$("div").load("demo_ajax_load.asp");
});
});
.ajaxStart(handler):
Ajax isteği gönderilmeden önce gerçekleşecek işlemi belirlemek için kullanılır.
$(document).ready(function(){
$(document).ajaxSend(function(e, xhr, opt){
$("div").append("<p>Requesting " + opt.url + "</p>");
});
$("a").click(function(){
$("div").load("demo_ajax_load.asp");
});
});
.ajaxSend(handler)
Ajax isteği hata verdiğinde veya başarısız olduğunda gerçekleşecek işlemi belirler.
$(document).ready(function(){
$(document).ajaxError(function(){
alert("HOŞGELDİNİZ");
});
$("a").click(function(){
$("span").load("wrongfile.txt");
});
});
.ajaxError(handler):
Ajax isteği tamamlandıktan sonra gerçekleşecek işlemi belirler.
$(document).ajaxStart(function(){
$("span").css("display", "block");
});
$(document).ajaxComplete(function(){
$("span").css("display", "none");
});
.ajaxComplate(handler):