逐一介绍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：必需。规定包含名称/值对的对象。

实例

rush:js;"> 开始一连串动画 stop() stop(true) stop(false,true) stop(true,true)

实例说明

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

rush:js;">

动画效果：

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

rush:js;"> $(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队列中去。

例如

rush:js;"> $(function(){ var $inputs = $('input[type=button]') .delay(500) .queue(function(){$(this).hide();}) .delay(1500) .show(1); //.queue(function(){$(this).show();}); });

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

又如

rush:js;"> $(function(){ var $inputs = $('input[type=button]') .delay(500) .queue(function(){$(this).hide().dequeue();}) .delay(1500) .show(); //.show(1); });

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

原文地址：https://www.jb51.cc/jquery/51859.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：jQuery实用技巧必备下下一篇：使用JQuery实现的分页插件分享