http://www.runoob.com/jquery/jquery-chaining.html

jQuery - 链(Chaining)


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

Chaining 允许我们在一条语句中运行多个 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 会抛掉多余的空格,并当成一行长代码来执行上面的代码行。

jQuery - 链(Chaining)的更多相关文章

  1. jQuery应用之(三)jQuery链

    从前文的实例中,我们按到jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <script type="text/javascript" ...

  2. jQuery链式操作

    讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...

  3. jQuery链式语法演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JQUERY链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...

  5. Callback方法和JQuery链的解释

    这里讲到了一条语句运行多个JQuery方法(同一个元素)和动画100%完成后执行的callback方法. <!DOCTYPE html> <html> <head> ...

  6. jQuery链式操作[转]

    用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...

  7. mark jquery 链式调用的js原理

    我们在使用jquery的时候会用到类似$("#id").css('color','red').show(200); 这样写有点减少代码量,减少了逐步查询DOM的性能损耗: js 原 ...

  8. 模拟jquery链式访问

    一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下jquery的链式访问,这么好用的技能我赶紧get了下,研究后略微修改,模拟一个简单的链式访问,下面这段代码支持修改 ...

  9. Jquery链式编程及Index()详解

    Jquery中的方法基本 上都可以返回一个Jquery对象, 如: <body> <div class="divcontent"> <p>中国& ...

随机推荐

  1. js获取手机信息

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. (59)Wangdao.com第十天_JavaScript 对象在 栈和堆

    对象的属性值 如果要使用特殊的属性名,需 对象["属性名"] = 属性值       // 存 对象["属性名"]       // 取 obj["1 ...

  3. 3D Slicer Hide 3D Cube and Axis Labels Programmatically 使用代码隐藏三维视图中的方框和坐标轴标签

    在3D Slicer中,我们如果想在自己写的插件中来修改三维视图中的默认设置的话,那么首先就需要获得三维视图的结点,其类型为vtkMRMLViewNode,获得了这个结点后,我们就可以用代码来修改一系 ...

  4. laravel之构造器操作数据库

    使用构造器来查询的优点是可以方式sql注入 1.插入 2.修改数据库 3.删除 4.查询

  5. python在读取文件时出现 'gbk' codec can't decode byte 0x89 in position 68: illegal multibyte sequence

    python在读取文件时出现“UnicodeDecodeError:'gbk' codec can't decode byte 0x89 in position 68: illegal multiby ...

  6. LocalDate

    java中做时间处理时一般会采用java.util.Date,但是相比于Date来说,还有更好的选择 -- java.time.LocalDate. 这是jdk8中新增的日期处理类,同时新增的还有ja ...

  7. appium api笔记

    打印上下文driver.contexts打印当前上下文driver.contextdriver.current_context切换上下文driver.switch_to.context('WEBVIE ...

  8. 香茅油:不只是驱虫剂 new

    如果您是芳香疗法的爱好者,香茅油对您来说可能并不陌生.香茅油还经常被添加到各种个人护理和清洁产品中,给人们带来多种益处. 什么是香茅油? 香茅精油是从香茅属 (Cymbopogon ) 植物家族中提取 ...

  9. Express全系列教程之(七):cookie的加密

    一.关于cookie加密 cookie加密是让客户端用户无法的值cookie明文信息,是数据安全的重要部分:一般的我们可以在保存cookie时对cookie信息进行加密,或者在res.cookie中对 ...

  10. 找出sql脚本中需要创建的表空间名称和数据库用户名

    测试的工作中,经常会遇到项目交接或者搭建一个新的测试环境,而创建oracle数据库用户及表空间时,需要提前找出脚本中的 数据库用户名和表空间名,所以自己写了一个python脚本,自动找出sql脚本中的 ...