The jQuery chaining method allows you to run multiple jQuery methods on the element within a single statement of code.
It is possible because jQuery methods return a jQuery object that can be further used to call another method.
It is possible because jQuery methods return a jQuery object that can be further used to call another method.
The above example shows the jQuery chaining of three animate() method. When you click the trigger button, it expands the to 100% width and when the width change is complete the font-size is started animating and after its completion, the border animation will begin.
It is possible to break a single line of code into multiple lines for readability. For example, the sequence of the methods in the above example can be written as follows:
Some methods in jQuery do not return the jQuery object. Generally set methods assign some value on a selection return a jQuery object, that will allow you to continue calling jQuery methods on your selection. And as get methods return the requested value you cant continue to call jQuery methods on the value returned by the get method.
The example of this is the html() method. If no parameters are passed to it, the HTML contents of the selected element are returned instead of a jQuery object.
Note: The jquery chaining helps you to keep your jQuery code short and it also improves the performance of your script so the browser does not have to find the same elements multiple times to perform some operation on them.