jQuery Method Chaining
Until now, we have written jQuery statements one 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:
<!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">php中文网!!</p>
<button>点我</button>
</body>
</html>Tip: When linking, the lines of code will look bad. However, jQuery syntax is not very strict; you can write it in the format you want, including line breaks and indentation.
Writing as follows also works well:
<!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">php中文网!!</p>
<button>点我</button>
</body>
</html>jQuery will throw away the extra spaces and execute the above line of code as one long line of code.
Next Section