`
Josh_Persistence
  • 浏览: 1651341 次
  • 性别: 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 会抛掉多余的空格,并按照一行长代码来执行上面的代码行。

分享到:
评论

相关推荐

    jQueryAPI学习入门精通

    **jQuery API 学习入门精通** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。这个压缩包文件“jQueryAPI-CHM-080801.CHM”显然是一个关于jQuery API的离线帮助...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    《jQuery 1.11.3:核心特性与应用解析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务,深受前端开发者的喜爱。在这个主题中,我们将深入探讨jQuery ...

    jquery JQuery API.CHM jquery-1.2.min.js

    5. **动画(Animation)**:jQuery的`animate()`函数可以创建自定义动画效果,而`fadeIn()`、`fadeOut()`、`slideToggle()`等预定义的动画效果则让页面交互更生动。 6. **Ajax(Ajax Handling)**:`$.ajax()`是...

    jquery 各个版本下载(1.32-1.8.1)

    2. **链式操作(Chaining)**:jQuery对象是链式调用的基础,允许开发者在一个语句中执行多个操作,如`$("#myDiv").hide().slideUp()`,这会首先隐藏`#myDiv`,然后滑动隐藏。 3. **事件处理(Events)**:jQuery...

    JQuery-latest-Chinese-document.rar_jquery_jquery-latest

    3. **事件处理(Events)**:jQuery 支持绑定事件监听器,使得处理用户交互变得简单。例如,`$("#myButton").click(function() {...})`用于在按钮点击时执行函数。 4. **方法链(Method Chaining)**:jQuery对象...

    jquery-1.5.1.js;jquery-1.5.1.min.js 框架

    4. **动画效果(Effects)**:jQuery内置了各种动画效果,如`fadeIn()`和`fadeOut()`实现元素的淡入淡出,`slideUp()`和`slideDown()`实现滑动效果,`animate()`可以自定义复杂的动画。 5. **Ajax交互(Ajax)**:...

    jquery-1.2-UnCompressed

    - **链式调用(Chaining)**:jQuery方法返回的是jQuery对象本身,因此可以连续调用多个方法,如`$("#element").hide().fadeIn()`。 - **DOM操作(DOM Manipulation)**:提供了便利的DOM操作接口,如.append(),....

    jquery-1.2.6-vsdoc-cn;jQuery 工具包

    5. **效果(Effects)**:jQuery提供了各种动画效果,如淡入淡出、滑动、改变大小等,如`.fadeIn()`, `.slideUp()`, `.animate()`。 ### jQuery 1.2.6 版本特性 - **增强的DOM操作**:在1.2.6版本中,jQuery对DOM...

    最近版本jquery3.1.1

    - **链式操作(Chaining)**:jQuery对象允许连续调用方法,如`$("#element").hide().fadeIn()`,使得代码更加简洁。 - **DOM操作(Manipulation)**:添加、删除或修改DOM元素,如`append()`、`remove()`和`html()...

    jQuery一些入门代码demo

    本教程将通过一系列入门级的代码示例,帮助初学者快速掌握jQuery的基本用法。 1. **选择器(Selectors)**:jQuery的选择器类似于CSS,用于选取页面上的HTML元素。例如,`$("#id")`选取ID为"id"的元素,`$(".class...

    《锋利的jQuery》(高清扫描版-有书签)

    4. **动画效果(Animations)**:jQuery的动画功能非常强大,`fadeIn()`, `fadeOut()`, `slideToggle()`等方法可以轻松实现淡入淡出、滑动等效果。`animate()`函数则允许自定义复杂的动画过程。 5. **Ajax交互...

    jquery资料--jquery学习资料

    2. **在线教程(Online Tutorials)**:网站如W3Schools(https://www.w3schools.com/jquery/),Codecademy(https://www.codecademy.com/learn/learn-jquery)提供互动教程。 3. **示例代码(Code Examples)**:...

    JQUERY的API中文文档

    **jQuery API中文文档详解** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。其丰富的API使得开发者能够高效地编写出高性能的Web应用程序。这篇文档将深入探讨...

    jquery-1.3.2.min.js

    - **链式操作(Chaining)**:jQuery对象允许连续调用多个方法,如$("#element").css("color", "red").slideUp(),提高了代码的效率和可读性。 - **事件处理(Events)**:jQuery提供了一套统一的事件处理方式,如...

    Linq入门到精通

    **LINQ 入门到精通** LINQ (Language Integrated Query,语言集成查询) 是 .NET Framework 的一项功能,它允许开发者使用一致的查询语法在各种数据源上进行操作,包括对象集合、数据库、XML 文件等。这篇教程将帮助...

    jQuery-1.6-api-en

    jQuery社区提供了大量插件,如滑动效果(Slide)、轮播(Carousel)、表单验证(Validation)等,大大扩展了jQuery的功能。安装插件通常只需引入相应的JS文件并调用相应的方法。 ### 9. **文档(Documentation)** ...

    jquery-api-1-7

    jQuery的`.animate()`方法允许创建自定义的平滑动画效果。1.7版本中,动画控制更为精细,可以设置缓动函数,控制速度曲线,如`linear`和`swing`。此外,`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等方法也得到了...

    jQuery基础自学笔记(pink老师jQuery全内容)

    1. **jQuery 入门** jQuery 的引入通常通过在HTML文档的`<head>`部分插入`<script>`标签,引用CDN或者本地的jQuery库。例如: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``...

    jquery-2.2.4

    5. **动画(Animations)**:jQuery的`animate()`方法可以创建自定义动画效果,`fadeIn()`和`fadeOut()`用于淡入淡出效果,`slideToggle()`实现滑动切换。 **二、jQuery 2.x 版本特性** 1. **不支持IE6/7/8**:...

Global site tag (gtag.js) - Google Analytics