11. jQuery - Chaining

通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

jQuery 方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示：这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
例子 1
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。”p1” 元素首先会变为红色，然后向上滑动，然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("#p1").css("color","red").slideUp(2000).slideDown(2000);});
});
</script>
</head><body><p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button></body>
</html>

如果需要，我们也可以添加多个方法调用。
提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。

例子 2
这样写也可以运行：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("#p1").css("color","red").slideUp(2000).slideDown(2000);});
});
</script>
</head><body><p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button></body>
</html>

jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。

11. jQuery - Chaining相关推荐

jQuery - Chaining
jQuery - Chaining 通过 jQuery,可以把动作/方法链接在一起. Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上). jQuery 方法链接直 ...
jQuery前端开发学习指南(11)——jQuery属性过滤选择器
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 属性过滤选择器概述属性过滤选择器用于根据元素的属性来匹配元素. [attribute] 匹配 ...
jQuary总结11:jQuery插件封装---jQuery封装手风琴动画插件
完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...
11.jQuery遍历
遍历 jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元 ...
11.jQuery选择器和事件
选择器://基本选择器#指定id //选择指定id对应的元素.指定类 //选择指定类对应的集合标签 //选择指定标签对应的集合选择器,选择器 //组合选择器选择器选择器 //后代选择器选择器> ...
jquery mobile快速入门_【K些项目】学透jquery，11个国内最新项目资料
对代码.编程感兴趣的可以关注老K玩代码和我交流! " jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaSc ...
11个实用jQuery日历插件
1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...
11月14日:jquery
学习并使用jquery 一:jquery概述 jq就是Javascript的的仓库仓库:可以把很多东西放到这个仓库里,使用的时候在仓库中找就行. JavaScript库:即library,是一个封装 ...
jquery button disabled_jQuery练习
1.jQuery使用选择器获取HTML元素例:使所有的button元素有弹回效果 $("button").addClass("animated bounce" ...
jQuery是一个JavaScript库极大的简化JavaScript编程
jQuery是一个JavaScript库极大的简化JavaScript编程 1.jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScr ...

11. jQuery - Chaining

11. jQuery - Chaining相关推荐

最新文章

热门文章