What is chaining in JQuery?

Description:

Welcome to Jqueryjohn.com.

In this article, i am going to explain how to use chaining in JQuery.

Chaining is one of the most powerful features of jQuery.

Chaining allows you to run multiple JQuery methods one after other, within a single statement.

We can perform several operations in one line of code.

Syntax: $(selector).fn1().fn2().fn3();

It will chain from left to right.

Benefit of using chaining in JQuery is that the browser doesn’t need to find the element again and again. It finds the elements only once. 

Chaining gives better performance and makes our code short and easy to manage.

The below code which doesn’t using chaining feature of JQuery.

Code 1: (Without Chaining)

$('#btnClick').click(function () {

                $('p').css('color', 'blue');

                $('p').slideUp(3000);

                $('p').slideDown(3000);

});

Now, I am using the chaining feature by simply append the methods to the previous methods.

Code 2: (With Chaining)

$('#btnClick').click(function () {

                $('p').css('color', 'blue').slideUp(3000).slideDown(3000);

});

Code 2 is shorter and faster than code 1.

 Chaining in jquery, method chaining, what is chaining in jquery, jquery method chaining, jquery chaining examples