jQuery Method Chaining

Back to: jQuery Tutorials

jQuery Method Chaining with Examples

In this article, I am going to discuss jQuery Method Chaining with Examples. Please read our previous article, where we discussed jQuery Each Method. At the end of this article, you will understand everything about jQuery Method Chaining.

jQuery Method Chaining

JQuery provides another robust feature called method chaining that allows us to perform multiple actions on the same set of elements, all within a single line of code. This is possible because most of the jQuery methods return a jQuery object that can be further used to call another method.

Syntax: $(‘selector’).method1().method2().method3()………………..

Thus, you can add multiple methods to one set of elements. Let us understand jQuery Method Chaining with some examples.

Example:

Now if we have to perform multiple methods to one set of elements what can we do? In the below example, to the <div> element we are performing 5 animation methods consecutively.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Method Chaining with Examples</title>
</head>
<body>
  <h3>jQuery Method Chaining</h3>
  <section>
    <div class="div1">
      <h4>This is a Title</h4>
      jQuery is a fast, small, lightweight, and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It makes things like DOM traversal and manipulation, event handling, animation, and Ajax much simpler. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. As of May 2019, jQuery was used by 73% of the 10 million most popular websites.
    </div>
  </section>
  </br>
  <button class="demo">Click Me</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
       $('.demo').click(function(){
       $('.div1').animate({height: "400px"},1000);
       $('.div1').hide(1000);
       $('.div1').show(1000);
       $('.div1').slideUp(1000);
       $('.div1').slideDown(1000);
     })
    });
  </script>
</body>
</html>

Now run the above code and observe that when we will click on the Click Me button at first the div will increase its height, then it will hide, then it will appear again, then will side up and slide down. Thus, all the animations will be performed.

But in the above example, we are using different animations on the same element by writing different lines of codes. See how we can transform this into a line of code by jQuery Method Chaining. To do so, please modify the script section as shown below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $('.demo').click(function () {
      $('.div1').animate({ height: "500px" },1000).hide(1000).show(1000).slideUp(1000).slideDown(1000);                  
    })
  });
</script>

Now notice that we need not write different lines of codes. We can connect these methods as above. This will perform exactly the same as the previous example. This is called method chaining in jQuery.

Example:

These animation methods return again the jQuery object. So, it is possible to add further methods to that one. But what about those methods which return an object like test(), html(), attr(). These methods are used to retrieve the inner text or Html or attribute value of any element, they don’t return again an object. So, chaining will not work on them. Let’s understand this with an example.

In the below method chain example, you will notice that at first the border has been applied, then the height increases, and then the div disappears, but the text() method is returning just a string, not an object. So, the show() method is not working on that. So our chain breaks at hide() method

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Method Chaining with Examples</title>
</head>
<body>
  <h3>Query Method Chaining</h3>
  <section>
    <div class="div1">
      jQuery is a fast, small, lightweight, and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It makes things like DOM traversal and manipulation, event handling, animation, and Ajax much simpler. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. As of May 2019, jQuery was used by 73% of the 10 million most popular websites.
    </div>
  </section>
  </br>
  <button class="demo">Click Me</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $('.demo').click(function () {
        $('.div1').css('border','2px solid blue').animate({ height: "500px" },1000).hide(1000).text().show(1000);       
      })
    });
  </script>
</body>
</html>

Once you run the code, open the browser developer tool by pressing the F12 key and then click on the Click Me button and have a look at the console tab and it will display the error message saying that show is not a function as shown in the below image.

jQuery Method Chaining with Examples

Example:

By using the text(), html(), attr() methods, if we want to retrieve any value then our method chaining will not work. But by these methods, if we want to set any text, Html, or attribute then our jQuery Method Chaining will work perfectly. Let us understand this with an example.

In the below example, the text() method sets the inner text of the div, the attr() method sets the title attribute to ‘Sample Div’ and returning the object. So we can perform the animation methods on them.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Method Chaining with Examples</title>
</head>
<body>
  <h3>jQuery Method Chaining</h3>
  <section>
    <div class="div1">
      jQuery is a fast, small, lightweight, and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It makes things like DOM traversal and manipulation, event handling, animation, and Ajax much simpler. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. As of May 2019, jQuery was used by 73% of the 10 million most popular websites.
    </div>
  </section>
  </br>
  <button class="demo">Click Me</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $('.demo').click(function () {
        $('.div1').css('border','2px solid blue').animate({ height: "500px" },1000).hide(1000).text('This is sample text').attr('title','Sample Div').show(1000);       
      })
    });
  </script>
</body>
</html>

Notice that all of the methods of our chain are performed here. Also, the title attribute has been set.

Event Chaining in jQuery:

jQuery not only supports method chaining but also supports event chaining. We can attach multiple events to one set of elements. Let us understand jQuery Event Chaining with some examples. In the below example. we are attaching two events to a button at the same time by event chaining.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Event Chaining with Examples</title>
</head>
<body>
  <h3>jQuery Event Chaining</h3>
  </br>
  <button class="demo">Click Me</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $('.demo').mouseover(function(){alert('Mouse Over')}).mouseleave(function(){alert('Mouse Out')})
    });
  </script>
</body>
</html>

At first when we hovered on the button 1st event-triggered and then the second one when we left out the mouse.

In the next article, I am going to discuss Working with JSON Objects with Examples. Here, in this article, I try to explain jQuery Method Chaining with Examples and I hope you enjoy this jQuery Method Chaining article.

Leave a Reply

Your email address will not be published. Required fields are marked *