Jquery data()、Jquery stop()、jquery late() 関数を 1 つずつ紹介します (詳細)

まず、jquery data() 関数を紹介します

jQuery の data() 関数は、選択した要素にデータを追加したり、選択した要素からデータを取得したりするために使用されます。 data() 関数を通じてアクセスされるデータは一時的なデータであり、ページが更新されると、以前に保存されていたデータは存在しなくなります。

1. jquery data()の役割

data() メソッドは、選択した要素にデータを追加するか、選択した要素からデータを取得します。
data() 関数を通じてアクセスされるデータは一時的なデータであり、ページが更新されると、以前に保存されていたデータは存在しなくなります。
この関数は jQuery オブジェクト (インスタンス) に属します。 data() 関数を通じて保存されたデータを削除する必要がある場合は、removeData() 関数を使用してください。

2. jqueryデータの使い方

1. 添付データの値を取得します

$(セレクター).data(名前)

パラメータの説明

名前:

オプション。取得するデータの名前を指定します。

名前が指定されていない場合、このメソッドは要素から格納されているすべてのデータをオブジェクトとして返します。

2. 名前と値を使用してオブジェクトにデータを追加します

$(セレクター).data(名前,値)

パラメータの説明

セレクター: データを追加または取得する必要があるオブジェクト。
name: パラメータはデータの名前です。
value: パラメータはデータの値です。

3. オブジェクトを使用して要素にデータを追加します

名前と値のペアを持つオブジェクトを使用して、選択した要素にデータを追加します。
名前と値を指定して値を割り当てることに加えて、別のオブジェクト (「別の」) をパラメーターとして直接渡すこともできます。この場合、「another」の属性名と属性値は複数のキーと値のペアとして扱われ、そこから抽出された「名前」と「値」が対象オブジェクトのキャッシュにコピーされます。

$(セレクター).data(オブジェクト)

パラメータの説明

オブジェクト: 必須。名前と値のペアを含むオブジェクトを指定します。

例

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

ログイン後にコピー

それでは、jquery stop() 関数を紹介します

jQuery の stop() 関数は、現在一致している要素で実行中のアニメーションを停止するために使用されます。デフォルトでは、stop() 関数は現在実行中のアニメーションのみを停止します。 animate() 関数を使用して現在の要素に 3 つのアニメーション A、B、C を設定した場合、現在実行中のアニメーションが A の場合、アニメーション A の実行が停止されるだけで、アニメーション B の実行は妨げられません。そしてC.もちろん、オプションのオプション引数を指定してすべてのアニメーションを停止することもできます。
jQuery の stop() 関数は、現在一致している要素で実行中のアニメーションを停止するために使用されます。
アニメーションを停止しても、アニメーションが実行される前の状態は復元されませんが、アニメーションは現在の状態のままになります。
たとえば、要素の高さが 100px から 200px になる遷移アニメーションを実行し、高さが 150px になったときにアニメーションを停止すると、現在の高さは 150px のままになります。アニメーションの実行後にコールバック関数が設定されている場合、コールバック関数は実行されません。

1. jquery stop() 構文

$(セレクター).stop(stopAll,goToEnd)

パラメータの説明

1.すべてを停止します

オプション。未完了のアニメーションキューをクリアするかどうかを表します。
これは、パラメーター値が true の場合、後続のすべてのアニメーションまたはイベントが停止されることを意味します。パラメータ値が false の場合、選択した要素によって現在実行されているアニメーションのみが停止され、後続のアニメーションには影響しません。したがって、このパラメータは通常 false です。
stop() メソッドを使用すると、現在実行中のアニメーションがすぐに停止され、実行を待機している別のアニメーションがある場合は、現在の状態で次のアニメーションが開始されます。

2. 終了に移動

オプション。現在実行中のアニメーションを現在のアニメーションの最後に直接ジャンプするかどうかを示します。
現在のアニメーションの完了を許可するかどうかを指定します。このパラメーターは、stopAll パラメーターが設定されている場合にのみ使用できます
。

3. 備考

デフォルトでは、パラメーターが書き込まれない場合、両方のパラメーターは false とみなされます。

2. jquery stop() の例

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>

ログイン後にコピー

实例说明

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方法继续执行！