jQuery - Chaining

Users can string actions/methods together using jQuery.

We can use chaining to execute multiple jQuery methods (within the same element) inside a single phrase.


Method Chaining in jQuery

We've been writing jQuery statements one at a time up until now (one by one)

Moreover, there may be a technique known as chaining that allows us to run multiple jQuery commands on the same element in one by one.

Hint: By doing so, browsers are not required to find the same element(s) twice.

Simply append the action to the previous action to chain it.

The css(), slideUp(), and slideDown() methods are combined in the following scenario. The "p1" element turns red, then slides up and down:

Illustration:

EXAMPLE ❯


More method calls could have been added if necessary.

Hint: Even before chaining, the code line can become quite long. Even so, jQuery's syntax is not very rigid; user can layout it anyway you want, along with line spacing and markings.

And, that does work perfectly.

Illustration:

EXAMPLE ❯