Site Loader
Get a Quote

Chaining Method in JQuery

Chaining Method in JQuery:- Hi Readers, In this tutorial, we are going to learn about Chaining Method in JQuery.

The Chaining allows us to run multiple jQuery methods on the same element(s). Through chaining method, you can chain multiple actions/methods together.

Until now we have been writing jQuery commands one at a time means one after the other. However, the chaining allows us to run multiple jquery commands or statements one after the other at the same time within the same element. To chain either an action or methods, you have to simply append the action with the previous action.

Important points about Chaining

  • The Chaining Method makes the code short and easy to manage.
  • Through Chaining Method the performance of code increases means it gives better performance
  • The chain starts from left to right. So leftmost will be called first and so on.

Simple Examples of Chaining Method in Jquery:


The following example chains together the css(), slideUp(), and slideDown() methods. The “p2” element first changes to blue, then it slides up, and then it slides down:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#p2").css("color", "Blue").slideUp(3000).slideDown(3000);        //chaining of multiple jquery methods

    });
});

</script>
</head>
<body>

<p id="p2" style="font-size:40px">Having fun!!</p>

<button>Click me</button>

</body>
</html>

Screenshots:-

Chaining Method in JQuery


I hope you would like this post on how to use Chaining Method in JQuery!

Post Author: TechieFlair