Jquery复习(三)之链式调用
通过 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复习(三)之链式调用的更多相关文章
- 仿jQuery之链式调用
链式调用的形式其实就是对象调用一连串的方法.为什么能连续调用这么多的方法?因为调用方法返回调用的对象,于是乎就可以一如既往,一往无前地调用下去.链式调用的原理就是在方法中返回执行上下文this,每次调 ...
- Javasript设计模式之链式调用
写过jquery的可能都知道,jquery里面可以很方便的使用以下代码: // 不使用链式调用 const element = $(ele); element.addClass('red'); ele ...
- spring aop 之链式调用
关关雎鸠,在河之洲.窈窕淑女,君子好逑. 概述 AOP(Aspect Orient Programming),我们一般称为面向方面(切面)编程,作为面向对象的一种补充,用于处理系统中分布于各个模块的横 ...
- jquery之链式调用,层级菜单
一. 链式调用的含义 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $('#div1') // id为div1的元素 .children('ul ...
- JQuery学习三(隐式迭代和节点遍历)
在JQuery中根据id获取控件,如果输入id错误是不报错的. 必要时可以通过写判断语句进行判断是否id写错 <!DOCTYPE html> <html xmlns="ht ...
- 《javascript设计模式》笔记之第六章:方法的链式调用
这一章要实现的就是jQuery的那种链式调用,例子: $(this).setStyle('color', 'green').show(); 一:调用链的结构: 首先我们来看一下最简单的$()函数的实现 ...
- JavaScript中的链式调用
链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等, ...
- jQuery的XX如何实现?——2.show与链式调用
往期回顾: jQuery的XX如何实现?——1.框架 -------------------------- 源码链接:内附实例代码 jQuery使用许久了,但是有一些API的实现实在想不通.于是抽空看 ...
- 深入了解jQuery之链式结构
本文是在阅读了Aaron艾伦的jQuery源码解析(地址:http://www.imooc.com/learn/172)后的个人体会以及笔记.在这里感谢艾伦老师深入浅出的讲解!! 1 什么是链式? 先 ...
随机推荐
- ServletConfig接口
ServletConfig接口 Servlet容器初始化Servlet对象时会为Servlet创建一个ServletConfig对象,在ServletConfig对象中包含了Servlet的初始化参数 ...
- 如何基于String实现同步锁?
在某些时候,我们可能想基于字符串做一些事情,比如:针对同一用户的并发同步操作,使用锁字符串的方式实现比较合理.因为只有在相同字符串的情况下,并发操作才是不被允许的.而如果我们不分青红皂白直接全部加锁, ...
- java 调用腾讯云短信api
依赖: <!--腾讯短信依赖--> <dependency> <groupId>com.github.qcloudsms</groupId> <a ...
- C++入门经典-例5.1-输出变量的指针
1:代码如下: // 5.1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...
- 设置Google浏览器不缓存JS
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 第十一周Java学习总结。
java UI 图形界面知识梳理: ATM: 在整个AWT包中提供的所有工具类主要分为以下3种. (1)组件:Component. (2)容器:Container. (3)布局管理器:LayoutMa ...
- PHP 封装类来访问数据库
封装访问数据库的类 <?php class DBDA { public $host = "localhost"; //数据库地址 public $uid = "ro ...
- 选择company回显appname
function showSupCompany() { var obj = {}; obj.label = ScompanyId.getSelectedLabel(); obj.value = Sco ...
- leetcode 289生命游戏
class Solution { public: vector<vector<,},{,},{,},{,-},{,-},{-,-},{-,},{-,}}; void gameOfLife( ...
- android中builder模式的使用
变种的Builder模式的自动化生产实现: AS安装插件 Innerbuilde 新建User类 public class User { private final String name; //必 ...