这篇“jQuery的动画、遍历和事件绑定怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jQuery的动画、遍历和事件绑定怎么实现”文章吧。

学习内容：一、jQuery高级1、动画：三种方式显示和隐藏元素

默认显示和隐藏元素show([speed,[easing],[fn]])hide([speed,[easing],[fn]])toggle([speed,[easing],[fn]])

滚动显示和隐藏元素slideDown([speed,[easing],[fn]])slideUp([speed,[easing],[fn]])slideToggle([speed,[easing],[fn]])

淡入淡出显示和隐藏元素fadeIn([speed,[easing],[fn]])fadeOut([speed,[easing],[fn]])fadeToggle([speed,[easing],[fn]])

参数speed：速度，三种预定义的值（“slow”,“normal”,“fast”）或表示动画时长的毫秒数值（如：1000）easing：用来指定切换效果，默认是"swing"，可用参数"linear"swing：动画执行时效果是“先慢，中间快，又慢”linear：动画执行时的速度是匀速的fn：在动画完成时执行的函数，每个元素执行一次

2、遍历

js遍历方式for(初始化值;循环结束条件;步长)

jq遍历方式jq对象.each(callback)$.each(object,[callback])for…of jQuery3.0之后提供的版本

3、事件绑定

jQuery标准的绑定方式jq对象.事件方法(回调函数);如果调用事件方法，不传递回调函数，则触发浏览器默认行为表单对象.submit(); // 让表单提交

on绑定事件/off解绑事件jq对象.on(事件,回调函数);jq对象.off(事件); 如果不传递事件名称，则解绑所有的事件

事件切换：togglejq对象.toggle(fn1,fn2…); 多次点击依次执行传递的函数

4、案例

广告显示和隐藏需求当页面加载完成后，3秒后，自动显示广告广告显示5秒后，自动消失分析使用定时器来完成 setTimeOut()执行一次的定时器jQuery的显示和隐藏的动画效果其实就是控制display属性使用show/hide相关方法完成广告的显示

抽象需求点击开始，小相框快速切换点击停止，小相框停止切换分析给开始按钮绑定单击事件定义循环定时器切换小相框的src属性定义数组，存放图片资源路径生成随机数，数组索引给结束按钮绑定单击事件停止定时器给大相框设置src属性

5、插件：增强jQuery功能

实现方式$.fn.extend(object);增强通过jQuery获取对象的功能 $("#id")$.extend(object);增强jQuery对象自身的功能 $/jQuery

学习产出：1、 动画

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><scripttype="text/javascript"src="../js/jquery-3.3.1.min.js"></script><script>//隐藏divfunctionhideFn(){/*$("#showDiv").hide("slow","swing",function(){//alert("隐藏了。。。");})*///默认方式//$("#showDiv").hide("slow","swing");//滑动方式//$("#showDiv").slideDown("slow","swing");//淡入淡出方式$("#showDiv").fadeOut("slow","swing");}//显示divfunctionshowFn(){/*$("#showDiv").show("slow","linear",function(){//alert("显示了。。。");})*///默认方式//$("#showDiv").show("slow","swing");//滑动方式//$("#showDiv").slideUp("slow","swing");//淡入淡出方式$("#showDiv").fadeIn("slow","swing");}//切换显示隐藏divfunctiontoggleFn(){/*$("#showDiv").toggle("slow","swing",function(){//alert("切换显示隐藏了。。。");})*///默认方式//$("#showDiv").toggle("slow","swing");//滑动方式//$("#showDiv").slideToggle("slow","swing");//淡入淡出方式$("#showDiv").fadeToggle("slow","swing");}</script></head><body><inputtype="button"value="点击按钮隐藏div"onclick="hideFn()"><inputtype="button"value="点击按钮显示div"onclick="showFn()"><inputtype="button"value="点击按钮切换div显示和隐藏"onclick="toggleFn()"><divid="showDiv">div显示和隐藏</div></body></html>2、遍历

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="../js/jquery-3.3.1.min.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript">$(function(){//获取所有ul下面的livarcitys=$("#cityli");//遍历li//js遍历方式for(vari=0;i<citys.length;i++){//获取内容alert(i+":"+citys[i].innerHTML);}//jq遍历方式citys.each(function(index,element){//获取li对象，直接用this//alert(this.innerHTML);//alert($(this).html());//获取li对象，在回调函数中定义参数index（索引）element（元素对象）//alert(index+":"+element.innerHTML);//alert(index+":"+$(element).html());//判断如果是上海，结束循环if("上海"==$(this).html()){//如果当前回调函数返回值是false，终止循环//如果当前回调函数返回值是true，终止本次循环，继续下次循环returnfalse;//returntrue;}alert(index+":"+$(element).html());});$.each(citys,function(){alert($(this).html());});for(liofcitys){alert($(li).html());}});</script></head><body><ulid="city"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li></ul></body></html>3、 事件绑定与解绑

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="../js/jquery-3.3.1.min.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript">$(function(){//获取name对象，绑定click事件//$("#name").click(function(){//alert("我被点击了！");//});//给name对象绑定鼠标移动元素之上事件与鼠标移除事件//$("#name").mouseover(function(){//alert("鼠标来了！");//});//$("#name").mouseleave(function(){//alert("鼠标走了！");//});//简化操作，链式编程//$("#name").mouseover(function(){//alert("鼠标来了");//}).mouseleave(function(){//alert("鼠标走了");//})$("#name").focus();//让文本输入框获得焦点//表单对象.submit()//让表单提交})</script></head><body><inputid="name"type="text"value="绑定点击事件"></body></html><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="../js/jquery-3.3.1.min.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript">$(function(){//使用on绑定事件$("#btn").on("click",function(){alert("我被点击了！");});//使用off解绑事件$("#btn2").click(function(){//解除btn按钮的click绑定事件$("#btn").off("click");});});</script></head><body><inputid="btn"type="button"value="使用on绑定点击事件"><inputid="btn2"type="button"value="使用off解绑点击事件"></body></html><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="../js/jquery-3.3.1.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="../js/jquery-migrate-1.0.0.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript">$(function(){$("#btn").toggle(function(){//改变背景色为绿色$("#myDiv").css("backgroundColor","green");},function(){//改变背景色为黄色$("#myDiv").css("backgroundColor","yellow");})})</script></head><body><inputid="btn"type="button"value="事件切换"><divid="myDiv">点击按钮变成绿色，再次点击黄色</div></body></html>4、案例1：广告显示和隐藏

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>广告的自动显示与隐藏</title><style>#content{width:100%;height:500px;background:#999}</style><!--引入jquery--><scripttype="text/javascript"src="../js/jquery-3.3.1.min.js"></script><script>$(function(){//定义定时器，3秒之后显示广告setTimeout(adShow,3000);//定义定时器，5秒之后隐藏广告setTimeout(adHide,8000);});//显示广告functionadShow(){$("#ad").show("slow");}//隐藏广告functionadHide(){$("#ad").hide("slow");}</script></head><body><!--整体的DIV--><div><!--广告DIV--><divid="ad"><imgsrc="../img/adv.jpg"/></div><!--下方正文部分--><divid="content">正文部分</div></div></body></html>5、案例2：抽奖

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jquery案例之抽奖</title><scripttype="text/javascript"src="../js/jquery-3.3.1.min.js"></script><script>varimg=["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg"];$(function(){$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);varstartId;varindex;$("#startID").click(function(){$("#startID").prop("disabled",true);$("#stopID").prop("disabled",false);startId=setInterval(function(){index=Math.floor(Math.random()*7);$("#img1ID").prop("src",img[index])},20);});$("#stopID").click(function(){$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);clearInterval(startId);$("#img2ID").prop("src",img[index]).hide();$("#img2ID").show(1000);});})</script></head><body><!--小像框--><div><imgid="img1ID"src="../img/man00.jpg"/></div><!--大像框--><div><imgid="img2ID"src="../img/man00.jpg"width="800px"height="500px"/></div><!--开始按钮--><inputid="startID"type="button"value="点击开始"onclick="imgStart()"><!--停止按钮--><inputid="stopID"type="button"value="点击停止"onclick="imgStop()"><scriptlanguage='javascript'type='text/javascript'>//准备一个一维数组，装用户的像片路径varimgs=["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg"];</script></body></html>6、01-jQuery对象进行方法扩展

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>01-jQuery对象进行方法扩展</title><scriptsrc="../js/jquery-3.3.1.min.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript">//使用jQuery插件，给jq添加两个方法，check()选中所有复选框，uncheck()取消所有选中//定义jQuery对象的插件$.fn.extend({//定义一个check方法，所有的jq对象都可以调用该方法check:function(){this.prop("checked",true);},uncheck:function(){this.prop("checked",false);}});$(function(){$("#btn-check").click(function(){$("input[type='checkbox']").check();});$("#btn-uncheck").click(function(){$("input[type='checkbox']").uncheck();});})</script></head><body><inputid="btn-check"type="button"value="点击选中复选框"onclick="checkFn()"><inputid="btn-uncheck"type="button"value="点击取消复选框选中"onclick="uncheckFn()"><br/><inputtype="checkbox"value="football">足球<inputtype="checkbox"value="basketball">篮球<inputtype="checkbox"value="volleyball">排球</body></html>7、02-jQuery全局进行方法扩展

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>01-jQuery对象进行方法扩展</title><scriptsrc="../js/jquery-3.3.1.min.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript">//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值$.extend({max:function(a,b){returna>=b?a:b;},min:function(a,b){returna<=b?a:b;}});varmax=$.max(2,3);alert(max);varmin=$.min(1,8);alert(min);</script></head><body></body></html>

以上就是关于“jQuery的动画、遍历和事件绑定怎么实现”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。