jQuery中隊(duì)列queue()函數(shù)怎么使用

這篇“jQuery中隊(duì)列queue()函數(shù)怎么使用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“jQuery中隊(duì)列queue()函數(shù)怎么使用”文章吧。

成都創(chuàng)新互聯(lián)主營(yíng)盱眙網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開(kāi)發(fā)公司,盱眙h5微信小程序搭建,盱眙網(wǎng)站營(yíng)銷(xiāo)推廣歡迎盱眙等地區(qū)企業(yè)咨詢(xún)

如果當(dāng)前jQuery對(duì)象匹配多個(gè)元素：獲取隊(duì)列時(shí)，只獲取第一個(gè)匹配元素上的隊(duì)列；設(shè)置隊(duì)列(替換隊(duì)列、追加函數(shù))時(shí)，則為每個(gè)匹配元素都分別進(jìn)行設(shè)置。
該函數(shù)屬于jQuery對(duì)象(實(shí)例)。如果需要移除并執(zhí)行隊(duì)列中的第一個(gè)函數(shù)，請(qǐng)使用dequeue()函數(shù)。你也可以使用clearQueue()函數(shù)清空指定的隊(duì)列。

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

用法一：

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

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

用法二：

jQueryObject.queue( [ queueName ,] callback )

將指定的函數(shù)添加到指定的隊(duì)列(末尾)。
注意：queue()函數(shù)的所有設(shè)置操作針對(duì)當(dāng)前jQuery對(duì)象所匹配的每一個(gè)元素；所有讀取操作只針對(duì)第一個(gè)匹配的元素。

參數(shù)
請(qǐng)根據(jù)前面語(yǔ)法部分所定義的參數(shù)名稱(chēng)查找對(duì)應(yīng)的參數(shù)。
queueName：可選/String類(lèi)型指定的隊(duì)列名稱(chēng)，默認(rèn)為"fx"(表示jQuery中的標(biāo)準(zhǔn)動(dòng)畫(huà)效果隊(duì)列)。
newQueue：可選/Array類(lèi)型用于替換當(dāng)前隊(duì)列內(nèi)容的新隊(duì)列。
callback：Function類(lèi)型指定的函數(shù)，將會(huì)追加到隊(duì)列中。該函數(shù)有一個(gè)函數(shù)參數(shù)，調(diào)用該參數(shù)可以移除并執(zhí)行隊(duì)列中的第一個(gè)函數(shù)。

返回值
queue()函數(shù)的返回值是Array/jQuery類(lèi)型，返回值的類(lèi)型取決于當(dāng)前queue()函數(shù)執(zhí)行的是獲取操作還是設(shè)置操作。
如果queue()函數(shù)執(zhí)行的是設(shè)置操作(替換隊(duì)列、追加函數(shù))，則返回當(dāng)前jQuery對(duì)象本身；如果是獲取操作，則返回獲取到的函數(shù)隊(duì)列(數(shù)組)。
如果當(dāng)前jQuery對(duì)象匹配多個(gè)元素，讀取數(shù)據(jù)時(shí)，queue()函數(shù)只以其中第一個(gè)匹配的元素為準(zhǔn)。

實(shí)例：
1. jQuery為我們提供了queue()函數(shù)，來(lái)把你需要的某些代碼插入到某個(gè)隊(duì)列中

$('#test-change1').toggle(function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-goal1'));
    next();
  }).show('slow');

},function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-origin1'));
    next();      
  }).show('slow');
});

2. 自定義隊(duì)列

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
});

但就這段代碼而已，待你真正添加進(jìn)網(wǎng)頁(yè)，并且嘗試運(yùn)行，會(huì)發(fā)現(xiàn)并非“所見(jiàn)即所得”，壓根就不會(huì)有任何效果。

修改后：

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
})
.dequeue("custom"); //this is the key

一般對(duì)與dequeue()的定義是“刪除隊(duì)列中最頂部的函數(shù)，并且執(zhí)行它”。我并不贊同用“刪除”這個(gè)字眼，而是傾向于“取出”，其實(shí)這個(gè)函數(shù)的功能就好像是一個(gè)數(shù)據(jù)結(jié)構(gòu)中隊(duì)列的指針，待隊(duì)列中前一個(gè)函數(shù)執(zhí)行完后，取下一個(gè)隊(duì)列最頂端的函數(shù)。

3. queue: false

$("#object")
.delay(1000, "fader")
.queue("fader", function(next) {
  $(this).animate({opacity: 0},
    {duration: 1000, queue: false});
  next();
})
.dequeue("fader")
.animate({top: "-=40"}, {duration: 2000})

前1000毫秒，只有控制高度的“fx”隊(duì)列執(zhí)行，而后1000毫秒，控制不透明度的“fader”隊(duì)列和控制高度的“fx”并行。這里的并行就是queue:false

$('#section3a').slideUp(1000)
      .slideDown(1000)
      .animate({width: '50px'}, {duration: 1000, queue: false});

4. 獲取隊(duì)列長(zhǎng)度
比如用隊(duì)列名取得匹配元素的長(zhǎng)度：

var $queue=$("div").queue('fx');

很明顯，就是取得隊(duì)列名為'fx'的隊(duì)列，如果想取得長(zhǎng)度的話：

var $length=$('div').queue('fx').length;

注意這里的隊(duì)列長(zhǎng)度只是匹配元素還未運(yùn)行的隊(duì)列長(zhǎng)度，當(dāng)動(dòng)畫(huà)運(yùn)行完之后，隊(duì)列長(zhǎng)度會(huì)自動(dòng)歸為0

5.替換隊(duì)列

$('div').queue('fx',function(){
    $('div').slideDown('slow')
         .slideUp('slow')
         .animate({left:'+=100'},4000);
});//定義fx
$('div').queue('fx2',function(){
    $('div').slideDown('fast')
         .slideUp('fast')
         .animate({left:'+=100'},1000);
});//定義fx2

這里定義了兩個(gè)隊(duì)列，一個(gè)是慢隊(duì)列,也就是默認(rèn)的'fx',另一個(gè)是快隊(duì)列'fx2'

當(dāng)點(diǎn)擊某個(gè)按鈕時(shí)：

$('input').click(function(){
  $('div').queue('fx',fx2);
});

以上就是關(guān)于“jQuery中隊(duì)列queue()函數(shù)怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：jQuery中隊(duì)列queue()函數(shù)怎么使用
網(wǎng)頁(yè)URL：http://muchs.cn/article36/ipjdsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、微信公眾號(hào)、商城網(wǎng)站、網(wǎng)站排名、做網(wǎng)站、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容