Programming

jQuery chaining

June 28, 2021

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>

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:

  • 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>

Code:

<!DOCTYPE html>
<html>
<head>
<title>Sliding effect in jQuery</title>
<script src=”https://code.jquery.com/jquery-1.12.4.min.js”></script>
<script>
$(document).ready(function() {
$(“#btn”).click(function() {
$(“.d”).slideToggle(“slow”, function() {
$(“.message”).text(” Transition has Completed”);
</script>
<style>
.d {
background-color: lightpink; margin-top: 20px;
padding: 10px; text-align: center; font-size: 18px; border: solid 1px; height: 200px; width: 300px;
}
.message {
font-weight: bold; font-size: medium; color: maroon; margin-left: 10px;
}
</style>
</head>
<body>
<button id=”btn”
style=”background:lightseagreen;cursor: pointer;font-size: 18px;”>
</button>
<div class=”d”>
<br/><b>jQuery</b> <br /><br />Sliding Effect<br /><br />slideToggle()
</div>
<div class=”message”></div>
</body>
</html>

Code:

<!DOCTYPE html>
<html>
<head>
<title>Sliding effect in jQuery</title>
<script src=”https://code.jquery.com/jquery-1.12.4.min.js”></script>
<script>
$(document).ready(function() {
$(“#head”).click(function() {
$(“#content”).slideToggle(“slow”);
</script>
<style> #content, #head {
padding: 10px; margin: auto;
text-align: center; width: 500px;
text-align: center;
background-color: lightseagreen; border: solid 1px lightgray;
}
#content { display: none; height: 300px;
}
</style>
</head>
<body>
<div id=”content”>
jQuery Sliding Effect<br /><br />
</div>
</body>
</html>

Code:

<!DOCTYPE html>
<html>
<head>
<title>Sliding effect in jQuery</title>
<script src=”https://code.jquery.com/jquery-1.12.4.min.js”></script>
<script>
$(document).ready(function() {
$(“#up”).click(function() {
$(“#content”).slideUp(“400”, function() {


$(“#down”).click(function() {
$(“#content”).slideDown(“fast”, function() {


$(“#toggle”).click(function() {
$(“#content”).slideToggle(“slow”, function() {

</script>
<style>
#content,
#up {
padding: 10px;
text-align: center;
width: 500px;
text-align: center;
background-color: lightseagreen;
border: solid 1px lightgray;
}
#down {
padding: 10px;
text-align: center;
width: 500px;
text-align: center;
background-color: lightseagreen;
border: solid 1px lightgray;
}
#toggle { padding: 10px;
text-align: center;
width: 500px;
text-align: center;
background-color: lightseagreen;
border: solid 1px lightgray;
}
#content {
display: none;
height: 300px;
}
.message {
font-weight: bold;
font-size: medium;
margin-top: 30px;
color: maroon;
margin-left: 10px;
}
</style>
</head>
<body>

<div id=”content”>
jQuery Sliding Effect<br /><br />

</div>
<div class=”message”></div>
</body>
</html>

Output:

  • In this example, we have used html() method with two cases.
  • 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.

  • Recent Posts



shares
Loading...