JQUERY CHAINING

Bharathi. G



jQuery Method Chaining – Write Cleaner, Efficient Code

Up until now, we’ve written one jQuery method at a time, each on a separate line. However, jQuery provides a powerful feature called method chaining that allows you to run multiple commands on the same element in a single statement.

Why Use Chaining?

  • Improves code readability and structure
  • Increases performance by reducing the number of times the browser searches for the same element


How It Works:

To chain methods, simply append them one after another using dot (.) notation.


Example – Chaining Multiple Methods:

The following code changes the color of the element with ID p1 to red, then slides it up over 2 seconds, and finally slides it back down:

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);


More Readable Format:

If the chain gets too long, you can break it into multiple lines. jQuery is flexible with formatting:

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

This keeps your code clean and easy to follow, especially when working with several chained methods.





More topic in jQuery

Tags
Our website uses cookies to enhance your experience. Learn More
Accept !