`
Josh_Persistence
  • 浏览: 1632262 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类

Jquery简单入门到精通细节 - (十一)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 会抛掉多余的空格,并按照一行长代码来执行上面的代码行。

分享到:
评论

相关推荐

    Off-chaining Models and Approaches to Off-chain Computations

    区块链是不同计算和经济...这里引入的链下计算是将区块链上进行复杂的运算转移到链下,让链上和链下的任务区分开来,减轻链上不断为了交易而彼此之间相互计算而消耗的资源,从而让链上变得更轻,从而提高区块链的性能。

    JQuery In Action.PDF

    Its unique “chaining” model lets you perform multiple operations on a page element in succession, as in $(“div.elements”).addClass(“myClass”).load(“ajax_url”).fadeIn() jQuery in Action is a ...

    jQuery完全实例.rar

    jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    javascript的基础语法,面向对象的实现和设计模式实现

    包含 javascript 的基础语法 面向对象的实现 设计模式实现 模块化开 javascript 常见的疑问 jQuery NodeJs ... Javascript based 1.对象 JavaScript 引用 ...2. Chaining 3.Factory-Pattern 4. Bridge-Pattern

    非常好的js项目资源,分享出来.zip

    javascript包含 javascript 的基础语法 面向对象的实现 设计模式实现 模块化开 javascript 常见的疑问 jQuery NodeJs ... Javascript based 1.对象 JavaScript 引用 ...2. Chaining 3.Factory-Pattern 4. Bridge

    jQuery – 链(Chaining)

    jQuery – 链(Chaining) 通过 jQuery,可以把动作/方法链接在一起。...如需链接一个动作,您只需简单地把该动作追加到之前的动作上。 下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。”p

    optional-chaining-comparison-if-else

    其他可选链比较 带有或不带有可选选项的情况下链接的空检查的比较。 ChainedValidator#validate是实现验证链接的主要入口点。

    jquery.transit

    此插件支持这个特性所提供的大部分方法,同时增加了 jQuery 独有的技术:回调(callbacks)、自动增加浏览器 CSS 前缀、链盒(chaining)等。由于此插件使用了真正的 CSS3 规则,所以它不能兼容旧版本的浏览器。

    vue-template-babel-compiler:为基于 Babel 的 Vue.js SFC 启用 Optional Chaining 和许多新的 ES 特性

    vue-template-babel-compiler 为基于启用Optional Chaining和许多新的 ES 功能。特征所有特性Optional Chaining和更多新的 ES 功能 Bigint nullish coalescing 定制......演示用法 # 1: Install in your Vue project...

    optional-chaining-example:一个简单的可选链接介绍:fire:

    Optional Chaining提案非常棒,它所包含的功能肯定会改善JS生态系统! 。 这是一个简单的教程,可通过帮助冒险家不破坏我们的代码来学习 :crossed_swords: 首先是一个截图,其中有一个简单的示例可以开始滚动 :...

    chaining-tool

    链接工具创建责任链的快速方法##安装 npm install chaining-tool##用法 var Chain = require ( 'chaining-tool' ) ;var chain = new Chain ( ) ;chain . add ( function ( context , next ) { //Do somethong ...

    optional-chaining-codemod:Codemod从Lodash的get和逻辑表达式转换为可选链

    可选链接codemod 这是一个代码模型,用于迁移不同类型的lodash get调用和a && ab类型的表达式,以使用和。 需要以下babel插件来转换可选链和无效合并: 它能做什么? a && ab变成a?.b _.get(foo, 'a.b')和_....

    Struts Chaining-开源

    这是对Jakarta Struts功能的扩展,可以轻松地链接多个Action,而不会违反Official Struts Action流程。

    Backward-Chaining-Inference-Engine:一个推理引擎,它确定是否可以使用反向链接从知识库中给出的信息中推断出查询

    每个子句都以下列形式之一编写: 作为形式 p1 ∧ p2 ∧ ... ∧ pn ⇒ q 的蕴涵,其前提是原子句子的连词,其结论是单个原子句子。 作为具有单个原子句子的事实: q 每个原子句子都是应用于一定数量参数的谓词(不...

    Service Function Chaining (SFC) Architecture

    Service Function Chaining (SFC) Architecture

    chaining:javascript jquery 链接车把表达

    链接 选择菜单 #Country State City 示例 #Ajax 获取 Country #Ajax 获取所选国家的州 #Ajax 获取所选州的城市 怎么跑 cd 链接 npm 安装 cd 链接 gulp

    js代码-ES11的Optional Chaining示例代码。

    js代码-ES11的Optional Chaining示例代码。

    stylecssvaribles.css

    - chaining `--bar:var(--foo)` - fallback `var(--color, blue)` - :focus, :target, :hover - handle dynamic added html-content - handle dynamic added `<style>`, `<link>`-elements - js-integration: ...

    使用Antlr+Stringtemplate生成method chaining 源代码

    使用Antlr+Stringtemplate生成method chaining,一个不太简单的案例(1) 因为一直上传失败,猜是因为附件太小,所以包含了antlr-3.4-complete-no-antlrv2.jar和antlrworks-1.4.3.jar。对浪费你的带宽抱歉。

Global site tag (gtag.js) - Google Analytics