jQuery Chaining

jQuery chaining method allows us to perform multiple jQuery methods on the same element, within a single statement.

jQuery Chaining Methods

Jquery chaining method allows us to add more than the jQuery method to the same element, within a single statement.

jQuery chaining method improves the performance of the code since it could not search elements again and again.

Basically, it is a process of attaching the method to the previous method of the selected element.

How Jquery Chaining Method Is Work ?

Please keep in mind that every jquery chaining method returns a jquery object. This is the core concept behind the chaining method.

General Syntax


Source Code

Try it now

In the above example, the first <p> element slides up and then slides down.

jQuery Chaining Method Code Formatting

jQuery chaining method, a single line of code can be broken into multiple lines of code for greater readability.

Source Code

            $(document).ready(function () {
  $("button").click(function () {
      .css("color", "green")
      .animate({ width: "100%" })
        fontSize: "25px",
        borderWidth: 5,
Try it now

Web Tutorials

jQuery Chaining
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4