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. PageHelper补充

    统计总数 Page<?> page = PageHelper.startPage(1,-1); long count = page.getTotal(); 分页 pageNum - 第N页 ...

  2. Linq 动态组合排序(Lambda)

    最近有个项目需要做一个排班的功能,需要对排班的数据按不同的规则进行排序:因为排序规则是动态变化的,所以不太适合放到数据库中(临时表)中处理: 所以考虑使用Linq的排序方式(按不同的条件判断条件组合排 ...

  3. python一些语法糖用法

    @修饰符 '@'符号用作函数修饰符是python2.4新增加的功能,修饰符必须出现在函数定义前一行,不允许和函数定义在同一行.也就是说@A def f(): 是非法的. 只可以在模块或类定义层内对函数 ...

  4. MFC版链表实现稀疏多项式相加减

    链表实现多项式运算(加减)MFC可视化版 题目 设计一个一元稀疏多项式简单计算器. 基本要求 (1)输入并建立两个多项式: (2)多项式a与b相加,建立和多项式c: (3)多项式a与b相减,建立差多项 ...

  5. Oracle 触发器 trigger

    触发器: 当用户登录/退出或者操作某个数据对象或者进行DDL(建表,建view)引起某个储存过程的值的变化,把这个隐含被调用的过程,称为触发器. 语法 CREATE OR REPLACE TRIGGE ...

  6. php抓取图片进行内容提取解析,文字性pdf进行内容文字提取解析

    2018年7月7日18:52:17 php是用纯算法,自己是提取图片内容不是不行,可以但是优化起来很麻烦还得设计学习库,去矫正数据的正确率 对于大多数项目来说,如果不是做ocr服务,就不必要做需求工具 ...

  7. 配置Mqtt

    一.java后台调用MQTT 准备工作:需要导入的jar包 <!-- mqtt依赖包--> <dependency> <groupId>org.fusesource ...

  8. linux安装jdk配置环境变量

    tar -zxvf xxxx.tar.gz export JAVA_HOME=/usr/local/jdk/jdk1.8.0_201export PATH=$JAVA_HOME/bin:$PATHex ...

  9. 10 Project 1: Erste Schritte in Python

    10 Project 1: Erste Schritte in PythonAnimationIn den Projekten werden sie nicht nur statische Objek ...

  10. check failed status == cudnn_status_success (4 vs. 0) cudnn_status_internal_error

    Check failed: error == cudaSuccess (30 vs. 0) unknown error  这个有可能是显存不足造成的,或者网络参数不对造成的 check failed ...