Explication détaillée de l'utilisation de l'instance jQuery.queue()

La fonction

queue() est utilisée pour obtenir ou définir la fonction file d'attente à exécuter sur l'élément correspondant actuel.

Si l'objet jQuery actuel correspond à plusieurs éléments : Lors de l'obtention de la file d'attente , obtenez uniquement la file d'attente sur le premier élément correspondant Définissez le  ; file d'attente (file d'attente de remplacement, fonction d'ajout), chaque élément correspondant de est défini séparément.

Cette fonction appartient à l'objet jQuery (instance). Si vous devez supprimer et exécuter la première fonction de la file d'attente, utilisez la fonction dequeue(). Vous pouvez également utiliser la fonction clearQueue() pour effacer la file d'attente spécifiée.

Syntaxe

jQuery 1.2 Ajout de cette fonction. La fonction queue() a les deux utilisations suivantes :

Utilisation 1 :

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

Si aucun paramètre n'est spécifié ou si seul le paramètre queueName est spécifié, cela signifie Obtenir la file d'attente de fonctions avec le nom spécifié. Si le paramètre newQueue est spécifié, cela signifie utiliser la nouvelle file d'attente newQueue pour définir (remplacer) tout le contenu de la file d'attente actuelle.

Utilisation 2 :

jQueryObject.queue( [ queueName ,] callback )

Ajouter la fonction spécifiée à la file d'attente spécifiée (fin).

Remarque : Toutes les opérations de configuration de la fonction queue() sont pour chaque élément correspondant à l'objet jQuery actuel ; toutes les opérations de lecture concernent uniquement le premier éléments correspondants. Paramètre

Veuillez trouver le paramètre correspondant en fonction du

nom du paramètre

défini dans la section de syntaxe précédente.

Paramètre

Description

queueName

Facultatif/Type de chaîne Le nom de la file d'attente spécifié, la valeur par défaut est "fx" (représentant la file d'attente des effets d'animation standard dans jQuery).

newQueue

参数	描述
queueName	可选/String类型指定的队列名称，默认为"fx"(表示jQuery中的标准动画效果队列)。
newQueue	可选/Array类型用于替换当前队列内容的新队列。
callback	Function类型指定的函数，将会追加到队列中。该函数有一个函数参数，调用该参数可以移除并执行队列中的第一个函数。

Facultatif/Type de tableau

Une nouvelle file d'attente utilisée pour remplacer le contenu de la file d'attente actuelle.

rappel

La fonction spécifiée par Type de fonction

sera ajoutée à la file d'attente. Cette fonction a un paramètre de fonctionqueue() L'appel de ce paramètre peut supprimer et exécuter le premier élément de la file d'attente. . fonction.

Valeur de retourqueue()La valeur de retour de la fonction

est le

Array/jQuery typequeue(), le type de valeur de retour dépend du fait que la fonction

actuelle effectue une opération get ou une opération set.

queue()Si la fonction

effectue une opération de paramétrage (remplacement de la file d'attente, ajout d'une fonction), l'objet jQuery actuel lui-même est renvoyé s'il s'agit d'une opération de récupération, la file d'attente de fonctions obtenue (tableau) est renvoyée ; .

Si l'objet jQuery actuel correspond à plusieurs éléments, lors de la lecture des données, la fonction

utilise uniquement le premier élément correspondant.

<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>

Exemple & Description

Prenons comme exemple le code HTML suivant :

<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>

queueNameNous écrivons le code jQuery suivant :

<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">&#39;<br>&#39;</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>

Nous Vous n'avez pas non plus besoin de spécifier le paramètre . La valeur par défaut de ce paramètre est "fx", qui représente la file d'attente d'effets par défaut de jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!