视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery.queue()实例用法详解
2020-11-27 20:19:21 责编:小采
文档

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代码为例:

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

我们编写如下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] + '<br>'); // "inprogress"(第一个动画函数已被移除并开始执行,所以在队列开头添加该字符串来表示,如果执行完成,将开始移除并执行第二个动画函数)
document.writeln( fx[1] ); // 第二个动画的执行函数

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

下载本文
显示全文
专题