jQuery Kette(Chaining)

jQuery bietet eine weitere starke Funktion, die als Methodenverknüpfung bezeichnet wird.

Verknüpfung ermöglicht es uns, mehrere jQuery-Methode auf demselben Element in einer einzigen Anweisung auszuführen.

jQuery-Methodenketten

Bis jetzt schreiben wir nur eine jQuery-Anweisung nach der anderen (eine nach der anderen).

Es gibt jedoch eine Technologie namens Linking, die es ermöglicht, mehrere jQuery-Befehle auf demselben Element in einer einzigen Anweisung auszuführen.

Dadurch muss der Browser nicht mehrmals denselben Elementen suchen.

Das ist möglich, weil die meisten jQuery-Methode jQuery-Objekte zurückgeben, die weiter verwendet werden können, um eine andere Methode aufzurufen.

Die folgenden Beispiele sind miteinander verbundencss(),hide()undshow()Methode:

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

Wir können auch eine Zeile in mehrere Zeilen aufteilen, um die Lesbarkeit zu verbessern.

Zum Beispiel kann die Methodenfolge in den obigen Beispielen auch so geschrieben werden:

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

Wir können eine beliebige Anzahl von Methoden in einem einzigen Statement verknüpfen:

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

Hinweis:Einige jQuery Methoden geben kein jQuery-Objekt zurück, sondern andere geben es nur zurück, basierend auf den Parametern, die wir ihm übergeben. Betrachten Sie das folgende Beispiel:

//　Korrekte Verwendung
$("p").css("background-color", "coral").hide(2000).show(2000);
//　Fehlerhafte Verwendung
$("p").css("background-color", "coral").hide().show();