首页 > 语言 > JavaScript > 正文

逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)

2024-05-06 16:24:56
字体:
来源:转载
供稿:网友

这篇文章逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)的相关资料,需要的朋友可以参考下

首先给大家介绍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:必需。规定包含名称/值对的对象。

实例

 

 
  1. <html> 
  2. <head> 
  3. <script type="text/javascript"
  4. $(document).ready(function(){ 
  5. testObj=new Object(); 
  6. testObj.greetingMorn="Good Morning!"
  7. testObj.greetingEve="Good Evening!"
  8. $("#btn1").click(function(){ 
  9. $("div").data(testObj); 
  10. }); 
  11. $("#btn2").click(function(){ 
  12. alert($("div").data("greetingEve")); 
  13. }); 
  14. }); 
  15. </script> 
  16. </head> 
  17. <body> 
  18. <button id="btn1">把数据添加到 div 元素</button><br /> 
  19. <button id="btn2">获取已添加到 div 元素的数据</button> 
  20. <div></div> 
  21. </body> 
  22. </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 代码示例

 

 
  1. <!DOCTYPE> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5. <title>jquery stop()</title> 
  6. <script type="text/javascript"
  7. $(function(){ 
  8. $("button:eq(0)").click(function(){ 
  9. $("#panel").animate({height:"150" }, 1000).animate({width:"300" }, 
  10. 1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"}, 
  11. 1000); 
  12. }); 
  13. //stop([clearQueue][,gotoEnd]); 
  14.   //语法结构 
  15. $("button:eq(1)").click(function(){ 
  16. $("#panel").stop();//停止当前动画,继续下一个动画 
  17. }); 
  18. $("button:eq(2)").click(function(){ 
  19. $("#panel").stop(true);//清除元素的所有动画 
  20. }); 
  21. $("button:eq(3)").click(function(){ 
  22. $("#panel").stop(falsetrue);//让当前动画直接到达末状态 ,继续下一个动画 
  23. }); 
  24. $("button:eq(4)").click(function(){ 
  25. $("#panel").stop(truetrue);//清除元素的所有动画,让当前动画直接到达末状态 
  26. }); 
  27. }) 
  28. </script> 
  29. </head> 
  30. <body> 
  31. <button>开始一连串动画</button> 
  32. <button>stop()</button> 
  33. <button>stop(true)</button> 
  34. <button>stop(false,true)</button> 
  35. <button>stop(true,true)</button> 
  36. <div id="panel"
  37. <h5 class="head">什么是jQuery?</h5> 
  38. <div class="content"
  39. jQuery。 
  40. </div> 
  41. </div> 
  42. </body> 
  43. </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

 

 
  1. <p>动画效果: 
  2. <select id="animation"
  3. <option value="1">动画1</option> 
  4. <option value="2">动画2</option> 
  5. <option value="3">动画3</option> 
  6. <option value="4">动画4</option> 
  7. </select> 
  8. <input id="exec" type="button" value="执行动画" > 
  9. </p> 
  10. <div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div> 
  11. <script> 
  12. $("#exec").click( function(){ 
  13. var v = $("#animation").val(); 
  14. var $myDiv = $("#myDiv"); 
  15. if(v == "1"){ 
  16. $myDiv.slideUp( 1000 ) 
  17. .delay( "slow" ) 
  18. .fadeIn( 1500 ); 
  19. }else if(v == "2"){ 
  20. $myDiv.fadeOut( "slow" ) 
  21. .delay( 2000 ) 
  22. .slideDown( 1000 ) 
  23. .animate( { height: "+=300" } ); 
  24. }else if(v == "3"){ 
  25. /* 
  26. 注意:只有动画才会被加入效果队列中 
  27. 以下代码实际上只有slideUp()、slideDown()会加入效果队列 
  28. delay()的延迟只对slideDown()起作用 
  29. show()在被调用时就立即执行了(此时slideUp的动画效果尚未执行结束) 
  30. 以下代码的执行顺序时: 
  31. 1、slideUp()被加入队列、开始执行, 
  32. 2、show()也开始执行,它立即执行完毕,此时slideUp()的动画尚未执行结束 
  33. 3、延迟2秒 
  34. 4、执行SlideDown() 
  35. */ 
  36. $myDiv.slideUp( "slow" ) 
  37. .delay( 2000 )  
  38. .show( ) // 它不是一个效果动画 
  39. .slideDown( ); 
  40. }else if(v == "4"){ 
  41. $myDiv.show() 
  42. .delay( 2000 ) 
  43. // 在现有高度的基础上增加300px (如果原来是100px,增加后就是400px) 
  44. .animate( { height: "+=300px" }, 2000 )  
  45. .animate( { width: "50%" }, 1000 )  
  46. .animate( { width: "200px", height: "100px" }, 1000 );  
  47. } ); 
  48. </script> 

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

 

 
  1. $(function(){  
  2. var $inputs = $('input[type=button]')  
  3. .delay(500)  
  4. .queue(function(){$(this).hide().dequeue();})  
  5. .delay(1500)  
  6. .queue(function(){$(this).show();});  
  7. }); 

三、jquery中使用delay()注意事项

1、delay适用在jQuery动画效果和类似队列中

2、如果下一项是动画效果,则会执行延迟调用

3、如果不是效果动画,则它不会被加入效果队列中,因此该函数不会对它进行延迟调用。

4、如果要将不是动画效果加入延迟,则需要将它加入到queue队列中去。

例如

 

 
  1. $(function(){  
  2. var $inputs = $('input[type=button]')  
  3. .delay(500)  
  4. .queue(function(){$(this).hide();})  
  5. .delay(1500)  
  6. .show(1);  
  7. //.queue(function(){$(this).show();});  
  8. }); 

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

又如

 

 
  1. $(function(){  
  2. var $inputs = $('input[type=button]')  
  3. .delay(500)  
  4. .queue(function(){$(this).hide().dequeue();})  
  5. .delay(1500)  
  6. .show();  
  7. //.show(1);  
  8. }); 

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选