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


Posted in Javascript onNovember 04, 2015

首先给大家介绍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方法继续执行!

Javascript 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
js数组的操作指南
Dec 28 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
layUI实现列表查询功能
Jul 27 Javascript
jQuery多条件筛选如何实现
Nov 04 #Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 #Javascript
js数组去重的5种算法实现
Nov 04 #Javascript
解决js图片加载时出现404的问题
Nov 30 #Javascript
jquery实现的点击翻书效果代码
Nov 04 #Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 #Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 #Javascript
You might like
PHP 第一节 php简介
2012/04/28 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
php 可变函数使用小结
2018/06/12 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python向图片里添加文字
2019/11/26 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Django 再谈一谈json序列化
2020/03/16 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
荟萃全球保健品:维他购
2018/05/09 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
Linux的文件类型
2012/03/07 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
2015年元旦文艺汇演主持词
2014/03/26 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
辞职信怎么写
2015/02/27 职场文书
小升初自荐信范文
2015/03/05 职场文书
物流业务员岗位职责
2015/04/03 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
SQL Server 中的事务介绍
2022/05/20 SQL Server
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python