Présentez les fonctions Jquery data(), Jquery stop(), jquery delay() une par une (détails)

Tout d'abord, permettez-moi de vous présenter la fonction jquery data()

La fonction data() dans jQuery est utilisée pour ajouter des données aux éléments sélectionnés ou obtenir des données à partir d'éléments sélectionnés. Les données accessibles via la fonction data() sont des données temporaires. Une fois la page actualisée, les données précédemment stockées n'existeront plus.

1. Le rôle des données jquery()

La méthode data() ajoute des données à l'élément sélectionné ou obtient des données de l'élément sélectionné.
Les données accessibles via la fonction data() sont des données temporaires. Une fois la page actualisée, les données précédemment stockées n'existeront plus.
Cette fonction appartient à un objet jQuery (instance). Si vous devez supprimer les données stockées via la fonction data(), veuillez utiliser la fonction removeData().

2. Comment utiliser les données jquery

1. Obtenez la valeur des données jointes

$(sélecteur).data(nom)

Description du paramètre

nom :

Facultatif. Spécifie le nom des données à récupérer.

Si aucun nom n'est spécifié, cette méthode renverra toutes les données stockées de l'élément en tant qu'objet.

2. Utilisez le nom et la valeur pour ajouter des données à l'objet

$(sélecteur).data(nom,valeur)

Description du paramètre

sélecteur : un objet qui doit ajouter ou obtenir des données.
name : Le paramètre est le nom de la donnée.
value : Le paramètre est la valeur des données.

3. Utilisez des objets pour ajouter des données aux éléments

Ajoutez des données à l'élément sélectionné à l'aide d'un objet avec des paires nom/valeur.
En plus d'attribuer des valeurs en fournissant un nom et une valeur, nous pouvons également transmettre directement un autre objet ("un autre") en tant que paramètre. Dans ce cas, le nom d'attribut et la valeur d'attribut de « un autre » seront traités comme plusieurs paires clé-valeur, et le « nom » et la « valeur » extraits d'eux seront copiés dans le cache de l'objet cible.

$(sélecteur).data(objet)

Description du paramètre

objet : obligatoire. Spécifie un objet contenant des paires nom/valeur.

Exemple

<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
 testObj=new Object();
 testObj.greetingMorn="Good Morning!";
 testObj.greetingEve="Good Evening!";
 $("#btn1").click(function(){
  $("div").data(testObj);
 });
 $("#btn2").click(function(){
  alert($("div").data("greetingEve"));
 });
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>

Copier après la connexion

Ensuite, je vais vous présenter la fonction jquery stop()

La fonction stop() dans jQuery est utilisée pour arrêter l'animation en cours d'exécution sur l'élément actuellement correspondant. Par défaut, la fonction stop() arrête uniquement l'animation en cours d'exécution. Si vous utilisez la fonction animate() pour définir trois animations A, B et C pour l'élément actuel, si l'animation en cours d'exécution est A, elle arrêtera uniquement l'exécution de l'animation A et n'empêchera pas l'exécution des animations B. et C. Bien entendu, vous pouvez également arrêter toutes les animations en spécifiant des arguments d'options facultatifs.
La fonction stop() dans jQuery est utilisée pour arrêter l'animation en cours d'exécution sur l'élément actuellement correspondant.
L'arrêt de l'animation ne restaure pas l'état avant l'exécution de l'animation, mais l'arrête directement, l'animation restera dans l'état dans lequel elle se trouve actuellement.
Par exemple : effectuez une animation de transition d'une hauteur d'élément de 100 px à 200 px, et arrêtez l'animation lorsque la hauteur est de 150 px, la hauteur actuelle restera alors toujours à 150 px. Si l'animation définit une fonction de rappel après l'exécution, la fonction de rappel ne sera pas exécutée.

1. Syntaxe jquery stop()

$(selector).stop(stopAll,goToEnd)

Description du paramètre

1. arrêterTout

Facultatif. Représente s’il faut effacer la file d’attente d’animation inachevée.
Cela signifie que si la valeur du paramètre est vraie, toutes les animations ou événements suivants seront arrêtés. Si la valeur du paramètre est fausse, seule l'animation actuellement exécutée par l'élément sélectionné sera arrêtée et les animations suivantes ne seront pas affectées. Ce paramètre est donc généralement faux.
Si vous utilisez la méthode stop(), l'animation en cours d'exécution sera immédiatement arrêtée. S'il y a une autre animation en attente d'exécution, l'animation suivante démarrera avec l'état actuel.

2. allerÀFin

Facultatif. Indique s’il faut sauter l’animation en cours d’exécution directement à la fin de l’animation en cours.
Spécifie s'il faut autoriser la réalisation de l'animation en cours. Ce paramètre ne peut être utilisé que lorsque le paramètre stopAll est défini
.

3. Remarques

Par défaut, si aucun paramètre n'est écrit, les deux paramètres seront considérés comme faux.

2. Exemple jquery stop()

Exemple de code HTML

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery stop()</title>
<script type="text/javascript">
$(function(){
  $("button:eq(0)").click(function(){
    $("#panel").animate({height:"150" }, 1000).animate({width:"300" },
      1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"},
      1000);
  });
  //stop([clearQueue][,gotoEnd]);
　　//语法结构
  $("button:eq(1)").click(function(){
    $("#panel").stop();//停止当前动画，继续下一个动画
  });
  $("button:eq(2)").click(function(){
    $("#panel").stop(true);//清除元素的所有动画
  });
  $("button:eq(3)").click(function(){
    $("#panel").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
  });
  $("button:eq(4)").click(function(){
    $("#panel").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态
  });
})
</script>
</head>
<body>
<button>开始一连串动画</button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<div id="panel">
  <h5 class="head">什么是jQuery&#63;</h5>
  <div class="content">
    jQuery。
  </div>
</div>
</body>
</html>

Copier après la connexion

实例说明

1、点击按钮（stop()），由于两个参数都是false。所以点击发生时，animater没有跳到当前动画（动画1）的最终效果，而直接进入动画2，然后动画3，4，5.直至完成整个动画。

2、点击按钮（stop(true)），由于第一个是true，第二个是false，所以animater立刻全部停止了，动画不动了。

3、点击按钮（stop(false,true)），由于第一个是false，第二个是true，所以点击发生时，animater身处的当前动画（动画1）停止并且animater直接跳到当前动画（动画1）的最终末尾效果位置，接着正常执行下面的动画（动画2，3，4，5），直至完成整个动画。

3、点击按钮（stop(true，true)），由于两个都是true，所以点击发生时，animater跳到当前动画（动画1）的最终末尾效果位置，然后，全部动画停止。

三、jquery stop()在工作中的应用

一个下拉菜单，当鼠标移上去的时候就菜单显示，当鼠标离开的时候菜单隐藏，如果我快速不断地将鼠标移入移出菜单（即，当菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累"，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。

解决方法

在写动画效果的代码前加入stop(true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，完成当前的动画（跳至当前动画的最终效果位置）。

最后给大家介绍jquery delay()

jquery中delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：$(selector).delay(duration)其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执，delay与setTimeout函数还是有区别的，delay是更适合某些使用情况。

可以将队列中等待执行的下一个动画延迟指定的时间后才执行。它常用在队列中的两个jQuery效果函数之间，从而在上一个动画效果执行后延迟下一个动画效果的执行时间。

一、语法

$(selector).delay(speed,queueName)

1、参数说明

2、备注

延时时间（duration参数）是以毫秒为单位的，数值越大，动画越慢，不是越快。
字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。

二、delay()实例

HTML

<p>动画效果：
  <select id="animation">
    <option value="1">动画1</option>
    <option value="2">动画2</option>
    <option value="3">动画3</option>
    <option value="4">动画4</option>
  </select>
  <input id="exec" type="button" value="执行动画" >
</p>
<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>
<script>
$("#exec").click( function(){
  var v = $("#animation").val();
  var $myDiv = $("#myDiv");
  if(v == "1"){
    $myDiv.slideUp( 1000 )
    .delay( "slow" )
    .fadeIn( 1500 );
  }else if(v == "2"){
    $myDiv.fadeOut( "slow" )
    .delay( 2000 )
    .slideDown( 1000 )
    .animate( { height: "+=300" } );
  }else if(v == "3"){
    /*
    注意：只有动画才会被加入效果队列中
    以下代码实际上只有slideUp()、slideDown()会加入效果队列
    delay()的延迟只对slideDown()起作用
    show()在被调用时就立即执行了(此时slideUp的动画效果尚未执行结束)
    以下代码的执行顺序时：
    1、slideUp()被加入队列、开始执行，
    2、show()也开始执行，它立即执行完毕，此时slideUp()的动画尚未执行结束
    3、延迟2秒
    4、执行SlideDown()
    */
    $myDiv.slideUp( "slow" )
    .delay( 2000 ) 
    .show( ) // 它不是一个效果动画
    .slideDown( );
  }else if(v == "4"){
    $myDiv.show()
    .delay( 2000 )
    // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
    .animate( { height: "+=300px" }, 2000 ) 
    .animate( { width: "50%" }, 1000 )   
    .animate( { width: "200px", height: "100px" }, 1000 );   
  }
} );
</script>

Copier après la connexion

实例二、让页面中的按钮在页面加载后500毫秒隐藏，然后再过1500毫秒显示出来

$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide().dequeue();}) 
.delay(1500) 
.queue(function(){$(this).show();}); 
});

Copier après la connexion

三、jquery中使用delay()注意事项

1、delay适用在jQuery动画效果和类似队列中
2、如果下一项是动画效果，则会执行延迟调用
3、如果不是效果动画，则它不会被加入效果队列中，因此该函数不会对它进行延迟调用。
4、如果要将不是动画效果加入延迟，则需要将它加入到queue队列中去。

例如

$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide();}) 
.delay(1500) 
.show(1); 
//.queue(function(){$(this).show();}); 
});

Copier après la connexion

备注：上面方法只隐藏，不会再显示，queue执行完后，也中止了动画队列的继续执行，需要调用dequeue使其执行下去

又如

$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide().dequeue();}) 
.delay(1500) 
.show(); 
//.show(1); 
});

Copier après la connexion

备注：上面方法也是只隐藏，而不会再显示！这里show不再指定显示动画时长，则show方法不再是一个动画。由此可知，dequeue只能使得动画队列中的后续方法执行下去，不能使非动画队列中的jquery方法继续执行！