jQuery 链
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
jQuery 方法链接
直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。
不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
提示: 这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动:
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
如果需要,我们也可以添加多个方法调用。
提示:当进行链接时,代码行会变得很长。不过,jQuery 语法不是很严格;您可以按照希望的格式来写,包含换行和缩进。
如下书写也可以很好地运行:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行
jQuery 链的更多相关文章
- jQuery应用之(三)jQuery链
从前文的实例中,我们按到jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <script type="text/javascript" ...
- jQuery链式操作
讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...
- jQuery - 链(Chaining)
http://www.runoob.com/jquery/jquery-chaining.html jQuery - 链(Chaining) 通过 jQuery,可以把动作/方法链接在一起. Chai ...
- jQuery链式语法演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- mark jquery 链式调用的js原理
我们在使用jquery的时候会用到类似$("#id").css('color','red').show(200); 这样写有点减少代码量,减少了逐步查询DOM的性能损耗: js 原 ...
- 模拟jquery链式访问
一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下jquery的链式访问,这么好用的技能我赶紧get了下,研究后略微修改,模拟一个简单的链式访问,下面这段代码支持修改 ...
- Callback方法和JQuery链的解释
这里讲到了一条语句运行多个JQuery方法(同一个元素)和动画100%完成后执行的callback方法. <!DOCTYPE html> <html> <head> ...
- Jquery链式编程及Index()详解
Jquery中的方法基本 上都可以返回一个Jquery对象, 如: <body> <div class="divcontent"> <p>中国& ...
随机推荐
- python 3.0读取文件出现编码错误(illegal multibyte sequence )
代码如下: myfile2=open('e:/enterprise.xlsx',mode = 'r') file2_content=myfile2.readlines() print(file2_co ...
- Codeforces 455B
题目链接 B. A Lot of Games time limit per test 1 second memory limit per test 256 megabytes input standa ...
- JPA实体
Java类可以很容易地转换成实体. 对于实体转换,基本要求是 - 无参数构造函数 注解 @Entity和@Id注解. @Entity - 这是一个标记注释,表明这个类是一个实体.这个注释必须放在类名称 ...
- 基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 二零一七年工作中常用的基本Linux命令记录(Ubuntu)
Linux命令如下(Ubuntu): 1. apt-get install openssh-server 下载远程工具 2. apt-get install lrzsz 上传下载工具 3. apt-g ...
- mysql连接出现Unknown system variable 'tx_isolation'异常
出现这个异常,是因为mysql-connector-java.jar的版本太低,数据库的版本太高,不匹配导致的. 因此将mysql-connector-java升级到最新版本就解决了问题. 最新的三个 ...
- 【react】react-bookManager
作者可能是本意想要做一个图书管理系统,不过添加书籍的时候报错,所以简单的页面我们简单的看看 先上github地址:https://github.com/hesisi/react-bookManager ...
- ML面试1000题系列(31-40)
本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 31.下列哪个不属于CRF模型对于HMM和MEM ...
- 通过工具SQLyog进行导入数据
可以通过工具SQLyog进行图形化导入数据. 1.准备好Excel表格 2.将excel表格数据导入到mysql数据库 (1)打开准备好的excel表,选择格式 另存为csv. (2)如果准备的exc ...
- laravel-admin
laravel-admin 文档地址: http://laravel-admin.org/docs/#/zh/