jQuery - Chaining
jQuery - Chaining
Through jQuery, actions/methods can be linked together.
Chaining allows us to run multiple jQuery methods (on the same element) in one statement.
jQuery method chaining
Until now, we have written one jQuery statement at a time (one right after the other) .
However, there is a technique called chaining that allows us to run multiple jQuery commands on the same element, one right after the other.
Tip: This way, the browser doesn't have to look for the same element multiple times.
To link an action, you simply append the action to the previous action.
The following example links css(), slideUp() and slideDown() together. The "p1" element will first turn red, then slide up, then down:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">菜鸟教程!!</p>
<button>点我</button>
</body>
</html>Run Example»
Click the "Run Instance" button to view the online instance
If necessary, we can also add multiple method calls.
Tip: When linking, lines of code get messed up. However, jQuery syntax is not very strict; you can write it in the format you want, including line breaks and indentation.
Writing as follows can also run well:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">菜鸟教程!!</p>
<button>点我</button>
</body>
</html>Running Example»
Click the "Run Example" button to view the online example
jQuery will throw away the extra spaces and execute the above line of code as one long line of code.
