先跟大家介紹jquery data()函數
jQuery中data()函數用於向被選元素附加數據，或從被選元素取得數據。透過data()函數存取的數據都是臨時數據，一旦頁面刷新，先前存放的數據都將不復存在。
一、jquery data()的作用
data() 方法向被選元素附加數據，或從被選元素取得數據。
透過data()函數存取的數據都是臨時數據，一旦頁面刷新，先前存放的數據都將不復存在。
此函數屬於jQuery物件(實例)。如果需要移除透過data()函數存放的數據，請使用 removeData() 函數。
二、jquery data的使用方式
1、取得附加的data的值
$(selector).data(name)
參數說明
name：
可選。規定要取回的資料的名稱。
如果沒有規定名稱，則該方法將以物件的形式從元素中傳回所有儲存的資料。
2、用name和value為物件附加資料
$(selector).data(name,value)
參數說明
selector：為需要附加或取得資料的物件。
name：參數為資料的名稱。
value：參數為資料的值。
3、使用物件向元素附加資料
使用帶有名稱/值對的物件將資料新增至被選元素。
除了以提供 name 和 value 的方式進行賦值，我們還可以直接傳入另一個物件（ “another” ）作為參數。在這種情況下，「another」的屬性名稱和屬性值將被視為多個鍵值對，從中提取的 “name” 和 “value” 都會複製到目標物件的快取中。
$(selector).data(object)
參數說明
object：必需。規定包含名稱/值對的物件。
實例
<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()函數為目前元素設定了A、B、C這3段動畫，如果目前正在執行的動畫是A，則只會停止動畫A的執行，不會阻止動畫B和C的執行。當然，你也可以透過指定可選的選項參數來停止所有的動畫。
jQuery中stop()函數用於停止目前符合元素上正在執行的動畫。
停止動畫並不是恢復到該動畫執行前的狀況，而是直接停止，目前動畫執行到什麼狀態，就停留在什麼狀態。
例如：執行一個元素高度從100px到200px的過渡動畫，當高度為150px時停止了該動畫，則當前高度仍然保持150px的現狀。如果該動畫設定了執行完畢後的回呼函數，則不會執行該回呼函數。
一、jquery stop()語法
$(selector).stop(stopAll,goToEnd)
參數說明
1、stopAll
可選。代表是否要清空未執行完的動畫佇列。
意思是如果該參數值為true，則會停止所有後續動畫或事件。如果該參數值為false，則只停止被選取元素目前執行的動畫，後續動畫不受影響。因此，此參數一般都為false。
如果使用stop()方法，則會立即停止目前正在執行的動畫，如果接下來還有動畫等待執行，則以目前狀態開始接下來的動畫。
2、goToEnd
可選。代表是否直接將正在執行的動畫跳到目前動畫的末端。
規定是否允許完成目前動畫，該參數只能在設定了stopAll參數時使用
3、備註
預設情況下，不寫參數，則會被認為兩個參數都是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]);
//语法结构
$("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?</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方法继续执行！
