逐一介紹Jquery data()、Jquery stop()、jquery delay()函數(shù)(詳)
首先給大家介紹jquery data()函數(shù)
jQuery中data()函數(shù)用于向被選元素附加數(shù)據(jù),或者從被選元素獲取數(shù)據(jù)。通過data()函數(shù)存取的數(shù)據(jù)都是臨時(shí)數(shù)據(jù),一旦頁面刷新,之前存放的數(shù)據(jù)都將不復(fù)存在。
一、jquery data()的作用
data() 方法向被選元素附加數(shù)據(jù),或者從被選元素獲取數(shù)據(jù)。
通過data()函數(shù)存取的數(shù)據(jù)都是臨時(shí)數(shù)據(jù),一旦頁面刷新,之前存放的數(shù)據(jù)都將不復(fù)存在。
該函數(shù)屬于jQuery對(duì)象(實(shí)例)。如果需要移除通過data()函數(shù)存放的數(shù)據(jù),請使用 removeData() 函數(shù)。
二、jquery data的使用方式
1、獲取附加的data的值
$(selector).data(name)
參數(shù)說明
name:
可選。規(guī)定要取回的數(shù)據(jù)的名稱。
如果沒有規(guī)定名稱,則該方法將以對(duì)象的形式從元素中返回所有存儲(chǔ)的數(shù)據(jù)。
2、用name和value為對(duì)象附加數(shù)據(jù)
$(selector).data(name,value)
參數(shù)說明
selector:為需要附加或者獲取數(shù)據(jù)的對(duì)象。
name:參數(shù)為數(shù)據(jù)的名稱。
value:參數(shù)為數(shù)據(jù)的值。
3、使用對(duì)象向元素附加數(shù)據(jù)
使用帶有名稱/值對(duì)的對(duì)象向被選元素添加數(shù)據(jù)。
除了以提供 name 和 value 的方式進(jìn)行賦值,我們還可以直接傳入另一個(gè)對(duì)象( “another” )作為參數(shù)。這種情況下,“another” 的屬性名稱和屬性值將被視為多個(gè)鍵值對(duì),從中提取的 “name” 和 “value” 都會(huì)被復(fù)制到目標(biāo)對(duì)象的緩存中。
$(selector).data(object)
參數(shù)說明
object:必需。規(guī)定包含名稱/值對(duì)的對(duì)象。
實(shí)例
<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)前匹配元素上正在運(yùn)行的動(dòng)畫。默認(rèn)情況下,stop()函數(shù)只會(huì)停止當(dāng)前正在運(yùn)行的動(dòng)畫。如果你使用animate()函數(shù)為當(dāng)前元素設(shè)置了A、B、C這3段動(dòng)畫,如果當(dāng)前正在執(zhí)行的動(dòng)畫是A,則只會(huì)停止動(dòng)畫A的執(zhí)行,不會(huì)阻止動(dòng)畫B和C的執(zhí)行。當(dāng)然,你也可以通過指定可選的選項(xiàng)參數(shù)來停止所有的動(dòng)畫。
jQuery中stop()函數(shù)用于停止當(dāng)前匹配元素上正在運(yùn)行的動(dòng)畫。
停止動(dòng)畫并不是恢復(fù)到該動(dòng)畫執(zhí)行前的狀況,而是直接停止,當(dāng)前動(dòng)畫執(zhí)行到什么狀態(tài),就停留在什么狀態(tài)。
例如:執(zhí)行一個(gè)元素高度從100px到200px的過渡動(dòng)畫,當(dāng)高度為150px時(shí)停止了該動(dòng)畫,則當(dāng)前高度仍然保持150px的現(xiàn)狀。如果該動(dòng)畫設(shè)置了執(zhí)行完畢后的回調(diào)函數(shù),則不會(huì)執(zhí)行該回調(diào)函數(shù)。
一、jquery stop()語法
$(selector).stop(stopAll,goToEnd)
參數(shù)說明
1、stopAll
可選。代表是否要清空未執(zhí)行完的動(dòng)畫隊(duì)列。
意思就是如果該參數(shù)值為true,則會(huì)停止所有后續(xù)動(dòng)畫或事件。如果該參數(shù)值為false,則只停止被選元素當(dāng)前執(zhí)行的動(dòng)畫,后續(xù)動(dòng)畫不受影響。因此,該參數(shù)一般都為false。
如果使用stop()方法,則會(huì)立即停止當(dāng)前正在運(yùn)行的動(dòng)畫,如果接下來還有動(dòng)畫等待執(zhí)行,則以當(dāng)前狀態(tài)開始接下來的動(dòng)畫。
2、goToEnd
可選。代表是否直接將正在執(zhí)行的動(dòng)畫跳轉(zhuǎn)到當(dāng)前動(dòng)畫的末尾。
規(guī)定是否允許完成當(dāng)前動(dòng)畫,該參數(shù)只能在設(shè)置了stopAll參數(shù)時(shí)使用
3、備注
默認(rèn)情況下,不寫參數(shù),則會(huì)被認(rèn)為兩個(gè)參數(shù)都是false。
二、jquery stop()實(shí)例
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)前動(dòng)畫,繼續(xù)下一個(gè)動(dòng)畫
});
$("button:eq(2)").click(function(){
$("#panel").stop(true);//清除元素的所有動(dòng)畫
});
$("button:eq(3)").click(function(){
$("#panel").stop(false, true);//讓當(dāng)前動(dòng)畫直接到達(dá)末狀態(tài) ,繼續(xù)下一個(gè)動(dòng)畫
});
$("button:eq(4)").click(function(){
$("#panel").stop(true, true);//清除元素的所有動(dòng)畫,讓當(dāng)前動(dòng)畫直接到達(dá)末狀態(tài)
});
})
</script>
</head>
<body>
<button>開始一連串動(dòng)畫</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>
實(shí)例說明
1、點(diǎn)擊按鈕(stop()),由于兩個(gè)參數(shù)都是false。所以點(diǎn)擊發(fā)生時(shí),animater沒有跳到當(dāng)前動(dòng)畫(動(dòng)畫1)的最終效果,而直接進(jìn)入動(dòng)畫2,然后動(dòng)畫3,4,5.直至完成整個(gè)動(dòng)畫。
2、點(diǎn)擊按鈕(stop(true)),由于第一個(gè)是true,第二個(gè)是false,所以animater立刻全部停止了,動(dòng)畫不動(dòng)了。
3、點(diǎn)擊按鈕(stop(false,true)),由于第一個(gè)是false,第二個(gè)是true,所以點(diǎn)擊發(fā)生時(shí),animater身處的當(dāng)前動(dòng)畫(動(dòng)畫1)停止并且animater直接跳到當(dāng)前動(dòng)畫(動(dòng)畫1)的最終末尾效果位置,接著正常執(zhí)行下面的動(dòng)畫(動(dòng)畫2,3,4,5),直至完成整個(gè)動(dòng)畫。
3、點(diǎn)擊按鈕(stop(true,true)),由于兩個(gè)都是true,所以點(diǎn)擊發(fā)生時(shí),animater跳到當(dāng)前動(dòng)畫(動(dòng)畫1)的最終末尾效果位置,然后,全部動(dòng)畫停止。
三、jquery stop()在工作中的應(yīng)用
一個(gè)下拉菜單,當(dāng)鼠標(biāo)移上去的時(shí)候就菜單顯示,當(dāng)鼠標(biāo)離開的時(shí)候菜單隱藏 ,如果我快速不斷地將鼠標(biāo)移入移出菜單(即,當(dāng)菜單下拉動(dòng)畫未完成時(shí),鼠標(biāo)又移出了菜單)就會(huì)產(chǎn)生“動(dòng)畫積累",當(dāng)鼠標(biāo)停止移動(dòng)后,積累的動(dòng)畫還會(huì)持續(xù)執(zhí)行,直到動(dòng)畫序列執(zhí)行完畢。
解決方法
在寫動(dòng)畫效果的代碼前加入stop(true,true),這樣每次快速的移入移出菜單,就正常了,當(dāng)移入一個(gè)菜單的時(shí)候,停止所有加入隊(duì)列的動(dòng)畫,完成當(dāng)前的動(dòng)畫(跳至當(dāng)前動(dòng)畫的最終效果位置)。
最后給大家介紹jquery delay()
jquery中delay()方法的功能是設(shè)置一個(gè)延時(shí)值來推遲動(dòng)畫效果的執(zhí)行,它的調(diào)用格式為:$(selector).delay(duration)其中參數(shù)duration為延時(shí)值,它的單位是毫秒,當(dāng)超過延時(shí)值時(shí),動(dòng)畫繼續(xù)執(zhí) ,delay與setTimeout函數(shù)還是有區(qū)別的,delay是更適合某些使用情況。
可以將隊(duì)列中等待執(zhí)行的下一個(gè)動(dòng)畫延遲指定的時(shí)間后才執(zhí)行。它常用在隊(duì)列中的兩個(gè)jQuery效果函數(shù)之間,從而在上一個(gè)動(dòng)畫效果執(zhí)行后延遲下一個(gè)動(dòng)畫效果的執(zhí)行時(shí)間。
一、語法
$(selector).delay(speed,queueName)
1、參數(shù)說明
2、備注
延時(shí)時(shí)間(duration參數(shù))是以毫秒為單位的,數(shù)值越大,動(dòng)畫越慢,不是越快。
字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。
二、delay()實(shí)例
HTML
<p>動(dòng)畫效果:
<select id="animation">
<option value="1">動(dòng)畫1</option>
<option value="2">動(dòng)畫2</option>
<option value="3">動(dòng)畫3</option>
<option value="4">動(dòng)畫4</option>
</select>
<input id="exec" type="button" value="執(zhí)行動(dòng)畫" >
</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"){
/*
注意:只有動(dòng)畫才會(huì)被加入效果隊(duì)列中
以下代碼實(shí)際上只有slideUp()、slideDown()會(huì)加入效果隊(duì)列
delay()的延遲只對(duì)slideDown()起作用
show()在被調(diào)用時(shí)就立即執(zhí)行了(此時(shí)slideUp的動(dòng)畫效果尚未執(zhí)行結(jié)束)
以下代碼的執(zhí)行順序時(shí):
1、slideUp()被加入隊(duì)列、開始執(zhí)行,
2、show()也開始執(zhí)行,它立即執(zhí)行完畢,此時(shí)slideUp()的動(dòng)畫尚未執(zhí)行結(jié)束
3、延遲2秒
4、執(zhí)行SlideDown()
*/
$myDiv.slideUp( "slow" )
.delay( 2000 )
.show( ) // 它不是一個(gè)效果動(dòng)畫
.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>
實(shí)例二、讓頁面中的按鈕在頁面加載后500毫秒隱藏,然后再過1500毫秒顯示出來
$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide().dequeue();})
.delay(1500)
.queue(function(){$(this).show();});
});
三、jquery中使用delay()注意事項(xiàng)
1、delay適用在jQuery動(dòng)畫效果和類似隊(duì)列中
2、如果下一項(xiàng)是動(dòng)畫效果,則會(huì)執(zhí)行延遲調(diào)用
3、如果不是效果動(dòng)畫,則它不會(huì)被加入效果隊(duì)列中,因此該函數(shù)不會(huì)對(duì)它進(jìn)行延遲調(diào)用。
4、如果要將不是動(dòng)畫效果加入延遲,則需要將它加入到queue隊(duì)列中去。
例如
$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide();})
.delay(1500)
.show(1);
//.queue(function(){$(this).show();});
});
備注:上面方法只隱藏,不會(huì)再顯示,queue執(zhí)行完后,也中止了動(dòng)畫隊(duì)列的繼續(xù)執(zhí)行,需要調(diào)用dequeue使其執(zhí)行下去
又如
$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide().dequeue();})
.delay(1500)
.show();
//.show(1);
});
備注:上面方法也是只隱藏,而不會(huì)再顯示!這里show不再指定顯示動(dòng)畫時(shí)長,則show方法不再是一個(gè)動(dòng)畫。由此可知,dequeue只能使得動(dòng)畫隊(duì)列中的后續(xù)方法執(zhí)行下去,不能使非動(dòng)畫隊(duì)列中的jquery方法繼續(xù)執(zhí)行!
相關(guān)文章
jQuery動(dòng)畫效果-slideUp slideDown上下滑動(dòng)示例代碼
jQuery動(dòng)畫上下滑動(dòng)效果在網(wǎng)頁中的應(yīng)用還是比較廣泛的,其實(shí)很簡單通過slideUp slideDown方法便可輕松實(shí)現(xiàn),具體如下,喜歡的朋友可以參考下,希望對(duì)大家學(xué)習(xí)jquery有所幫助2013-08-08
遠(yuǎn)離JS災(zāi)難css災(zāi)難之 js私有函數(shù)和css選擇器作為容器
當(dāng)一個(gè)項(xiàng)目龐大到一定階段,例如UI展示層采用了模塊化模板化之后,就會(huì)出現(xiàn)js災(zāi)難,css災(zāi)難,經(jīng)常出現(xiàn)以前從來不放在一起的兩個(gè)js或css莫名奇妙的被放到了一個(gè)頁面,基本的原因是模塊重用造成的2011-12-12
tuzhu_req.js 實(shí)現(xiàn)仿百度圖片首頁效果
這篇文章主要介紹了tuzhu_req.js 實(shí)現(xiàn)仿百度圖片首頁效果的相關(guān)資料,需要的朋友可以參考下2015-08-08
利用jquery制作滾動(dòng)到指定位置觸發(fā)動(dòng)畫
本文只是一個(gè)簡單的演示程序,大家可以根據(jù)自己的需求進(jìn)行修改,以達(dá)到自己想要實(shí)現(xiàn)的功能。2016-03-03
jquery 判斷div show的狀態(tài)實(shí)例
下面小編就為大家?guī)硪黄猨query 判斷div show的狀態(tài)實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-12-12
基于jQuery實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無視頁面關(guān)閉)
最近做了一個(gè)項(xiàng)目,其中有需求要求實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后倒計(jì)時(shí)功能,其中有個(gè)難點(diǎn):要求關(guān)閉頁面也進(jìn)行倒計(jì)時(shí)。好吧,下面小編把jquery 發(fā)送驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)代碼分享給大家,大家可以參考下2016-09-09

