Catena (Chaining) di jQuery

jQuery fornisce un'altra funzione potente chiamata link di metodo.

Il link ci permette di eseguire più metodi jQuery sullo stesso elemento in una singola espressione.

Catena di metodi jQuery

Fino ad ora, scriviamo una sola espressione jQuery alla volta (una dopo l'altra).

Ma c'è una tecnica chiamata link che permette di eseguire più comandi jQuery sullo stesso elemento in una singola espressione.

In questo modo, il browser non deve cercare più volte lo stesso elemento.

Questo è possibile perché la maggior parte dei metodi jQuery restituisce un oggetto jQuery, che può essere utilizzato ulteriormente per chiamare un altro metodo.

I seguenti esempi sono collegaticss(),hide()eshow()Metodo:

$("button").click(function() {
　　$("p").css("background-color", "coral").hide(2000).show(2000);
});

Possiamo anche dividere una singola riga di codice in più righe per migliorare la leggibilità.

Ad esempio, la sequenza di metodi sopra riportata può essere scritta anche come:

$("button").click(function() {
　　$("p")
　　　　.css("background-color", "coral")
　　　　.hide(2000)
　　　　.show(2000);
});

Possiamo collegare un numero illimitato di metodi in una singola istruzione:

$("button").click(function() {
　　$("div")
　　　　.animate({width: "500px"})
　　　　.animate({height: "200px"})
　　　　.animate({fontSize: "10em"})
　　　　.animate({opacity: 0.3});
});

Attenzione:Alcuni metodi jQuery non restituiscono un oggetto jQuery, mentre altri lo restituiscono solo in base ai parametri che gli passiamo. Considera l'esempio seguente:

// Utilizzo corretto
$("p").css("background-color", "coral").hide(2000).show(2000);
// Utilizzo errato
$("p").css("background-color", "coral").hide().show();