What is method chaining in jQuery, and how does it work?
Quick Answer
Most jQuery methods return the jQuery object they were called on, so you can chain calls: $('.box').addClass('active').fadeIn().on('click', fn). It also does implicit iteration — one call applies to every matched element. .end() pops back to the previous selection after a filtering method like .find().
jQuery methods generally return the jQuery object, so you can string operations together — select once, then add a class, animate, and bind an event all in one chain. It's a fluent interface, achieved by each setter returning this. jQuery also iterates implicitly, so $('li').addClass('x') hits every list item without a loop. The chain breaks when you call a getter like .val() with no argument, because that returns the value instead of the jQuery object.
- Chaining works because setters
return this— a fluent interface. - Getters (
.val(),.text()with no argument,.width()) break the chain because they return a value, not the jQuery object. - Implicit iteration:
$('li').hide()hides all list items with no explicit loop.