jQuery - Chaining

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

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


jQuery 方法链接

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

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

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

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

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

实例

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

尝试一下 »

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

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

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

实例

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

尝试一下 »

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

时间: 2024-08-09 04:13:25

jQuery - Chaining的相关文章

JavaScript强化教程——jQuery - Chaining

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery - Chaining 通过 jQuery,您可以把动作/方法链接起来. Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上). jQuery 方法链接 直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条). 不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条. 提示:这样的话,

jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列.默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行. 可选的 goToEnd 参数规定是否立即完成当前动画.默认是 false. 因此,默认地,stop() 会清除在被

jQuery - Chaining 链接技术

Chaining 允许在一条语句中允许多个 jQuery 方法(在相同的元素上). jQuery 方法链接直到现在,都是一次写一条 jQuery 语句(一条接着另一条).不过,有一种名为链接(chaining)的技术,允许在相同的元素上运行多条 jQuery 命令,一条接着另一条. 例子 1下面的例子把 css(), slideUp(), and slideDown() 链接在一起."p1" 元素首先会变为红色,然后向上滑动,然后向下滑动: 1 $("#p1").c

jQuery基础知识--选择器与效果

$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class="test"的元素 $("#test").hide()--隐藏所有id="test"的元素 文档就绪函数 $(document).ready(function() {     ---------jQuery function go here----

jQuery 教程

jQuery 教程简介 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应

jQuery效果总结

1. .html .js <div  class="aa"></div> $(".aa"). <div  id="aa"></div> $("#aa"). jQuery 隐藏/显示  .hide()   .show()    .toggle() jQuery 淡入淡出    .fadeIn()   .fadeOut()   .fadeToggle() jQuery 滑动  .sl

[转]jQuery 双击事件(dblclick)时,不触发单击事件(click)

例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教程 Web Services 系列教程 建站手册 jQuery 教程 jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 效果 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画

jquery效果(二)

jQuery animate() 方法用于创建自定义动画.语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性.可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒.可选的 callback 参数是动画完成后所执行的函数名称. $("button").click(function(){ $("div&q

【JQuery】(1)JQuery基础

JQuery基础 2019-11-02  21:11:17  by冲冲 1.jQuery简介 jQuery:轻量级."写的少,做的多".JavaScript函数库. 2.jQuery功能 HTML元素选取 HTML元素操作 HTMLDOM遍历和修改 CSS操作 HTML事件函数 JavaScript特效和动画 Ajax异步操作 提供丰富的插件 3.jQuery版本 目前jQuery有三大版本: 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增.因此一般项目来说,