Loading... # 动画 三种方式显示和隐藏元素 ## 默认显示和隐藏方式 show([speed,[easing],[fn]]) :显示 参数: - speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000) - easing:用来指定切换效果,默认是"swing",可用参数"linear" - swing:动画执行时效果是 先慢,中间快,最后又慢 - linear:动画执行时速度是匀速的 - fn:在动画完成时执行的函数,每个元素执行一次。 hide([speed,[easing],[fn]]) :隐藏 toggle([speed],[easing],[fn]) :切换,显示则隐藏,隐藏则显示 ```html <body> <input type="button" value="点击按钮隐藏div" onclick="hideFn()"> <input type="button" value="点击按钮显示div" onclick="showFn()"> <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"> <div id="showDiv" style="width:300px;height:300px;background:pink"> div显示和隐藏 </div> </body> ``` ```javascript $("#showDiv").show("slow","swing",function(){ alert("显示了...") }); $("#showDiv").hide("slow","swing",function(){ alert("隐藏了...") }); //自动切换 $("#showDiv").toggle("slow"); ``` ## 滑动显示和隐藏方式 slideDown([speed],[easing],[fn]) slideUp([speed,[easing],[fn]]) slideToggle([speed],[easing],[fn]) ```javascript //滑动方式 $("#showDiv").slideDown("slow"); //滑动方式 $("#showDiv").slideToggle("slow"); //滑动方式 $("#showDiv").slideUp("slow"); ``` ## 淡入淡出显示和隐藏方式 fadeIn([speed],[easing],[fn]) fadeOut([speed],[easing],[fn]) fadeToggle([speed,[easing],[fn]]) ```javascript //淡入淡出方式 $("#showDiv").fadeIn("slow"); //淡入淡出方式 $("#showDiv").fadeOut("slow"); //淡入淡出方式 $("#showDiv").fadeToggle("slow"); ``` # 遍历 ## js的遍历方式 for(初始化值;循环结束条件;步长),jq也可以用。 ## jq的遍历方式 jq对象.each(callback) 语法: jquery对象.each(function(index,element){}); - index:就是元素在集合中的索引 - element:就是集合中的每一个元素对象 - this:集合中的每一个元素对象 回调函数返回值: * true:如果当前function返回为false,则结束循环(break)。 * false:如果当前function返回为true,则结束本次循环,继续下次循环(continue) $.each(object, [callback]),object为需要遍历的jq对象,回调方法中的参数与each一模一样。 for..of:jquery 3.0 版本之后提供的方式。for(元素对象 of 容器对象) ```html <ul id="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>重庆</li> </ul> ``` ```javascript var citys = $("#city li"); citys.each(function (index, element) { alert(index + ": " + $(element).html()) }) //或者 citys.each(function (){ alert($(this).html()) }) citys.each(function (index, element) { if ("上海"=== $(element).html() ){ return false; //结束循环 } alert(index + ": " + $(element).html()) }) citys.each(function (index, element) { if ("上海"=== $(element).html() ){ return true; //跳过本次循环 } alert(index + ": " + $(element).html()) }) ``` ```javascript var citys = $("#city li"); $.each(citys,function (index,city) { alert(index + ": " + $(city).html()) }) ``` # 事件绑定 ## jquery标准的绑定方式 - jq对象.事件方法(回调函数); - 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。 - 表单对象.submit(); //让表单提交 ```html <head> <meta charset="UTF-8"> <title></title> <script src="./js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { //获取name对象,绑定click事件 $("#name").click(function () { alert("我被点击了...") }); //给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件 $("#name").mouseover(function () { alert("鼠标来了...") }); $("#name").mouseout(function () { alert("鼠标走了...") }); //简化操作,链式编程 $("#name").mouseover(function () { alert("鼠标来了...") }).mouseout(function () { alert("鼠标走了...") }); alert("我要获得焦点了...") $("#name").focus(); //让文本输入框获得焦点 表单对象.submit(); //让表单提交 }); </script> </head> <body> <input id="name" type="text" value="绑定点击事件"> </body> </html> ``` ## on绑定事件/off解除绑定 - jq对象.on("事件名称",回调函数) - jq对象.off("事件名称") - 如果off方法不传递任何参数,则将组件上的所有事件全部解绑 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { //使用on给按钮绑定单击事件 click $("#btn").on("click",function () { alert("我被点击了。。。") }) ; //使用off解除btn按钮的单击事件 $("#btn2").click(function () { //解除btn按钮的单击事件 $("#btn").off("click"); //将组件上的所有事件全部解绑 $("#btn").off(); }); }); </script> </head> <body> <input id="btn" type="button" value="使用on绑定点击事件"> <input id="btn2" type="button" value="使用off解绑点击事件"> </body> </html> ``` ## 事件切换:toggle - jq对象.toggle(fn1,fn2...) - 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2..... - **注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。** `<script src="jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>` ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="./js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="./js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { //获取按钮,调用toggle方法 $("#btn").toggle(function () { //改变div背景色backgroundColor 颜色为 green $("#myDiv").css("backgroundColor","green"); }, function () { //改变div背景色backgroundColor 颜色为 pink $("#myDiv").css("backgroundColor","pink"); }); }); </script> </head> <body> <input id="btn" type="button" value="事件切换"> <div id="myDiv" style="width:300px;height:300px;background:pink"> 点击按钮变成绿色,再次点击红色 </div> </body> </html> ``` # 案例 ## 广告自动显示和隐藏 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>广告自动显示和隐藏</title> <script src="../js/jquery-3.3.1.min.js"></script> <style> #content { width: 100%; height: 500px; background: #999 } </style> <script> $(function () { //1.5秒显示广告 setTimeout(fade, 1500) //3.5秒后关闭广告 setTimeout(fade, 5000) }) function fade() { $("#ad").fadeToggle("slow"); } </script> </head> <body> <!-- 整体的DIV --> <div> <!-- 广告DIV --> <div id="ad" style="display: none;"> <img style="width:100%" src="./img/adv.jpg"/> </div> <!-- 下方正文部分 --> <div id="content"> 正文部分 </div> </div> </body> </html> ``` # 插件 增强JQuery的功能 如何定义插件:(看下面两个案例) $.fn.extend(object) 增强通过Jquery获取的对象的功能 $("#id")  ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/jquery-3.3.1.min.js"></script> <script> //定义对象插件 $.fn.extend({ 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> <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()"> <input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()"> <br/> <input type="checkbox" value="football">足球 <input type="checkbox" value="basketball">篮球 <input type="checkbox" value="volleyball">排球 </body> </html> ``` $.extend(object) 增强JQeury对象自身的功能 $ 或者 jQuery ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全局插件</title> <script src="./js/jquery-3.3.1.min.js"></script> <script> // 对全局方法扩展2个方法,扩展min方法:求2个值的最小值;扩展max方法:求2个值最大值 $.extend({ max: function (a, b) { return a >= b ? a : b; }, min: function (a, b) { return a <= b ? a : b; } }) // 使用这两个方法 alert($.max(10, 8)); alert($.min(5, 8)); </script> </head> <body> </body> </html> ```<hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于:乐心湖's Blog</p><p class="content-copyright">本文链接:<a class="content-copyright" href="https://www.xn2001.com/archives/583.html">https://www.xn2001.com/archives/583.html</a></p><p class="content-copyright">声明:博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank" rel="nofollow noopener noopener" one-link-mark="yes">CC BY-SA 4.0 协议</a> ,转载请注明出处!</p></blockquote> 腾讯云社区邀请各位技术博主加入,福利多多噢! Last modification:September 10th, 2020 at 03:46 pm © 允许规范转载 Support 如果觉得我的文章对你有用,请随意赞赏 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
One comment
专业空包代发网,就选www.5adanhw.com