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. linux下从源代码安装git

    之所以有这样的需求,是因为部分预安装的git版本太低,很多功能没有并且安全性存在问题. 比如git submodule add xxx@host:yyy.git必须在父repo的root目录安装,而新 ...

  2. Less tips:声明变量之前可以引用变量!

    Less中的variable可以在使用之后才被声明,这一特性对于希望覆盖前期声明的(比如bootstrap等第三方library的variable)变量,从而优雅地 使用你希望的效果提供了便利. 比如 ...

  3. 51nod1437 迈克步

    傻叉单调栈 #include<cstdio> #include<cstring> #include<cctype> #include<algorithm> ...

  4. Bitset位图

    位图(bitmap)就是用每一位来存放某种状态,适合于大规模数据但是数据状态又不是很多的情况下,通常来判断数据是否存在.位图的常见应用有两种: 1.存放大规模数据,例如腾讯的面试题,给40亿个unsi ...

  5. IOS中控制器的重要方法使用

    1.屏幕即将旋转的时候调用(控制器监控屏幕旋转) - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfac ...

  6. console.log的一个应用 -----用new方法生成一个img对象和document.createElement方法创建一个img对象的区别

    我用两种方法来生成img对象,第一种方法是用new方法,第二种方法是用document.createElement方法. var img1 = new Image(); var img2 = docu ...

  7. jboss集成eclipse

    eclipse Kepler + Jboss7.1 参考引用文档: http://www.tekdigest.com/how-to-install-jboss-tools-in-eclipse.htm ...

  8. 谷歌浏览器如何设置可以解决Ajax跨域问题?

    Ajax本身是不支持跨域的,跨域问题其实很简单,通过浏览器的相应设置可以完成两个不同的服务器或两个不同服务下的项目互相访问.希望大家给予评价及投票. 方法/步骤   首先谷歌快捷方式上右击,在下拉列表 ...

  9. 如何用HTML5+PhoneGap写个Path项目

    最近Path这个应用很火爆,网上也出现了不少仿Path菜单的项目.即使在原生APP里边,Path的效果也是非常赞的.我突然想,Web APP是不是也能做出类似Path那样的效果呢?于是就有了OPath ...

  10. PostgreSQL的备份和恢复

    关于PostgreSQL的备份和恢复详细信息请参阅<PostgreSQL中文文档>. 备份: #pg_dump --username=postgres v70_demo > v70_ ...