jQuery - Chaining (Uvlačenje)

jQuery Chaining metoda

jQuery pruža još jednu robusnu odliku koja se naziva ulančavanje metoda koje nam omogućavaju izvršavanje višestrukih radnji na istom skupu elemenata, sve u jednom redu koda. To je moguće, jer većina jQuery metoda vraća jQuery objekt koji se dalje može koristiti za pozivanje druge metode. Pogledajmo primjer: 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
    });
});  
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Chaining metode</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
/* Neki prilagođeni stilovi za uljepšavanje ovog primjera */
p {
    width: 200px;
    padding: 40px 0;
    font: bold 24px sans-serif;
    text-align: center;
    background: #aaccaa;
    border: 1px solid #63a063;
    box-sizing: border-box;
}
</style>
<script>
$(document).ready(function(){
    $(".start").click(function(){
        $("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
    });
    $(".reset").click(function(){
        $("p").removeAttr("style");
    });
});  
</script>
</head>
<body>
    <p>IT TUTORIJALI!</p>
    <button type="button" class="start">Start Chaining</button>
    <button type="button" class="reset">Reset</button>
</body>
</html>

Primjer pokazuje ulančavanje tri animate() metode. Kad korisnik klikne dugme, on proširuje <p> na 100% širinu. Nakon što se promjena širine dovrši, veličina fonta započinje animiranje, a nakon završetka započinje animacija bordera.

Takođe možete razbiti jedan red koda na više redova radi veće čitljivosti. Na primjer metoda u gornjem primjeru takođe se može zapisati kao: 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p")
            .animate({width: "100%"})
            .animate({fontSize: "46px"})
            .animate({borderWidth: 30});
    });
});  
</script>

Neke jQuery metode ne vraćaju objekt. Uopšteno postavljači, tj. metode koje dodijeljuju neku vrijednost odabiru, vraćaju jQuery objekt, koji vam omogućava da nastavite pozivati jQuery metode na svom odabiru. Dok getter-i vraćaju traženu vrijednost, tako da ne možete nastaviti pozivati jQuery metode na vrijednosti koju je getter vratio. Tipičan primjer ovog scenarija je metoda html(). Ako joj se ne prosljede nikakvi parametri, vraća se HTML sadržaj odabranog elementa umjesto jQuery objekta. 

<script>
$(document).ready(function(){
    $("button").click(function(){
        // Ovo će raditi
        $("h1").html("IT TUTORIJALI!").addClass("test");
        
        // Ovo neće raditi
        $("p").html().addClass("test");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Metoda Chaining Exceptions - Izuzeci</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    .test{
    padding: 15px;
        background: yellow;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        // Ovo će raditi
        $("h1").html("IT TUTORIJALI!").addClass("test").fadeOut(1000);
        
        // Ovo neće raditi
        $("p").html().addClass("test");
    });
});
</script>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim da učim jQuery uz IT TUTORIJALE.</p>
    <button type="button">Start Chaining</button>
</body>
</html>