通过 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. H5C3--属性选择器、兄弟选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. For循环和闭包问题

    考虑一下以下的代码片段: for (var i = 0; i < 5; i++) { var btn = document.createElement('button'); btn.append ...

  3. 使用线程 Monitor.Wait() 和 Monitor.Pulse()

      Wait() 和 Pulse() 机制用于线程间交互.当在一个对象上使用Wait() 方法时,访问这个对象的线程就会一直等待直到被唤醒.Pulse() 和 PulseAll() 方法用来通知等待的 ...

  4. Python操作数据库遇到的问题

    网上教程很多,不多赘述,记录一下遇到的问题. 开始安装的是Python3.x最新版本,用的是pycharm,教程参考有 https://www.cnblogs.com/yufeihlf/p/60041 ...

  5. Leetcode11.Container With Most Water盛最多水的容器

    给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...

  6. Sorry, the page you are looking for is currently unavailable. Please try again later. Nginx

    访问html可以正常访问,但是访问PHP则错误,原因: nginx不能正常通过FastCGI结果访问PHP 查看php-fpm是否正常运行: 果然没有,重启php-fpm: /etc/init.d/p ...

  7. js中this指向学习总结

      在面向对象的语言中(例如Java,C#等),this 含义是明确且具体的,即指向当前对象.一般在编译期绑定. 然而js中this 是在运行期进行绑定的,这是js中this 关键字具备多重含义的本质 ...

  8. 高可用服务 AHAS 在消息队列 MQ 削峰填谷场景下的应用

    在消息队列中,当消费者去消费消息的时候,无论是通过 pull 的方式还是 push 的方式,都可能会出现大批量的消息突刺.如果此时要处理所有消息,很可能会导致系统负载过高,影响稳定性.但其实可能后面几 ...

  9. farv

    http://weishu.me/ https://github.com/jimupon/VirtualXposed O:  ?  api 26 - vdex N: speed-profile M: ...

  10. HDU - 1724 Ellipse 自适应辛普森模板

    OJ 题解传送门 //Achen #include<algorithm> #include<iostream> #include<cstring> #include ...