jQuery Chaining
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：vs· jQuery基础
作者： xqll
撰写时间：2019/5/26
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
直到现在，我们基本都是一次写一条 jQuery 语句（一条接着另一条）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
通过 jQuery，我们可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
意思就是说 那样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
可以说 这个方法可以让我们更快速更方便地写代码了
下面 我为大家演示一下如果使用Chaining方法写代码
<body>
<p id="ak">jQuery Chaining</p>
<button>点击这里</button>
</body>
照例 先来个按钮
点击一下 然后出现事件
那样能看得更明显
接下来是 写它们的方法和元素
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#ak").css("color","blue").slideUp(2000).slideDown(2000);
});
});
</script>
选择到ID为 ”ak” 的内容 然后改变它们的样式
css(), slideUp(), and slideDown() 链接在一起。
把它css（） 颜色设置为蓝色
并向上滑动 两秒时间完成
最后向下滑动 也是两秒时间完成
当然 别忘了了插入js插件
<meta name="viewport" content="width=device-width" />
<script src="~/Content/bootstrap-3.3.7-dist/js/jquery-1.11.3.min.js"></script>
<title>Chaining</title>
然后看效果图
一开始是这样的
最后的结果是
呃 。。。 它最后的颜色变成蓝色了
但是上下的滑动效果也出来了
只是不好截图
如果需要，我们也可以添加多个方法调用。
值得提醒的是：
当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。
就比如
$("#p1").css("color","blue")
.slideUp(2000)
.slideDown(2000);
这样的代码也是可以执行的
效果也是跟上面一样
jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。
总的来说 还是挺好用的
扫一扫
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
