当前位置: 首页 > 中文手册 > jQuery.queue() 函数详解

jQuery.queue() 函数详解

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类型用于替换当前队列内容的新队列。
callbackFunction类型指定的函数,将会追加到队列中。该函数有一个函数参数,调用该参数可以移除并执行队列中的第一个函数。

返回值

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

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

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

示例&说明

以下面这段HTML代码为例:

<div id="n1" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
<div id="n2" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
<div id="n3" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>

我们编写如下jQuery代码:

var $divs = $("div");

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

var queue = $divs.queue("q"); // 获取第一个div元素的队列"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 $divs = $("div");

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

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

// 用一个空的数组替换当前动画队列,即可清空动画队列
// 此时第一个动画函数已经从队列中移除、正在执行
// 因此第一个动画函数执行完毕后,就不会执行第二个动画函数(被清空了)
$divs.queue( [ ] );
35 8
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。