jquery链

jquery - 链 (chaining)

通过jquery，可以把动作/方法链接在一起。

chaining允许我们在一条语句当中运行多个jquery方法(在相同的元素上)。

jquery方法链接。

直到现在，我们都是一次写一条jquery语句(一条接着另一条)。

不过，有一种名字叫做链接(chaining)的技术，允许我们在相同的元素上运行多条jquery命令，一条接着另一条。

提示: 这样的话，浏览器就不必多次查找相同的元素了。

如果链接一个动作，您只需要简单地该动作追加到之前的动作上，就可以了。

下面的例子当中把css()，slideUp()和slideDown()链接在一起。

“p1”元素首先会变成红色，然后向上滑动，再然后向下滑动:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.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>

如果需要，我们也可以添加多个方法调用。

扫描二维码关注公众号，回复： 1784255 查看本文章

提示: 当进行链接的时候，代码行会变得很长。

不过，jquery语法不是很严格的。

您可以按照希望的格式来写，包括换行和缩进。

如下书写，也可以很好地运行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.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>

jquery会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

猜你喜欢