jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Chaining

jQuery provides another robust feature called method chaining.

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


jQuery Method Chaining

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

However, there is a technique called chaining, that runs multiple jQuery commands, on the same element, within a single statement.

This way, browsers do not have to find the same element(s) more than once.

This is possible because most of the jQuery methods return a jQuery object that can be further used to call another method.

The following example chains together the css(), hide(), and show() methods:

Run code

We 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:

Run code

We can chain as many methods as we want in a single statement:

Run code

Note: Some jQuery methods doesn't return the jQuery object, while others only return it depending on the parameters we pass to it. Consider the following example: