jQuery - Chaining

@(编程)

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

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

jQuery 方法链接

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

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

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

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

例子 1

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

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

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

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

例子 2

这样写也可以运行

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

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

jQuery - Chaining的更多相关文章

  1. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  2. JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  3. jQuery基础知识--选择器与效果

    $(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...

  4. python 爬取w3shcool的JQuery的课程并且保存到本地

    最近在忙于找工作,闲暇之余,也找点爬虫项目练练手,写写代码,知道自己是个菜鸟,但是要多加练习,书山有路勤为径.各位爷有测试坑可以给我介绍个啊,自动化,功能,接口都可以做. 首先呢,我们明确需求,很多同 ...

  5. Code optimization and organization in Javascript / jQuery

    This article is a combined effort of Innofied Javascript developers Puja Deora and Subhajit Ghosh) W ...

  6. 应该掌握的JQuery的7个效果

    一: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 实例 //点击隐藏 $("#hide&q ...

  7. [转]jQuery 双击事件(dblclick)时,不触发单击事件(click)

    例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教 ...

  8. 【JQuery】(1)JQuery基础

    JQuery基础 2019-11-02  21:11:17  by冲冲 1.jQuery简介 jQuery:轻量级."写的少,做的多".JavaScript函数库. 2.jQuer ...

  9. ASP。NET MVC警告横幅使用Bootstrap和AngularUI Bootstrap

    Watch this script in action - demo 下载Source Code from GitHub 下载Source Code from CodeProject (1.1 MB) ...

随机推荐

  1. List排序的两种简便方式

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace List ...

  2. HDU 1072 (不一样的入队条件) Nightmare

    之前的BFS都是需要一个标记数组,但这个题不一样,因为可能一个格子不止走一次. 那么我们就要寻找新的入队条件:left比上次经过的时候大才入队(left表示上次经过该点时剩余的时间). 为什么呢?我们 ...

  3. smarty 初始配置文件

    <?php define("ROOT",str_replace("\\","/",dirname(__FILE__)).'/'); r ...

  4. css的使用技巧资料

    http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/ http: ...

  5. 关于ios越狱开发的那些事

    也许吧,每每接触某些新东西的时候,都有点犯晕吧,这不是应该要的. 第一次接触ios越狱开发,也是这样吧.这篇主要是从无到有的说一下ios越狱的开发,网上很多的教程大部门都比较旧了吧,放在新设备上总是出 ...

  6. python练习程序(c100经典例21)

    题目: 猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早上想再吃时,见只 ...

  7. centos下安装xfce+vnc

    首先安装桌面环境,我选择的是xfce,轻量级桌面,小巧实用不占太多内存,(占用内存方面,xfce少于kde,kde少于gnome). 安装xfce桌面一开始我以为第三方的软件源如rpmforge等应该 ...

  8. <Liunx常用命令一>之TOP

    一:作用        ----->TOP命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况.        ----->TOP是一个动态显示过程,即可以通过用 ...

  9. org.hibernate.MappingException: duplicate import异常

    在开发hibernate时,一起多谢ORM类和映射文件时,报出:org.hibernate.MappingException: duplicate import com.XXX异常 解决方案: 检查你 ...

  10. Creole

    Home           Bisher besucht:    AnzeigenAnhängeInfo           The Creole 1.0 project has been succ ...