jQuery.queue()實例用法詳解

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:19:21

jQuery.queue()實例用法詳解

jQuery.queue()實例用法詳解:queue()函數(shù)用于獲取或設(shè)置當(dāng)前匹配元素上待執(zhí)行的函數(shù)隊列。如果當(dāng)前jQuery對象匹配多個元素：獲取隊列時，只獲取第一個匹配元素上的隊列；設(shè)置隊列(替換隊列、追加函數(shù))時，則為每個匹配元素都分別進(jìn)行設(shè)置。該函數(shù)屬于jQuery對象(實例)。如果需要移除并執(zhí)

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀jQuery.queue()實例用法詳解:queue()函數(shù)用于獲取或設(shè)置當(dāng)前匹配元素上待執(zhí)行的函數(shù)隊列。如果當(dāng)前jQuery對象匹配多個元素：獲取隊列時，只獲取第一個匹配元素上的隊列；設(shè)置隊列(替換隊列、追加函數(shù))時，則為每個匹配元素都分別進(jìn)行設(shè)置。該函數(shù)屬于jQuery對象(實例)。如果需要移除并執(zhí)

queue()函數(shù)用于獲取或設(shè)置當(dāng)前匹配元素上待執(zhí)行的函數(shù)隊列。

如果當(dāng)前jQuery對象匹配多個元素：獲取隊列時，只獲取第一個匹配元素上的隊列；設(shè)置隊列(替換隊列、追加函數(shù))時，則為每個匹配元素都分別進(jìn)行設(shè)置。

該函數(shù)屬于jQuery對象(實例)。如果需要移除并執(zhí)行隊列中的第一個函數(shù)，請使用dequeue()函數(shù)。你也可以使用clearQueue()函數(shù)清空指定的隊列。

語法

jQuery 1.2 新增該函數(shù)。queue()函數(shù)具有如下兩種用法：

用法一：

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

如果沒有指定任何參數(shù)或只指定了queueName參數(shù)，則表示獲取指定名稱的函數(shù)隊列。如果指定了newQueue參數(shù)，則表示使用新的隊列newQueue設(shè)置(替換)當(dāng)前隊列中的所有內(nèi)容。

用法二：

jQueryObject.queue( [ queueName ,] callback )

將指定的函數(shù)添加到指定的隊列(末尾)。

注意：queue()函數(shù)的所有設(shè)置操作針對當(dāng)前jQuery對象所匹配的每一個元素；所有讀取操作只針對第一個匹配的元素。

參數(shù)

請根據(jù)前面語法部分所定義的參數(shù)名稱查找對應(yīng)的參數(shù)。

參數(shù)	描述
queueName	可選/String類型指定的隊列名稱，默認(rèn)為"fx"(表示jQuery中的標(biāo)準(zhǔn)動畫效果隊列)。
newQueue	可選/Array類型用于替換當(dāng)前隊列內(nèi)容的新隊列。
callback	Function類型指定的函數(shù)，將會追加到隊列中。該函數(shù)有一個函數(shù)參數(shù)，調(diào)用該參數(shù)可以移除并執(zhí)行隊列中的第一個函數(shù)。

返回值

queue()函數(shù)的返回值是Array/jQuery類型，返回值的類型取決于當(dāng)前queue()函數(shù)執(zhí)行的是獲取操作還是設(shè)置操作。

如果queue()函數(shù)執(zhí)行的是設(shè)置操作(替換隊列、追加函數(shù))，則返回當(dāng)前jQuery對象本身；如果是獲取操作，則返回獲取到的函數(shù)隊列(數(shù)組)。

如果當(dāng)前jQuery對象匹配多個元素，讀取數(shù)據(jù)時，queue()函數(shù)只以其中第一個匹配的元素為準(zhǔn)。

示例&說明

以下面這段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"設(shè)置(替換成)新的隊列
// (由于之前沒有隊列"q",這相當(dāng)于新增一個對壘"q")
$ps.queue("q", [
 function(next){ alert("隊列函數(shù)1"); /* next(); 調(diào)用該函數(shù)可以移除并執(zhí)行當(dāng)前隊列中的第一個函數(shù) */ } ,
 function(next){ alert("隊列函數(shù)2"); } ,
 function(next){ alert("隊列函數(shù)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"的末尾添加一個處理函數(shù)
$("#n1").queue("q", function(){
 // 這里的this表示當(dāng)前DOM元素(n1)
 alert("隊列函數(shù)4"); 
});
document.writeln( queue.length ); // 4
// 使用dequeue()可以移除并執(zhí)行隊列中的第一個函數(shù)
$("#n1").dequeue("q"); // 彈出對話框："隊列函數(shù)1"

我們也可以不指定queueName參數(shù)，該參數(shù)的默認(rèn)值為"fx"，表示jQuery默認(rèn)的效果隊列。

var $ps = $("p");// 為每個p元素設(shè)置兩個自定義動畫
$ps.animate( {width: 400, height: 200}, 1000 )
.animate( {width: 200, height: 100 }, 1000 );
var fx = $ps.queue(); // 相當(dāng)于：var fx = $ps.queue("fx");
document.writeln( fx.length ); // 2
document.writeln( fx[0] + '<br>'); // "inprogress"(第一個動畫函數(shù)已被移除并開始執(zhí)行，所以在隊列開頭添加該字符串來表示，如果執(zhí)行完成，將開始移除并執(zhí)行第二個動畫函數(shù))
document.writeln( fx[1] ); // 第二個動畫的執(zhí)行函數(shù)
// 用一個空的數(shù)組替換當(dāng)前動畫隊列，即可清空動畫隊列
// 此時第一個動畫函數(shù)已經(jīng)從隊列中移除、正在執(zhí)行
// 因此第一個動畫函數(shù)執(zhí)行完畢后，就不會執(zhí)行第二個動畫函數(shù)(被清空了)
$ps.queue( [ ] );

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com