jQuery Chaining

In this tutorial you will learn how to use jQuery chaining of multiple methods.

jQuery Chaining Method

The jQuery provides another robust feature called method chaining that allows us to perform multiple action on the same set of elements, all within a single line of code.

This is possible because most of the jQuery methods return a jQuery object that can be further used to call another method. Here’s an example for jQuery Chaining.

The above example demonstrate the chaining of three animate() method. When a user click the trigger button, it expands the <p> to 100% width. Once the width change is complete the font-size is start animating and after its completion, the border animation will begin.

Tip:The method jQuery chaining not only helps you to keep your jQuery code concise, but it also can improve your script’s performance since browser doesn’t have to find the same elements multiple times to do something with them.

break a single line of code into multiple lines

.You can also break a single line of code into multiple lines for greater readability. For example, the sequence of methods in the above example could also be written as:

Some jQuery methods doesn’t return the jQuery object. In general, setters i.e. methods that assign some value on a selection return a jQuery object, that allows you to continue calling jQuery methods on your selection. Whereas, getters return the requested value, so you can’t continue to call jQuery methods on the value returned by the getter.

A typical example of this scenario is the html() method. If no parameters are passed to it, the HTML contents of the selected element is returned instead of a jQuery object.

This is the end of jQuery Chaining Method Tutorial