jQuery Chaining

Met jQuery kun je acties/methoden koppelen.

Chaining staat ons toe meerdere jQuery-methoden (op hetzelfde element) in één statement te gebruiken.

jQuery-methode koppeling

Tot nu toe hebben we altijd één jQuery-statement per keer geschreven (één na de andere).

Maar er is een techniek genaamd koppeling (chaining) die ons toestaat meerdere jQuery-commando's op hetzelfde element uit te voeren, één na de andere.

Tip:Op die manier hoeft de browser niet meerdere keren dezelfde elementen te zoeken.

Om een actie te koppelen, hoef je deze eenvoudig toe te voegen aan de vorige actie.

Voorbeeld 1

Het volgende voorbeeld koppelt css(), slideUp() en slideDown() samen. Het element "p1" wordt eerst rood, dan omhoog geschoven en dan omlaag geschoven:

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

Probeer het zelf

Als je dat wilt, kunnen we ook meerdere methoden toevoegen.

Tip:Wanneer je een link maakt, wordt de code regel heel slecht. Maar jQuery is niet zo strikt in de grammatica; je kunt het op de gewenste manier schrijven, inclusief doorlopen en inspringen.

Voorbeeld 2

Dit kan ook werken:

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

Probeer het zelf

jQuery gooit overbodige spaties weg en voert de bovenstaande code regel uit als een lange regel.