逐一介紹Jquery data()、Jquery stop()、jquery delay()函數(shù)(詳)
首先給大家介紹jquery data()函數(shù)
jQuery中data()函數(shù)用于向被選元素附加數(shù)據(jù)，或者從被選元素獲取數(shù)據(jù)。通過data()函數(shù)存取的數(shù)據(jù)都是臨時數(shù)據(jù)，一旦頁面刷新，之前存放的數(shù)據(jù)都將不復(fù)存在。
一、jquery data()的作用
data() 方法向被選元素附加數(shù)據(jù)，或者從被選元素獲取數(shù)據(jù)。
通過data()函數(shù)存取的數(shù)據(jù)都是臨時數(shù)據(jù)，一旦頁面刷新，之前存放的數(shù)據(jù)都將不復(fù)存在。
該函數(shù)屬于jQuery對象(實例)。如果需要移除通過data()函數(shù)存放的數(shù)據(jù)，請使用 removeData() 函數(shù)。
二、jquery data的使用方式
1、獲取附加的data的值
$(selector).data(name)
參數(shù)說明
name：
可選。規(guī)定要取回的數(shù)據(jù)的名稱。
如果沒有規(guī)定名稱，則該方法將以對象的形式從元素中返回所有存儲的數(shù)據(jù)。
2、用name和value為對象附加數(shù)據(jù)
$(selector).data(name,value)
參數(shù)說明
selector：為需要附加或者獲取數(shù)據(jù)的對象。
name：參數(shù)為數(shù)據(jù)的名稱。
value：參數(shù)為數(shù)據(jù)的值。
3、使用對象向元素附加數(shù)據(jù)
使用帶有名稱/值對的對象向被選元素添加數(shù)據(jù)。
除了以提供 name 和 value 的方式進(jìn)行賦值，我們還可以直接傳入另一個對象（ “another” ）作為參數(shù)。這種情況下，“another” 的屬性名稱和屬性值將被視為多個鍵值對，從中提取的 “name” 和 “value” 都會被復(fù)制到目標(biāo)對象的緩存中。
$(selector).data(object)
參數(shù)說明
object：必需。規(guī)定包含名稱/值對的對象。
實例
<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">把數(shù)據(jù)添加到 div 元素</button><br />
<button id="btn2">獲取已添加到 div 元素的數(shù)據(jù)</button>
<div></div>
</body>
</html>
接著給大家介紹jquery stop()函數(shù)
jQuery中stop()函數(shù)用于停止當(dāng)前匹配元素上正在運行的動畫。默認(rèn)情況下，stop()函數(shù)只會停止當(dāng)前正在運行的動畫。如果你使用animate()函數(shù)為當(dāng)前元素設(shè)置了A、B、C這3段動畫，如果當(dāng)前正在執(zhí)行的動畫是A，則只會停止動畫A的執(zhí)行，不會阻止動畫B和C的執(zhí)行。當(dāng)然，你也可以通過指定可選的選項參數(shù)來停止所有的動畫。
jQuery中stop()函數(shù)用于停止當(dāng)前匹配元素上正在運行的動畫。
停止動畫并不是恢復(fù)到該動畫執(zhí)行前的狀況，而是直接停止，當(dāng)前動畫執(zhí)行到什么狀態(tài)，就停留在什么狀態(tài)。
例如：執(zhí)行一個元素高度從100px到200px的過渡動畫，當(dāng)高度為150px時停止了該動畫，則當(dāng)前高度仍然保持150px的現(xiàn)狀。如果該動畫設(shè)置了執(zhí)行完畢后的回調(diào)函數(shù)，則不會執(zhí)行該回調(diào)函數(shù)。
一、jquery stop()語法
$(selector).stop(stopAll,goToEnd)
參數(shù)說明
1、stopAll
可選。代表是否要清空未執(zhí)行完的動畫隊列。
意思就是如果該參數(shù)值為true，則會停止所有后續(xù)動畫或事件。如果該參數(shù)值為false，則只停止被選元素當(dāng)前執(zhí)行的動畫，后續(xù)動畫不受影響。因此，該參數(shù)一般都為false。
如果使用stop()方法，則會立即停止當(dāng)前正在運行的動畫，如果接下來還有動畫等待執(zhí)行，則以當(dāng)前狀態(tài)開始接下來的動畫。
2、goToEnd
可選。代表是否直接將正在執(zhí)行的動畫跳轉(zhuǎn)到當(dāng)前動畫的末尾。
規(guī)定是否允許完成當(dāng)前動畫，該參數(shù)只能在設(shè)置了stopAll參數(shù)時使用
3、備注
默認(rèn)情況下，不寫參數(shù)，則會被認(rèn)為兩個參數(shù)都是false。
二、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]);
//語法結(jié)構(gòu)
$("button:eq(1)").click(function(){
$("#panel").stop();//停止當(dāng)前動畫，繼續(xù)下一個動畫
});
$("button:eq(2)").click(function(){
$("#panel").stop(true);//清除元素的所有動畫
});
$("button:eq(3)").click(function(){
$("#panel").stop(false, true);//讓當(dāng)前動畫直接到達(dá)末狀態(tài) ，繼續(xù)下一個動畫
});
$("button:eq(4)").click(function(){
$("#panel").stop(true, true);//清除元素的所有動畫，讓當(dāng)前動畫直接到達(dá)末狀態(tài)
});
})
</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?</h5>
<div class="content">
jQuery。
</div>
</div>
</body>
</html>
實例說明
1、點擊按鈕（stop()），由于兩個參數(shù)都是false。所以點擊發(fā)生時，animater沒有跳到當(dāng)前動畫（動畫1）的最終效果，而直接進(jìn)入動畫2，然后動畫3，4，5.直至完成整個動畫。
2、點擊按鈕（stop(true)），由于第一個是true，第二個是false，所以animater立刻全部停止了，動畫不動了。
3、點擊按鈕（stop(false,true)），由于第一個是false，第二個是true，所以點擊發(fā)生時，animater身處的當(dāng)前動畫（動畫1）停止并且animater直接跳到當(dāng)前動畫（動畫1）的最終末尾效果位置，接著正常執(zhí)行下面的動畫（動畫2，3，4，5），直至完成整個動畫。
3、點擊按鈕（stop(true，true)），由于兩個都是true，所以點擊發(fā)生時，animater跳到當(dāng)前動畫（動畫1）的最終末尾效果位置，然后，全部動畫停止。
三、jquery stop()在工作中的應(yīng)用
一個下拉菜單，當(dāng)鼠標(biāo)移上去的時候就菜單顯示，當(dāng)鼠標(biāo)離開的時候菜單隱藏 ，如果我快速不斷地將鼠標(biāo)移入移出菜單（即，當(dāng)菜單下拉動畫未完成時，鼠標(biāo)又移出了菜單）就會產(chǎn)生“動畫積累"，當(dāng)鼠標(biāo)停止移動后，積累的動畫還會持續(xù)執(zhí)行，直到動畫序列執(zhí)行完畢。
解決方法
在寫動畫效果的代碼前加入stop(true，true)，這樣每次快速的移入移出菜單，就正常了，當(dāng)移入一個菜單的時候，停止所有加入隊列的動畫，完成當(dāng)前的動畫（跳至當(dāng)前動畫的最終效果位置）。
最后給大家介紹jquery delay()
jquery中delay()方法的功能是設(shè)置一個延時值來推遲動畫效果的執(zhí)行，它的調(diào)用格式為：$(selector).delay(duration)其中參數(shù)duration為延時值，它的單位是毫秒，當(dāng)超過延時值時，動畫繼續(xù)執(zhí) ，delay與setTimeout函數(shù)還是有區(qū)別的，delay是更適合某些使用情況。
可以將隊列中等待執(zhí)行的下一個動畫延遲指定的時間后才執(zhí)行。它常用在隊列中的兩個jQuery效果函數(shù)之間，從而在上一個動畫效果執(zhí)行后延遲下一個動畫效果的執(zhí)行時間。
一、語法
$(selector).delay(speed,queueName)
1、參數(shù)說明
2、備注
延時時間（duration參數(shù)）是以毫秒為單位的，數(shù)值越大，動畫越慢，不是越快。
字符串 '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="執(zhí)行動畫" >
</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()在被調(diào)用時就立即執(zhí)行了(此時slideUp的動畫效果尚未執(zhí)行結(jié)束)
以下代碼的執(zhí)行順序時：
1、slideUp()被加入隊列、開始執(zhí)行，
2、show()也開始執(zhí)行，它立即執(zhí)行完畢，此時slideUp()的動畫尚未執(zhí)行結(jié)束
3、延遲2秒
4、執(zhí)行SlideDown()
*/
$myDiv.slideUp( "slow" )
.delay( 2000 )
.show( ) // 它不是一個效果動畫
.slideDown( );
}else if(v == "4"){
$myDiv.show()
.delay( 2000 )
// 在現(xiàn)有高度的基礎(chǔ)上增加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、如果下一項是動畫效果，則會執(zhí)行延遲調(diào)用
3、如果不是效果動畫，則它不會被加入效果隊列中，因此該函數(shù)不會對它進(jìn)行延遲調(diào)用。
4、如果要將不是動畫效果加入延遲，則需要將它加入到queue隊列中去。
例如
$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide();})
.delay(1500)
.show(1);
//.queue(function(){$(this).show();});
});
備注：上面方法只隱藏，不會再顯示，queue執(zhí)行完后，也中止了動畫隊列的繼續(xù)執(zhí)行，需要調(diào)用dequeue使其執(zhí)行下去
又如
$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide().dequeue();})
.delay(1500)
.show();
//.show(1);
});
備注：上面方法也是只隱藏，而不會再顯示！這里show不再指定顯示動畫時長，則show方法不再是一個動畫。由此可知，dequeue只能使得動畫隊列中的后續(xù)方法執(zhí)行下去，不能使非動畫隊列中的jquery方法繼續(xù)執(zhí)行！
相關(guān)文章
DIY jquery plugin - tabs標(biāo)簽切換實現(xiàn)代碼
接觸jquery 2,3個月了，一直都未動手寫過插件。正好最近比較閑，就打算把一直看不順眼的項目中現(xiàn)有的tab改造一番（現(xiàn)有的tab未能做成一個控件，copy,past的代碼太多）。2010-12-12
鼠標(biāo)移到導(dǎo)航當(dāng)前位置的LI變色處于選中狀態(tài)
本文所要實現(xiàn)的效果廣泛應(yīng)用于當(dāng)前導(dǎo)航,主要表現(xiàn)為鼠標(biāo)移到導(dǎo)航上面當(dāng)前的LI變色，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要介紹了jQuery中change事件用法,以實例形式分析了在匹配元素焦點變化時觸發(fā)事件使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
詳談jQuery.load()和Jsp的include的區(qū)別
下面小編就為大家?guī)硪黄斦刯Query.load()和Jsp的include的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui菜單組件Menu的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jquery 簡短 右鍵菜單 兼容ie6 ie7 ie8 firefox chrome2010-01-01
下面小編就為大家?guī)硪黄狫Query在循環(huán)中綁定事件的問題詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)
本篇文章主要介紹了jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了jQuery操作DOM之獲取表單控件的值,實例分析了jQuery獲取表單控件值的方法,需要的朋友可以參考下2015-01-01
jQuery Ajax方法調(diào)用 Asp.Net WebService 的詳細(xì)實例代碼
我在這里將jQuery Ajax 調(diào)用Aspx.Net WebService 的幾個常用的方法做了一個整理，提供給正在找這方面內(nèi)容的博友，希望能給學(xué)習(xí)jQuery的朋友一點幫助，可以直接復(fù)制代碼運行。2011-04-04