<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1")
.css("color","red")
.slideUp(1000)
.slideDown(1000, function(){
$("#p1").css("color", "black");
});
});
});
</script>
</head>
<!--
jQuery-链(Chaining)
通过jQuery,可以把动作/方法链接在一起
Chainning允许我们在一条语句中运行多个jQuery方法(在相同元素上)
jQuery方法链接
直到现在,我们都是一次写一条jQuery语句(一条接着一条).
不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条jQuery命令,一条接着一条
提示:这样的话,浏览器就不必多次查找相同的元素
如果需要链接一个动作,您只需要简单地把动作追加到之前的动作上.
下面的例子把css(),slideUp()和slideDown()链接在一起.
p1元素首先会变为红色,然后向上滑动,再然后向下滑动.
实例:
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
如果需要,我们可以添加很多的方法调用
提示:当进行链接的时候,代码会变得很长.不过jQuery语法不是很严格,您可以按照希望地格式来写,包括换行和缩进.
如下书写也可以很好的运行:
$(#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
jQuery会抛掉很多多余的空格,并当成一行长代码执行上面的代码行
-->
<body>
<p id="p1">菜鸟教程!!</p>
<button>点我</button>
</body>
</html>
