Rumah > Artikel > hujung hadapan web > jQuery.queue()实例用法详解
该函数属于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类型用于替换当前队列内容的新队列。 |
callback | Function类型指定的函数,将会追加到队列中。该函数有一个函数参数,调用该参数可以移除并执行队列中的第一个函数。 |
queue()
函数的返回值是Array/jQuery类型,返回值的类型取决于当前queue()
函数执行的是获取操作还是设置操作。
如果queue()
函数执行的是设置操作(替换队列、追加函数),则返回当前jQuery对象本身;如果是获取操作,则返回获取到的函数队列(数组)。
如果当前jQuery对象匹配多个元素,读取数据时,queue()
函数只以其中第一个匹配的元素为准。
以下面这段HTML代码为例:
<span class="tag"><p</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"n1"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ccc;</span><span class="atv">"</span><span class="pln"> </span><span class="tag">></p></span><span class="pln"><br/></span><span class="tag"><p</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"n2"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ccc;</span><span class="atv">"</span><span class="pln"> </span><span class="tag">></p></span><span class="pln"><br/></span><span class="tag"><p</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"n3"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ccc;</span><span class="atv">"</span><span class="pln"> </span><span class="tag">></p></span>
我们编写如下jQuery代码:
<span class="kwd">var</span><span class="pln"> $ps </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"p"</span><span class="pun">);</span><span class="pln"><br/><br/></span><span class="com">// 为每个p元素上的队列"q"设置(替换成)新的队列</span><span class="pln"><br/></span><span class="com">// (由于之前没有队列"q",这相当于新增一个对垒"q")</span><span class="pln"><br/>$ps</span><span class="pun">.</span><span class="pln">queue</span><span class="pun">(</span><span class="str">"q"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="pln"><br/> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">next</span><span class="pun">){</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"队列函数1"</span><span class="pun">);</span><span class="pln"> </span><span class="com">/* next(); 调用该函数可以移除并执行当前队列中的第一个函数 */</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">,</span><span class="pln"><br/> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">next</span><span class="pun">){</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"队列函数2"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">,</span><span class="pln"><br/> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">next</span><span class="pun">){</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"队列函数3"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"><br/></span><span class="pun">]);</span><span class="pln"><br/><br/></span><span class="kwd">var</span><span class="pln"> queue </span><span class="pun">=</span><span class="pln"> $ps</span><span class="pun">.</span><span class="pln">queue</span><span class="pun">(</span><span class="str">"q"</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 获取第一个p元素的队列"q"</span><span class="pln"><br/></span><span class="kwd">var</span><span class="pln"> queue1 </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#n1"</span><span class="pun">).</span><span class="pln">queue</span><span class="pun">(</span><span class="str">"q"</span><span class="pun">);</span><span class="pln"><br/></span><span class="kwd">var</span><span class="pln"> queue2 </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#n2"</span><span class="pun">).</span><span class="pln">queue</span><span class="pun">(</span><span class="str">"q"</span><span class="pun">);</span><span class="pln"><br/></span><span class="kwd">var</span><span class="pln"> queue3 </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#n3"</span><span class="pun">).</span><span class="pln">queue</span><span class="pun">(</span><span class="str">"q"</span><span class="pun">);</span><span class="pln"><br/><a href="http://www.php.cn/code/658.html" target="_blank">document</a></span><span class="pun">.</span><span class="pln">writeln</span><span class="pun">(</span><span class="pln"> queue </span><span class="pun">===</span><span class="pln"> queue1 </span><span class="pun">);</span><span class="pln"> </span><span class="com">// true</span><span class="pln"><br/>document</span><span class="pun">.</span><span class="pln">writeln</span><span class="pun">(</span><span class="pln"> queue </span><span class="pun">===</span><span class="pln"> queue2 </span><span class="pun">);</span><span class="pln"> </span><span class="com">// false</span><span class="pln"><br/>document</span><span class="pun">.</span><span class="pln">writeln</span><span class="pun">(</span><span class="pln"> queue </span><span class="pun">===</span><span class="pln"> queue3 </span><span class="pun">);</span><span class="pln"> </span><span class="com">// false</span><span class="pln"><br/><br/>document</span><span class="pun">.</span><span class="pln">writeln</span><span class="pun">(</span><span class="pln"> queue</span><span class="pun">.</span><span class="pln">length </span><span class="pun">);</span><span class="pln"> </span><span class="com">// 3</span><span class="pln"><br/><br/></span><span class="com">// 为n1的队列"q"的末尾添加一个处理函数</span><span class="pln"><br/>$</span><span class="pun">(</span><span class="str">"#n1"</span><span class="pun">).</span><span class="pln">queue</span><span class="pun">(</span><span class="str">"q"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"><br/> </span><span class="com">// 这里的this表示当前DOM元素(n1)</span><span class="pln"><br/> alert</span><span class="pun">(</span><span class="str">"队列函数4"</span><span class="pun">);</span><span class="pln"> <br/></span><span class="pun">});</span><span class="pln"><br/><br/>document</span><span class="pun">.</span><span class="pln">writeln</span><span class="pun">(</span><span class="pln"> queue</span><span class="pun">.</span><span class="pln">length </span><span class="pun">);</span><span class="pln"> </span><span class="com">// 4</span><span class="pln"><br/><br/></span><span class="com">// 使用dequeue()可以移除并执行队列中的第一个函数</span><span class="pln"><br/>$</span><span class="pun">(</span><span class="str">"#n1"</span><span class="pun">).</span><span class="pln">dequeue</span><span class="pun">(</span><span class="str">"q"</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 弹出对话框:"队列函数1"</span>
我们也可以不指定queueName
参数,该参数的默认值为"fx",表示jQuery默认的效果队列。
<span class="kwd">var</span><span class="pln"> $ps </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"p"</span><span class="pun">);</span><span class="pln"><br/><br/></span><span class="com">// 为每个p元素设置两个自定义动画</span><span class="pln"><br/>$ps</span><span class="pun">.</span><span class="pln">animate</span><span class="pun">(</span><span class="pln"> </span><span class="pun">{</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">400</span><span class="pun">,</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200</span><span class="pun">},</span><span class="pln"> </span><span class="lit">1000</span><span class="pln"> </span><span class="pun">)</span><span class="pln"><br/></span><span class="pun">.</span><span class="pln">animate</span><span class="pun">(</span><span class="pln"> </span><span class="pun">{</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200</span><span class="pun">,</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="lit">1000</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br/><br/></span><span class="kwd">var</span><span class="pln"> fx </span><span class="pun">=</span><span class="pln"> $ps</span><span class="pun">.</span><span class="pln">queue</span><span class="pun">();</span><span class="pln"> </span><span class="com">// 相当于:var fx = $ps.queue("fx");</span><span class="pln"><br/>document</span><span class="pun">.</span><span class="pln">writeln</span><span class="pun">(</span><span class="pln"> fx</span><span class="pun">.</span><span class="pln">length </span><span class="pun">);</span><span class="pln"> </span><span class="com">// 2</span><span class="pln"><br/>document</span><span class="pun">.</span><span class="pln">writeln</span><span class="pun">(</span><span class="pln"> fx</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">'<br>'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// "inprogress"(第一个动画函数已被移除并开始执行,所以在队列开头添加该<a href="http://www.php.cn/wiki/57.html" target="_blank">字符串</a>来表示,如果执行完成,将开始移除并执行第二个动画函数)</span><span class="pln"><br/>document</span><span class="pun">.</span><span class="pln">writeln</span><span class="pun">(</span><span class="pln"> fx</span><span class="pun">[</span><span class="lit">1</span><span class="pun">]</span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="com">// 第二个动画的执行函数</span><span class="pln"><br/><br/></span><span class="com">// 用一个空的数组替换当前动画队列,即可清空动画队列</span><span class="pln"><br/></span><span class="com">// 此时第一个动画函数已经从队列中移除、正在执行</span><span class="pln"><br/></span><span class="com">// 因此第一个动画函数执行完毕后,就不会执行第二个动画函数(被清空了)</span><span class="pln"><br/>$ps</span><span class="pun">.</span><span class="pln">queue</span><span class="pun">(</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="pun">]</span><span class="pln"> </span><span class="pun">);</span>
Atas ialah kandungan terperinci jQuery.queue()实例用法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!