Memperkenalkan data Jquery(), Jquery stop(), jquery delay() berfungsi satu persatu (detail)

Pertama, izinkan saya memperkenalkan fungsi jquery data()

Fungsi data() dalam jQuery digunakan untuk menambahkan data pada elemen terpilih atau mendapatkan data daripada elemen terpilih. Data yang diakses melalui fungsi data() adalah data sementara Setelah halaman dimuat semula, data yang disimpan sebelum ini tidak akan wujud lagi.

1. Peranan data jquery()

Kaedah data() menambahkan data pada elemen yang dipilih atau memperoleh data daripada elemen yang dipilih.
Data yang diakses melalui fungsi data() adalah data sementara Setelah halaman dimuat semula, data yang disimpan sebelum ini tidak akan wujud lagi.
Fungsi ini tergolong dalam objek jQuery (contoh). Jika anda perlu mengalih keluar data yang disimpan melalui fungsi data(), sila gunakan fungsi removeData().

2. Cara menggunakan data jquery

1. Dapatkan nilai data yang dilampirkan

$(selector).data(nama)

Perihalan parameter

nama:

Pilihan. Menentukan nama data yang akan diambil.

Jika tiada nama dinyatakan, kaedah ini akan mengembalikan semua data yang disimpan daripada elemen sebagai objek.

2. Gunakan nama dan nilai untuk menambahkan data pada objek

$(selector).data(nama,nilai)

Perihalan parameter

pemilih: objek yang perlu menambah atau mendapatkan data.
nama: Parameter ialah nama data.
nilai: Parameter ialah nilai data.

3. Gunakan objek untuk menambahkan data pada elemen

Tambah data pada elemen yang dipilih menggunakan objek dengan pasangan nama/nilai.
Selain memberikan nilai dengan memberikan nama dan nilai, kita juga boleh terus memasukkan objek lain ("lain") sebagai parameter. Dalam kes ini, nama atribut dan nilai atribut "lain" akan dianggap sebagai pasangan nilai kunci berbilang dan "nama" dan "nilai" yang diekstrak daripadanya akan disalin ke cache objek sasaran.

$(selector).data(objek)

Perihalan parameter

objek: diperlukan. Menentukan objek yang mengandungi pasangan nama/nilai.

Contoh

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

Salin selepas log masuk

Kemudian saya akan memperkenalkan kepada anda fungsi jquery stop()

Fungsi stop() dalam jQuery digunakan untuk menghentikan animasi berjalan pada elemen yang dipadankan pada masa ini. Secara lalai, fungsi stop() hanya menghentikan animasi yang sedang berjalan. Jika anda menggunakan fungsi animate() untuk menetapkan tiga animasi A, B dan C untuk elemen semasa, jika animasi yang sedang dilaksanakan ialah A, ia hanya akan menghentikan pelaksanaan animasi A dan tidak akan menghalang pelaksanaan animasi B dan C. Sudah tentu, anda juga boleh menghentikan semua animasi dengan menentukan hujah pilihan pilihan.
Fungsi stop() dalam jQuery digunakan untuk menghentikan animasi berjalan pada elemen yang dipadankan pada masa ini.
Menghentikan animasi tidak memulihkan keadaan sebelum animasi dilaksanakan, tetapi menghentikannya secara langsung Animasi akan kekal dalam keadaan apa pun ia berada pada masa ini.
Contohnya: lakukan animasi peralihan ketinggian elemen daripada 100px kepada 200px dan hentikan animasi apabila ketinggiannya ialah 150px, maka ketinggian semasa masih kekal pada 150px. Jika animasi menetapkan fungsi panggil balik selepas pelaksanaan, fungsi panggil balik tidak akan dilaksanakan.

1. sintaks jquery stop()

$(selector).stop(stopAll,goToEnd)

Perihalan parameter

1. hentikanSemua

Pilihan. Mewakili sama ada hendak mengosongkan baris gilir animasi yang belum selesai.
Ini bermakna jika nilai parameter adalah benar, semua animasi atau peristiwa seterusnya akan dihentikan. Jika nilai parameter palsu, hanya animasi yang sedang dilaksanakan oleh elemen yang dipilih akan dihentikan dan animasi seterusnya tidak akan terjejas. Oleh itu, parameter ini biasanya palsu.
Jika anda menggunakan kaedah stop(), animasi yang sedang berjalan akan dihentikan serta-merta. Jika ada animasi lain menunggu untuk dilaksanakan, animasi seterusnya akan bermula dengan keadaan semasa.

2. goToEnd

Pilihan. Menunjukkan sama ada untuk melompat animasi yang sedang dilaksanakan terus ke penghujung animasi semasa.
Menentukan sama ada untuk membenarkan animasi semasa dilengkapkan Parameter ini hanya boleh digunakan apabila parameter stopAll ditetapkan

3. Catatan

Secara lalai, jika tiada parameter ditulis, kedua-dua parameter akan dianggap palsu.

2. contoh jquery stop()

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

Salin selepas log masuk

实例说明

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>

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

又如

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

Salin selepas log masuk

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