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

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

jQuery 方法链接

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

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

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

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

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

实例

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

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

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

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

实例

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

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

Jquery复习(三)之链式调用的更多相关文章

  1. 仿jQuery之链式调用

    链式调用的形式其实就是对象调用一连串的方法.为什么能连续调用这么多的方法?因为调用方法返回调用的对象,于是乎就可以一如既往,一往无前地调用下去.链式调用的原理就是在方法中返回执行上下文this,每次调 ...

  2. Javasript设计模式之链式调用

    写过jquery的可能都知道,jquery里面可以很方便的使用以下代码: // 不使用链式调用 const element = $(ele); element.addClass('red'); ele ...

  3. spring aop 之链式调用

    关关雎鸠,在河之洲.窈窕淑女,君子好逑. 概述 AOP(Aspect Orient Programming),我们一般称为面向方面(切面)编程,作为面向对象的一种补充,用于处理系统中分布于各个模块的横 ...

  4. jquery之链式调用,层级菜单

    一. 链式调用的含义 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $('#div1') // id为div1的元素 .children('ul ...

  5. JQuery学习三(隐式迭代和节点遍历)

    在JQuery中根据id获取控件,如果输入id错误是不报错的. 必要时可以通过写判断语句进行判断是否id写错 <!DOCTYPE html> <html xmlns="ht ...

  6. 《javascript设计模式》笔记之第六章:方法的链式调用

    这一章要实现的就是jQuery的那种链式调用,例子: $(this).setStyle('color', 'green').show(); 一:调用链的结构: 首先我们来看一下最简单的$()函数的实现 ...

  7. JavaScript中的链式调用

    链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等, ...

  8. jQuery的XX如何实现?——2.show与链式调用

    往期回顾: jQuery的XX如何实现?——1.框架 -------------------------- 源码链接:内附实例代码 jQuery使用许久了,但是有一些API的实现实在想不通.于是抽空看 ...

  9. 深入了解jQuery之链式结构

    本文是在阅读了Aaron艾伦的jQuery源码解析(地址:http://www.imooc.com/learn/172)后的个人体会以及笔记.在这里感谢艾伦老师深入浅出的讲解!! 1 什么是链式? 先 ...

随机推荐

  1. [python 笔记] __iter__迭代器

    可迭代对象和迭代器 https://blog.csdn.net/nightcharm/article/details/78964676 可迭代对象 对象里面含有__iter__()方法的实现,对象的_ ...

  2. PHP 判断当前日期是否是法定节假日或者休息日 (原)

    //判断日期是不是节假日或者双休日接口 @param time [时间(时间戳或者Y-m-d都可)] public function get_type_by_date(){ $t = $_GET['t ...

  3. JavaWeb_客户端相对/绝对路径和服务器端路径

    客户端的绝对路径和相对路径 相对路径:相对与某个基准目录的路径,在同一根目录下各子目录文件之间的相互引用, 绝对路径:指目录下的绝对位置,直接到的目标位置 @charset "UTF-8&q ...

  4. 微信小程序_(组件)组件基础

    (progress.text.block) 组件基础效果 官方文档:传送门 Page({ /** * 页面的初始数据 */ data: { text:"Gary 微信小程序\n", ...

  5. vue router 报错:NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}

    https://blog.csdn.net/weixin_43202608/article/details/98884620

  6. [python]python中**是什么

    作为运算符时 ** 在python里面表示幂运算 传递实参和定义形参(所谓实参就是调用函数时传入的参数,形参则是定义函数是定义的参数)的时候,你还可以使用两个特殊的语法:``*`` ** . 调用函数 ...

  7. CentOS 6.5上的Tomcat启动报错问题

    最近在搭建虚拟机环境,装的是CentOSQL 6.5版本,然后装的OpenJDK1.7,在Apache下载了一个纯净的Tomcat放到虚拟机上启动报错了: 这里有两个错误: 1.第一个错误,APR的问 ...

  8. MySql中根据一列状态值查询状态的个数

    最近搞报表的项目,要写数据库sql语句,根据状态值查询状态的个数,这个开始难为到我了,不过已经有解决办法了. 在数据库表中有一个字段是状态(zt),这里面有1-7这7个状态,现在查询每个状态的数量,并 ...

  9. C#程序模拟登录批量获取各种邮件内容信息

    一般来说,如果现实中你有这样一种需求“假如你是褥羊毛的羊毛党,你某日发现了一个app有一个活动,通过邮箱注册账号激活可以领5元红包,而恰恰你手上又有一批邮箱可用,那么批量获取邮箱中的激活链接去激活则是 ...

  10. C++入门经典-例6.19-字符串类型之修改string字符串的单个字符串

    1:头文件 #include <string> 声明一个string变量,形式如下: std::string s; 初始化string类型的变量: std::string s1(" ...