0

0

jQuery.queue()实例用法详解

巴扎黑

巴扎黑

发布时间:2017-06-20 11:11:26

|

1552人浏览过

|

来源于php中文网

原创


queue()函数用于获取或设置当前匹配元素上待执行的函数队列

如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列;设置队列(替换队列、追加函数)时,则为每个匹配元素都分别进行设置。

该函数属于jquery对象(实例)。如果需要移除并执行队列中的第一个函数,请使用dequeue()函数。你也可以使用clearqueue()函数清空指定的队列。

语法

jQuery 1.2 新增该函数。queue()函数具有如下两种用法:

用法一

jQueryObject.queue( [ queueName ] [, newQueue ] )

如果没有指定任何参数或只指定了queueName参数,则表示获取指定名称的函数队列。如果指定了newQueue参数,则表示使用新的队列newQueue设置(替换)当前队列中的所有内容。

用法二

jQueryObject.queue( [ queueName ,] callback )

将指定的函数添加到指定的队列(末尾)。

注意queue()函数的所有设置操作针对当前jQuery对象所匹配的每一个元素;所有读取操作只针对第一个匹配的元素。

参数

请根据前面语法部分所定义的参数名称查找对应的参数。

参数 描述
queueName 可选/String类型指定的队列名称,默认为"fx"(表示jQuery中的标准动画效果队列)。
newQueue 可选/Array类型用于替换当前队列内容的新队列。
callback Function类型指定的函数,将会追加到队列中。该函数有一个函数参数,调用该参数可以移除并执行队列中的第一个函数。

返回值

queue()函数的返回值Array/jQuery类型,返回值的类型取决于当前queue()函数执行的是获取操作还是设置操作。

tooltip截图显示用法实例
tooltip截图显示用法实例

tooltip截图显示用法实例

下载

如果queue()函数执行的是设置操作(替换队列、追加函数),则返回当前jQuery对象本身;如果是获取操作,则返回获取到的函数队列(数组)。

如果当前jQuery对象匹配多个元素,读取数据时,queue()函数只以其中第一个匹配的元素为准。

示例&说明

以下面这段HTML代码为例:

 id="n1" style="width: 200px; height: 100px; border: 1px solid #ccc;" >


id="n2" style="width: 200px; height: 100px; border: 1px solid #ccc;" >


id="n3" style="width: 200px; height: 100px; border: 1px solid #ccc;" >

我们编写如下jQuery代码:

var $ps = $("p");

// 为每个p元素上的队列"q"设置(替换成)新的队列
// (由于之前没有队列"q",这相当于新增一个对垒"q")
$ps
.queue("q", [
function(next){ alert("队列函数1"); /* next(); 调用该函数可以移除并执行当前队列中的第一个函数 */ } ,
function(next){ alert("队列函数2"); } ,
function(next){ alert("队列函数3"); }
]);

var queue = $ps.queue("q"); // 获取第一个p元素的队列"q"
var queue1 = $("#n1").queue("q");
var queue2 = $("#n2").queue("q");
var queue3 = $("#n3").queue("q");
document
.writeln( queue === queue1 ); // true
document
.writeln( queue === queue2 ); // false
document
.writeln( queue === queue3 ); // false

document
.writeln( queue.length ); // 3

// 为n1的队列"q"的末尾添加一个处理函数
$
("#n1").queue("q", function(){
// 这里的this表示当前DOM元素(n1)
alert
("队列函数4");
});

document
.writeln( queue.length ); // 4

// 使用dequeue()可以移除并执行队列中的第一个函数
$
("#n1").dequeue("q"); // 弹出对话框:"队列函数1"

我们也可以不指定queueName参数,该参数的默认值为"fx",表示jQuery默认的效果队列。

var $ps = $("p");

// 为每个p元素设置两个自定义动画
$ps
.animate( {width: 400, height: 200}, 1000 )
.animate( {width: 200, height: 100 }, 1000 );

var fx = $ps.queue(); // 相当于:var fx = $ps.queue("fx");
document
.writeln( fx.length ); // 2
document
.writeln( fx[0] + '
'
); // "inprogress"(第一个动画函数已被移除并开始执行,所以在队列开头添加该字符串来表示,如果执行完成,将开始移除并执行第二个动画函数)
document
.writeln( fx[1] ); // 第二个动画的执行函数

// 用一个空的数组替换当前动画队列,即可清空动画队列
// 此时第一个动画函数已经从队列中移除、正在执行
// 因此第一个动画函数执行完毕后,就不会执行第二个动画函数(被清空了)
$ps
.queue( [ ] );

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Go 教程
Go 教程

共32课时 | 4.4万人学习

麻省理工大佬Python课程
麻省理工大佬Python课程

共34课时 | 5.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号