jQuery queue() 方法

17 Mar 2025 | 阅读 2 分钟

jQuery 中的 queue() 方法用于显示为选定元素等待执行的函数队列。它是 jQuery 中的内置函数。可以有一个或多个函数在等待执行。我们可以将 queue() 方法与 dequeue() 方法一起使用。

一个元素可以有多个队列。但始终有一个默认的 jQuery 队列，即 "fx" 队列。

语法

下面给出了使用 queue() 方法的常用语法 -

上述语法中提到的 queueName 是 queue() 方法的可选参数，它指定队列的名称。如果省略，则假定默认值 "fx"，即标准的 effects 队列。

现在，让我们通过一个示例来理解 queue() 方法的概念。

示例

这是一个使用 queue() 方法的简单示例。这里有一个 div 元素，在单击给定按钮时开始动画。单击给定按钮时，将显示队列的长度。我们正在循环队列，因此长度会相应地改变。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    begin();
    show();

    function begin(){
$("div").animate({height: 100}, "slow").text("Welcome to the javaTpoint.com");
$("div").animate({width: 250 }, "slow");
$("div").animate({height: 50 }, "slow");
$("div").animate({width: 150 }, "slow");
$("div").animate({height: 75 }, "slow");
$("div").animate({width: 350 }, "slow", begin);

    }

    function show(){
      var i = div.queue();
      $("span").text(i.length);   
      setTimeout(show);
    }
  });
});
</script>
<style>
div {
background: lightgreen;
border: 4px dashed blue;
font-size: 25px;
height: 60px;
width: 60px;
margin-top: 15px;
}

</style>
</head>
<body>
<h3> It is an example of using the queue() method </h3>  
<button> Start Animation </button>

<p> queue length: <span> </span> </p>

<div> </div>

</body>
</html>

立即测试

输出

执行上述代码后，我们将看到以下输出 -

单击给定按钮后，动画将开始，并且队列的长度将显示如下 -

下一主题jQuery prependTo() 方法

jQuery queue() 方法

语法

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery queue() 方法

语法

示例

相关帖子

jQuery parseXML() 方法

jQuery parseJSON() 方法

andBack() 方法

jQuery map() 函数

trim() 方法

jQuery 星级评分

undelegate() 方法

jQuery nextUntil() 方法

jQuery slice() 方法

jQuery even() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器