首先给大家介绍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>把数据添加到 div 元素</button><br /> <button>获取已添加到 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> <h5>什么是jQuery?</h5> <div> jQuery。 </div> </div> </body> </html>
实例说明