Updated March 24, 2023
Introduction to jQuery Chaining
Chaining is a robust technique provided by jQuery which allows us to chain together actions or methods. With jQuery chaining, we can run multiple jQuery actions or methods on the same set of elements within a single line of the statement. This technique is really neat and saves developers from lengthy code structures. It also helps browsers speed up their performance by saving them from finding the same elements more than once.
Examples to Implement jQuery Chaining()
Method chaining is possible in jQuery because most of the jQuery methods return a jQuery object which can further call another method. Let us understand this concept through some examples which implement this jQuery chaining of methods.
Example #1
Example illustrates the implementation of jQuery chaining by binding together four methods: css(), slideUp(), slideDown() and fade().
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery chaining</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p")
.css("color", "green")
.slideUp(1000)
.slideDown(1000)
.fadeOut(1000);
});
});
</script>
<style>
p {
color: maroon;
font-weight: bolder;
font-size: large;
}
</style>
</head>
<body>
<p>jQuery Chaining of Methods</p>
<button>Click to see the effect</button>
</body>
</html>Output:
- The below screen gets displayed once the page is loaded in the browser.
- We see there is a paragraph “p” which is “maroon” in color and a button.
- To chain a method, we need to simply append that method to the previous method.
- Once the button is clicked, the first method in the chain gets executed which is css().
- css() method changes the “p” element color to “green”.
- Then gets executed slideUp() which slides the paragraph upwards, then slideDown() which slides the paragraph downwards and then finally gets executed fade().
Note: We can add even more methods if required.
Example #2
The example illustrates the chaining of css() and animate() methods.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example of jQuery Method Chaining</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p")
.css("color", "green")
.animate({ width: "100%" })
.animate({ fontSize: "46px" });
});
$(".btn2").click(function() {
$("p").removeAttr("style");
});
});
</script>
<style>
p {
color: maroon;
font-weight: bolder;
font-size: large;
}
div {
width: 450px;
height: 300px;
padding: 20px;
font-size: medium;
text-align: center;
margin: auto;
background-color: lightblue;
font-weight: bold;
border: 3px solid teal;
margin-top: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<p>jQuery Chaining</p>
<button type="button" class="btn1">Click to see the effect</button>
<button type="button" class="btn2">Reset</button>
</div>
</body>
</html>Output:
- The below screenshot is captured when the page is first loaded in the browser.
- We have three methods in the chain to be executed, css() which changes paragraph’s color to green, two animate() methods which modifies the width and font size of the paragraph as specified in code.
- On button click, first of all, css() method gets executed which changes the color of the paragraph to green as shown below in the screenshot.
- After css() method gets executed, comes animate({ width: “100%” }) which changes the width of the paragraph and then animate({ fontSize: “46px” }) which changes the font size of the paragraph as shown below in the screenshot.
- On clicking “Reset” button, the changes get reset.
Example #3
An example where a jQuery method does not return a jQuery object.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Chaining of Methods</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
//This will show jQuery effect due to method chaining
$("h2")
.html("jQuery Chaining")
.addClass("chain")
.fadeOut(2000);
//This will not show any effect since no jQuery object has been returned.
$("p")
.html()
.addClass("chain");
});
});
</script>
<style>
p {
color: maroon;
font-weight: bolder;
font-size: large;
}
div {
width: 450px;
height: 300px;
padding: 20px;
font-size: medium;
text-align: center;
margin: auto;
background-color: lightblue;
font-weight: bold;
border: 3px solid teal;
margin-top: 50px;
margin-bottom: 10px;
}
.chain {
padding: 20px;
font-size: medium;
background-color: lightblue;
}
</style>
</head>
<body>
<div>
<h2>This is jQuery Method Chaining</h2>
<p>This paragraph will not show any effect</p>
<button type="button">Click Me</button>
</div>
</body>
</html>Output:
- Below screenshot is captured when the page is first loaded in the browser.
- In this example, we have used html() method with two cases.
- When parameters are passed to html() method.
- When no parameters are passed to html().
- When no parameters are passed to the html() method, only the HTML content of the selected element is returned instead of a jQuery object, in this example, html content of element p is returned.
- When some parameters are passed to the html() object, a jQuery object is returned upon which subsequent methods in a chain are called.
- On button click, the html() method is called on the header element and a jQuery object is returned.
- On this jQuery object, the addClass() method is called which results in applying some formatting styles to the returned object.
- After addClass() method execution, fade() method is called which fades out the returned jQuery object as shown below.
- When html() method is called without any parameters, only the HTML content of the paragraph p is returned instead of a jQuery object.
Advantages of Using jQuery Chaining
- jQuery chaining of methods makes the jQuery code shorter and more readable by binding multiple methods.
- Ensures better performance by cutting down on the number of times the browser has to look for the same element(s).
- There is no need to use the same selector more than once.
Conclusion
- This article walked you through a very easy to implement yet so powerful feature of jQuery, chaining of the jQuery methods.
- This technique is very useful in making the developers’ job easier by shortening the code.
- This feature provides better performance and maintainability.
Recommended Articles
This is a guide to jQuery Chaining. Here we discuss the Introduction to jQuery Chaining() and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
