How to use Method Chaining in jQuery ?
Last Updated :
23 Jul, 2024
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms simplifies HTML document traversing, manipulation, browser event handling, DOM animations, AJAX interactions, and cross-browser JavaScript development.
What is the 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.
How does it work?
We instantiate a new jQuery object, which allows us to manipulate the selected element. The chaining method returns the jQuery object again, allowing us to use another method called directly on the return value, which is the CSS() method.
Syntax:
$(‘selector’).method1().method2().method3()
Example 1: We are adding two methods one is animation in width and another is animation in font size.
$("p").animate({width: "100%"}).animate({fontSize: "46px"});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<style>
p {
width: 200px;
padding: 40px 0;
font: bold 24px sans-serif;
text-align: center;
background: #aaccaa;
border: 1px solid #63a063;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3><b>Chaining</b></h3>
<p>GeeksforGeeks</p>
<button type="button" class="start">
Start Chaining</button>
<script>
$(document).ready(function () {
$(".start").click(function () {
$("p").animate({ width: "100%" })
.animate({ fontSize: "46px" });
});
});
</script>
</body>
</html>
Output:
Example 2: In the following code, we are hiding the button using the concept of chaining in jQuery.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<p id='gfg'>Button!!! Hide me</p>
<button>Click me</button>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#gfg").css("color", "green")
.slideUp(1909);
});
});
</script>
</body>
</html>
Output:
Similar Reads
How to Use jQuery $(this) in Event ? The scope of this keyword changes according to the scope of the object. The $(this) keyword will refer to the selected element to which the event is attached when used in an event. In this article, we will see the implementation of $(this) with an event in different conditions. Syntax:$('element_sel
2 min read
What is chaining in jQuery ? In jQuery, chaining allows us to perform multiple operations on an element in a single statement. Most of the jQuery function returns a jQuery object and due to this when the first method completes its execution, it returns an obj now the second method will be called on this object. Example 1: With
2 min read
Explain slide toggle method in jQuery The slideToggle() is a method in jQuery which is an alternative for two separate methods namely slideUp() and slideDown(). This actually plays with the CSS display property of the element and provides a slight animation to it. If the element has a "display:none", the slideDown() functionality gets t
2 min read
Method Chaining in JavaScript As a good programming practice, we should write individual functions/methods for dealing with individual actions. And, writing only one method/function for all actions is a thing. However, sticking to good practice takes a toll on the readability and comprehensibility of the code, because defining a
2 min read
jQuery | Selectors and Event Methods jQuery selectors allow targeting HTML elements using CSS-like syntax, enabling manipulation or interaction. Event methods facilitate handling user actions, like clicks or input changes, by attaching functions to selected elements, enhancing interactivity and dynamic behavior in web development. Tabl
5 min read
JQuery | isFunction() method This isFunction() Method in jQuery is used to determines if its argument is callable as a function. Syntax: jQuery.isFunction( value ) Parameters: The isFunction() method accepts only one parameter that is mentioned above and described below: value : This parameter is the value to be tested. Return
2 min read