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

    
   $("selector").JqueryMethod1().JqueryMethod2().JqueryMethod3();

Source Code

          
            $("p").slideUp(2000).slideDown(2000);

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 () {
    $("p")
      .css("color", "green")
      .animate({ width: "100%" })
      .animate({
        fontSize: "25px",
      })
      .animate({
        borderWidth: 5,
      });
  });
});

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4