jQuery attr() Yöntemi

attr() Yöntemi;

Elemente ait attribute değerini bazı jquery seçicileri ile seçilebilir fakat değiştirilemezler. Attr() özelliği bize bu imkanı sunmaktadır. Elementin hem attribute değeri seçilebilir hem de değiştirilebilir. Örneğin check olmamış bir inputu bu yöntemle anlayabilir ve check işlemini gerçekleştirebilirsiniz. Bu yöntem elemanın sadece bir attribute değerini alabilir. Birden çok attribute değerini alabilmek için jquery .each() veya .map() döngülerini kullanabilirsiniz.

Örnek

$(document).ready(function(){
    $("a").click(function(){
        $("img").attr("width", "900");
    });
});

Codepen Ön izleme

Kullanım şekilleri;

.attr(attributeName)

jQuery appendTo() Yöntemi

appendTo() Yöntemi;

Bir içerik oluşturup aynı anda birden çok elementin içine ekleyebilirsiniz. append() ‘dan farklı olarak önce eklenecek element seçilir.

Örnek

$(document).ready(function(){
    $("a").click(function(){
        $("<span> HOŞGELDİNİZ</span>").appendTo("p");
    });
});

Codepen Ön izleme

Kullanım şekilleri;

.append(content[,content])

jQuery append() Yöntemi

append() Yöntemi;

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.

Örnek

$(document).ready(function(){
    $("a").click(function(){
        $("ul").append("<li>W3TR</li>");
    });
});

Codepen Ön izleme

Kullanım şekilleri;

.append(content[,content])

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 ajaxSend() Yöntemi

ajaxSend() Yöntemi;

Ajax isteği gönderilmeden önce gerçekleşecek işlemi belirlemek için kullanılır.

Örnek

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

Codepen Ön izleme

Kullanım şekilleri;

.ajaxSend(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):