通过 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 链的更多相关文章

  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. nginx、php-fpm启动脚本

    Nginx官方启动脚本 //service nginx stop|start|restart|reloadtouch /etc/init.d/nginx chmod nginxvi /etc/init ...

  2. laravel--laravel的重定向类Redirector

    laravel的重定向类Redirector 在laravel5中,重定向类可以直接通过redirect()方法直接获取,不需要声明,有几个常用的方法: redirect() -> to( “重 ...

  3. python 字符串的处理技巧--join

    >>> '+'.join('1234')'1+2+3+4'>>> '+'.join(a for a in '1234')'1+2+3+4'>>> ...

  4. java图形验证码生成工具类及web页面校验验证码

    最近做验证码,参考网上案例,发现有不少问题,特意进行了修改和完善. 验证码生成器: import javax.imageio.ImageIO; import java.awt.*; import ja ...

  5. 学习JDK1.8集合源码之--WeakHashMap

    1. WeakHashMap简介 WeakHashMap继承自AbstractMap,实现了Map接口. 和HashMap一样,WeakHashMap也是一种以key-value键值对的形式进行数据的 ...

  6. Leetcode575.Distribute Candies分糖果

    给定一个偶数长度的数组,其中不同的数字代表着不同种类的糖果,每一个数字代表一个糖果.你需要把这些糖果平均分给一个弟弟和一个妹妹.返回妹妹可以获得的最大糖果的种类数. 示例 1: 输入: candies ...

  7. django中的路由规则

    项目的目录结构 外层的firstysite目录与Django无关,只是你项目的容器,可以任意重命名. #其中settings.py是django的总配置文件,即项目的总管家#urls.py,则是项目的 ...

  8. C位域的初步了解

    以为C中的东西了解的差不多了...今天却是第一次才看到位域这个概念, 闲来无事的时候读起了编程之美,看一个问题的时候有种解答用到了位域, 位域的结构体定义,变量声明和结构体很相似: struct (结 ...

  9. ecshop二次开发之电子票

    前台效果展示: 2. 3. 后台展示效果: 代码实现: 一.             添加菜单项:路径admin\includes\inc_menu.PHP $modules['18_ticket_m ...

  10. ajax多图片上传demo

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...