Heim >Web-Frontend >js-Tutorial >Führen Sie die Funktionen JQuery Data (), JQuery Stop () und JQuery Delay () nacheinander ein (Details) _jquery

Führen Sie die Funktionen JQuery Data (), JQuery Stop () und JQuery Delay () nacheinander ein (Details) _jquery

WBOYOriginal: 2016-05-16 15:33:561341Durchsuche

Lassen Sie mich zunächst die Funktion jquery data() vorstellen

Die Funktion data() in jQuery wird verwendet, um Daten an ausgewählte Elemente anzuhängen oder Daten von ausgewählten Elementen abzurufen. Bei den Daten, auf die über die Funktion data() zugegriffen wird, handelt es sich um temporäre Daten. Sobald die Seite aktualisiert wird, sind die zuvor gespeicherten Daten nicht mehr vorhanden.

1. Die Rolle von jquery data()

Die Methode data() hängt Daten an das ausgewählte Element an oder ruft Daten vom ausgewählten Element ab.
Bei den Daten, auf die über die Funktion data() zugegriffen wird, handelt es sich um temporäre Daten. Sobald die Seite aktualisiert wird, sind die zuvor gespeicherten Daten nicht mehr vorhanden.
Diese Funktion gehört zu einem jQuery-Objekt (Instanz). Wenn Sie die über die Funktion data() gespeicherten Daten entfernen müssen, verwenden Sie bitte die Funktion „removeData()“.

2. So verwenden Sie JQuery-Daten

1. Ermitteln Sie den Wert der angehängten Daten

$(selector).data(name)

Parameterbeschreibung

Name:

Optional. Gibt den Namen der abzurufenden Daten an.

Wenn kein Name angegeben wird, gibt diese Methode alle gespeicherten Daten des Elements als Objekt zurück.

2. Verwenden Sie Name und Wert, um Daten an das Objekt anzuhängen

$(selector).data(name,value)

Parameterbeschreibung

Selektor: ein Objekt, das Daten anhängen oder abrufen muss.
name: Der Parameter ist der Name der Daten.
Wert: Der Parameter ist der Wert der Daten.

3. Verwenden Sie Objekte, um Daten an Elemente anzuhängen

Fügen Sie Daten zum ausgewählten Element hinzu, indem Sie ein Objekt mit Name/Wert-Paaren verwenden.
Zusätzlich zur Zuweisung von Werten durch Angabe von Namen und Werten können wir auch direkt ein anderes Objekt („ein anderes“) als Parameter übergeben. In diesem Fall werden der Attributname und der Attributwert von „anderem“ als mehrere Schlüssel-Wert-Paare behandelt und der daraus extrahierte „Name“ und „Wert“ in den Cache des Zielobjekts kopiert.

$(selector).data(object)

Parameterbeschreibung

Objekt: erforderlich. Gibt ein Objekt an, das Name/Wert-Paare enthält.

Beispiel

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

Dann stelle ich Ihnen die Funktion jquery stop() vor

Die Funktion stop() in jQuery wird verwendet, um die Animation zu stoppen, die auf dem aktuell übereinstimmenden Element ausgeführt wird. Standardmäßig stoppt die Funktion stop() nur die aktuell laufende Animation. Wenn Sie die Funktion animate() verwenden, um drei Animationen A, B und C für das aktuelle Element festzulegen und die aktuell ausgeführte Animation A ist, wird nur die Ausführung von Animation A gestoppt und die Ausführung von Animationen B nicht verhindert und C. Natürlich können Sie auch alle Animationen stoppen, indem Sie optionale Optionsargumente angeben.
Die Funktion stop() in jQuery wird verwendet, um die Animation zu stoppen, die auf dem aktuell übereinstimmenden Element ausgeführt wird.
Durch das Stoppen der Animation wird nicht der Zustand vor der Ausführung der Animation wiederhergestellt, sondern die Animation bleibt in dem Zustand, in dem sie sich gerade befindet.
Beispiel: Führen Sie eine Übergangsanimation einer Elementhöhe von 100 Pixel auf 200 Pixel durch und stoppen Sie die Animation, wenn die Höhe 150 Pixel beträgt. Dann bleibt die aktuelle Höhe weiterhin bei 150 Pixel. Wenn die Animation nach der Ausführung eine Rückruffunktion festlegt, wird die Rückruffunktion nicht ausgeführt.

1. jquery stop()-Syntax

$(selector).stop(stopAll,goToEnd)

Parameterbeschreibung

1. Alles stoppen

Optional. Stellt dar, ob die unvollendete Animationswarteschlange gelöscht werden soll.
Das heißt, wenn der Parameterwert wahr ist, werden alle nachfolgenden Animationen oder Ereignisse gestoppt. Wenn der Parameterwert „false“ ist, wird nur die aktuell vom ausgewählten Element ausgeführte Animation gestoppt und nachfolgende Animationen werden nicht beeinflusst. Daher ist dieser Parameter im Allgemeinen falsch.
Wenn Sie die Methode stop() verwenden, wird die aktuell laufende Animation sofort gestoppt. Wenn eine andere Animation auf die Ausführung wartet, startet die nächste Animation mit dem aktuellen Status.

2. goToEnd

Optional. Gibt an, ob die aktuell ausgeführte Animation direkt an das Ende der aktuellen Animation gesprungen werden soll.
Gibt an, ob die aktuelle Animation abgeschlossen werden darf. Dieser Parameter kann nur verwendet werden, wenn der stopAll-Parameter festgelegt ist

3. Bemerkungen

Wenn keine Parameter geschrieben werden, werden standardmäßig beide Parameter als falsch betrachtet.

2. jquery stop() Beispiel

HTML-Codebeispiel

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

实例说明

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>

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

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

三、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();}); 
});

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

又如

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was sind die neuen Methoden von ECMA5-Arrays und forEach()-Imitations-Javascript-Fähigkeiten?Nächster Artikel：Was sind die neuen Methoden von ECMA5-Arrays und forEach()-Imitations-Javascript-Fähigkeiten?

In Verbindung stehende Artikel

Mehr sehen