jQuery Schnellstart – jQuery Verkettung

In dieser Lektion lernst Du, wie Du mehrere Methoden in jQuery verketten kannst.

JQuery bietet ein weiteres robustes Feature, die sogenannte Methodenverkettung, mit der wir mehrere Aktionen mit demselben Satz von Elementen ausführen können, und zwar alle innerhalb einer einzigen Codezeile.

Dies ist möglich, weil die meisten jQuery-Methoden ein jQuery-Objekt zurückgeben, das weiter verwendet werden kann, um eine andere Methode aufzurufen. Hier ist ein Beispiel.

<script>
// Mehrere jQuery-Methoden verketten
$(document).ready(function(){
  $(".starten").click(function(){
    $("p").animate({width: "100%"}).animate({fontSize: "40px"}).animate({borderWidth: 20});
  });
}); 
</script>

 

Das obige Code-Beispiel demonstriert die Verkettung von drei animate()-Methoden. Wenn ein Benutzer auf die Trigger-Schaltfläche klickt, wird die Breite <p> auf 100% erweitert. Sobald die Breitenänderung abgeschlossen ist, beginnt die Animation der Schriftgröße, und nach Ihrer Beendigung beginnt die Randanimation.

Du kannst auch eine einzelne Codezeile zur besseren Lesbarkeit in mehrere Zeilen umbrechen. Beispielsweise könnte die Reihenfolge der Methoden im obigen Beispiel auch so geschrieben werden:

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

Einige jQuery-Methoden geben das jQuery-Objekt nicht zurück. Im Prinzip geben Setter, d.h. Methoden, die einer Auswahl einen Wert zuweisen, ein jQuery-Objekt zurück, mit dem Sie weiterhin jQuery-Methoden für Ihre Auswahl aufrufen können.

Getter hingegen geben den angeforderten Wert zurück, sodass Sie nicht weiterhin jQuery-Methoden für den vom Getter zurückgegebenen Wert aufrufen können.

Ein typisches Beispiel für dieses Szenario ist die html()-Methode. Wenn ihr keine Parameter übergeben werden, wird der HTML-Inhalt des ausgewählten Elements anstelle eines jQuery-Objekts zurückgegeben.

Hier ein Code-Beispiel:

<script>
$(document).ready(function(){
  $(".starten").click(function(){
    // Funktioniert
    $("h1").html("Hallo LerneProgrammieren!").addClass("bg").fadeOut(1500);
    
    // Funktioniert nicht
    $("p").html().addClass("bg");
  });
}); 
</script>

 

Deine Code-Aufgabe - Jetzt bist Du gefragt:

(Die Aufgabenbeschreibung findest Du unter dem Code-Editor)

[lp_spoiler title="Komplettlösung anzeigen" class="da"]

Das ist die Komplettlösung:

<script>
$(document).ready(function() {
  $(".starten").click(function() {
    $("p")
      .animate({width: "50%"})
      .animate({fontSize: "50px"})
      .animate({padding: "40px"});
  });
}); 
</script>

[/lp_spoiler]