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

Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。

jQuery 方法链接

直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。

不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。

提示: 这样的话,浏览器就不必多次查找相同的元素。

如需链接一个动作,您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动:

  1. $(document).ready(function()
  2. {
  3. $("button").click(function(){
  4. $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  5. });
  6. });

 

如果需要,我们也可以添加多个方法调用。

提示:当进行链接时,代码行会变得很长。不过,jQuery 语法不是很严格;您可以按照希望的格式来写,包含换行和缩进。

如下书写也可以很好地运行:

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

jQuery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行  

 

jQuery 链的更多相关文章

  1. jQuery应用之(三)jQuery链

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

  2. jQuery链式操作

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

  3. jQuery - 链(Chaining)

    http://www.runoob.com/jquery/jquery-chaining.html jQuery - 链(Chaining) 通过 jQuery,可以把动作/方法链接在一起. Chai ...

  4. jQuery链式语法演示

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

  5. JQUERY链式操作实例分析

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

  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. Callback方法和JQuery链的解释

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

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

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

随机推荐

  1. 移植thinkPHP的dump()函数

    由于公司的开发机没有开xdebug拓展,导致var_dump()在浏览器上看很不方便. 因此,加入从thinkphp搬过来的dump()函数. function dump($var, $echo=tr ...

  2. Web基础了解版06-Jsp

    Jsp Jsp全称Java Server Pages,也就是在我们JavaWeb中的动态页面. Jsp能够以HTML页面的方式呈现数据,是一个可以嵌入Java代码的HTML. Jsp其本质就是一个Se ...

  3. 用navicat把MYSQL一张表的数据批追加到另外一张表

    1. 表结构完全一样 insert into 表1 select * from 表22. 表结构不一样(这种情况下得指定列名) insert into 表1 (列名1,列名2,列名3) select ...

  4. neo4j中对节点关系和聚类的思考

    由于neo4j在查找过程中具有事务,所以查询的速度非常慢!给出的建议如下: 一,将所有查询放在一个Session中,当所有查询完毕以后在关闭Driver和Session: 二,使用neo4j连接池,使 ...

  5. JavaScript-JQ初探实现自定义滚动条

    这是一个基本实现思路,如果有新手和我一样没什么事,喜欢瞎研究话,可以参考下. 一.Html <div class="scroll_con"> <div class ...

  6. LUOGU P2964 [USACO09NOV]硬币的游戏A Coin Game

    题目描述 Farmer John's cows like to play coin games so FJ has invented with a new two-player coin game c ...

  7. 属性中id和name的区别

    id 在HTML中的作用:      1.用id选择相应的style sheet(风格).       2. <A ..> 链接的目的地      3.脚本语言用它找目的地(找该id的标签 ...

  8. The method getTextContent() is undefined ?

    晚上下班的时候,把班上写了半截的代码带了回来.结果回到家后出乎意料的是回来的时候将代码导入eclipse后,下面这行代码就直接报错了,显示 getTextContent()未定义 . ((Elemen ...

  9. 替换文本:将文本文件中的所有src替换为dst

    题意: 将文本文件中的所有src替换为dst 方法一:使用String import java.io.File; import java.io.FileNotFoundException; impor ...

  10. 使用Gradle构建项目

    使用gradle构建项目之前,咱们先聊聊maven,使用maven构建项目和配置主要 接下来正式使用gradle来构建项目的和步骤: 1.下载源码 2.下载gradle 1.下载地址:https:// ...