jQuery - Chaining

jQuery Method Chaining

With jQuery, you can chain actions/methods together.

Until now, we have been writing jQuery statements one at a time (one after the other).

Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.

To chain an action, simply append the action to the previous action.

The following example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first changes to red, then it slides up, and then it slides down:

We could also have added more method calls if needed.

Tip: When chaining, the line of code could become quite long. However, jQuery is not very strict on the syntax; you can format it like you want, including line breaks and indentations.

This also works just fine:

jQuery throws away extra whitespace and executes the lines above as one long line of code.