jQuery animate() Yöntemi

animate() Yöntemi;

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.

Örnek

$(document).ready(function(){
    $(".büyüt").click(function(){
        $("div").animate({width: "400px"});
    });
    $(".kücült").click(function(){
        $("div").animate({width: "150px"});
    });
});

Codepen Ön izleme

Kullanım şekilleri;

.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )

jQuery andSelf() Yöntemi

andSelf() Yöntemi;

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.

Örnek

$( ".w3tr" ).nextAll().andSelf().css( "background-color", "yellow" );

Codepen Ön izleme

Kullanım şekilleri;

.andSelf():

jQuery ajaxSuccess() Yöntemi

ajaxSuccess() Yöntemi;

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.

Örnek

$(document).ready(function(){
    $(document).ajaxSuccess(function(){
        alert("Tüm AJAX istekleri tamamlandı");
    });
    $("a").click(function(){
        $("div").load("demo_ajax_load.txt");
    });
});

Codepen Ön izleme

Kullanım şekilleri;

.ajaxSuccess(handler):

jQuery ajaxStop() Yöntemi

ajaxStop() Yöntemi;

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.

Örnek

$(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");
    });
});

Codepen Ön izleme

Kullanım şekilleri;

.ajaxStop(handler):

jQuery ajaxStart() Yöntemi

ajaxStart() Yöntemi;

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.

Örnek

$(document).ready(function(){
    $(document).ajaxStart(function(){
        $(this).html("<img src='demo.gif'>");
    });
    $("a").click(function(){
        $("div").load("demo_ajax_load.asp");
    });
});

Codepen Ön izleme

Kullanım şekilleri;

.ajaxStart(handler):

jQuery ajaxError() Yöntemi

ajaxError() Yöntemi;

Ajax isteği hata verdiğinde veya başarısız olduğunda gerçekleşecek işlemi belirler.

Örnek

$(document).ready(function(){
    $(document).ajaxError(function(){
        alert("HOŞGELDİNİZ");
    });
    $("a").click(function(){
        $("span").load("wrongfile.txt");
    });
});

Codepen Ön izleme

Kullanım şekilleri;

.ajaxError(handler):

jQuery ajaxComplete() Yöntemi

ajaxComplete() Yöntemi;

Ajax isteği tamamlandıktan sonra gerçekleşecek işlemi belirler.

Örnek

$(document).ajaxStart(function(){
        $("span").css("display", "block");
 });
$(document).ajaxComplete(function(){
        $("span").css("display", "none");
 });

Codepen Ön izleme

Kullanım şekilleri;

.ajaxComplate(handler):

jQuery after() Yöntemi

after() Yöntemi;

Seçili elementin öncesi girilen içeriği yeni bir nesne olarak ekler.  .insertAfter’dan farklıdır.  .insertAfter’da direk fonksiyon içine öncesine eklenecek hedef belirlenebiliyor.

Örnek

$("a").click(function(){

$("span").after("<p>Hoşgeldiniz</p>")

;});

Codepen Ön izleme

Kullanım şekilleri;

.after(content [,content]):
.after(function):

jQuery addClass() Yöntemi

addClass() Yöntemi;

Belirtilen elemente class(lar) eklemek için kullanılır.

Örnek

$("a").click(function(){ $("span").addClass("font");});

Codepen Ön izleme

Kullanım şekilleri;

.addClass(classİSmi):

.addClass(fuction):

jQuery .addBack() Yöntemi

.addBack() Yöntemi;

Seçili elemente ve kendinden bir öncekine jquery nesnesi oluşturmayı sağlar.

Örnek

$( "li.w3tr" ).nextAll().addBack().css( "background-color", "yellow" );

Codepen Ön izleme

Kullanımilleri;

.addClass(classİSmi):
.addClass(fuction):