一、事件绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>24-jQuery事件绑定</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 /* jQuery中有两种绑定事件方式 1.eventName(fn); 编码效率略高/ 部分事件jQuery没有实现,所以不能添加 2.on(eventName, fn); 编码效率略低/ 所有js事件都可以添加 注意点: 可以添加多个相同或者不同类型的事件,不会覆盖 */ // $("button").click(function () { // alert("hello lnj"); // }); // $("button").click(function () { // alert("hello 123"); // }); // $("button").mouseleave(function () { // alert("hello mouseleave"); // }); // $("button").mouseenter(function () { // alert("hello mouseenter"); // }); $("button").on("click", function () { alert("hello click1"); }); $("button").on("click", function () { alert("hello click2"); }); $("button").on("mouseleave", function () { alert("hello mouseleave"); }); $("button").on("mouseenter", function () { alert("hello mouseenter"); }); }); </script> </head> <body> <button>我是按钮</button> </body> </html>
二、事件移除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>25-jQuery事件移除</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { function test1() { alert("hello lnj"); } function test2() { alert("hello 123"); } // 编写jQuery相关代码 $("button").click(test1); $("button").click(test2); $("button").mouseleave(function () { alert("hello mouseleave"); }); $("button").mouseenter(function () { alert("hello mouseenter"); }); // off方法如果不传递参数, 会移除所有的事件 // $("button").off(); // off方法如果传递一个参数, 会移除所有指定类型的事件 // $("button").off("click"); // off方法如果传递两个参数, 会移除所有指定类型的指定事件 $("button").off("click", test1); }); </script> </head> <body> <button>我是按钮</button> </body> </html>
三、jQuery事件冒泡和默认行为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>26-jQuery事件冒泡和默行为</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 /* 1.什么是事件冒泡? 2.如何阻止事件冒泡 3.什么是默认行为? 4.如何阻止默认行为 */ /* $(".son").click(function (event) { alert("son"); // return false; event.stopPropagation(); }); $(".father").click(function () { alert("father"); }); */ $("a").click(function (event) { alert("弹出注册框"); // return false; event.preventDefault(); }); }); </script> </head> <body> <div class="father"> <div class="son"></div> </div> <a href="http://www.baidu.com">注册</a> <form action="http://www.taobao.com"> <input type="text"> <input type="submit"> </form> </body> </html>
四、jQuery事件自动触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>27-jQuery事件自动触发</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 $(".son").click(function (event) { alert("son"); }); $(".father").click(function () { alert("father"); }); // $(".father").trigger("click"); // $(".father").triggerHandler("click"); /* trigger: 如果利用trigger自动触发事件,会触发事件冒泡 triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡 */ // $(".son").trigger("click"); // $(".son").triggerHandler("click"); $("input[type='submit']").click(function () { alert("submit"); }); /* trigger: 如果利用trigger自动触发事件,会触发默认行为 triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为（a标签比较特殊） */ // $("input[type='submit']").trigger("click"); // $("input[type='submit']").triggerHandler("click"); $("span").click(function () { alert("a"); }); // $("a").triggerHandler("click"); $("span").trigger("click"); }); </script> </head> <body> <div class="father"> <div class="son"></div> </div> <a href="http://www.baidu.com"><span>注册</span></a> <form action="http://www.taobao.com"> <input type="text"> <input type="submit"> </form> </body> </html>
五、jQuery自定义事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 // $(".son").myClick(function (event) { // alert("son"); // }); /* 想要自定义事件, 必须满足两个条件 1.事件必须是通过on绑定的 2.事件必须通过trigger来触发 */ $(".son").on("myClick", function () { alert("son"); }); $(".son").triggerHandler("myClick"); }); </script> </head> <body> <div class="father"> <div class="son"></div> </div> <a href="http://www.baidu.com"><span>注册</span></a> <form action="http://www.taobao.com"> <input type="text"> <input type="submit"> </form> </body> </html>
六、jQuery事件命名空间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>26-jQuery事件冒泡和默行为</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { $(".father").on("click.ls", function () { alert("father click1"); }); $(".father").on("click", function () { alert("father click2"); }); $(".son").on("click.ls", function () { alert("son click1"); }); /* 利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发 利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发 */ // $(".son").trigger("click.ls"); $(".son").trigger("click"); }); </script> </head> <body> <div class="father"> <div class="son"></div> </div> <a href="http://www.baidu.com"><span>注册</span></a> <form action="http://www.taobao.com"> <input type="text"> <input type="submit"> </form> </body> </html>
七、事件委托
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>31-jQuery事件委托</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { /* 1.什么是事件委托? 请别人帮忙做事情, 然后将做完的结果反馈给我们 */ $("button").click(function () { $("ul").append("<li>我是新增的li</li>"); }) /* 在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件 */ // $("ul>li").click(function () { // console.log($(this).html()); // }); /* 以下代码的含义, 让ul帮li监听click事件 之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件 之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁 */ $("ul").delegate("li", "click", function () { console.log($(this).html()); }); }); </script> </head> <body> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> </ul> <button>新增一个li</button> </body> </html>
八、jQuery移入移出事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>33-jQuery移入移出事件</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 /* mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件 */ /* $(".father").mouseover(function () { console.log("father被移入了"); }); $(".father").mouseout(function () { console.log("father被移出了"); }); */ /* mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件 推荐大家使用 */ /* $(".father").mouseenter(function () { console.log("father被移入了"); }); $(".father").mouseleave(function () { console.log("father被移出了"); }); */ /* $(".father").hover(function () { console.log("father被移入了"); },function () { console.log("father被移出了"); }); */ $(".father").hover(function () { console.log("father被移入移出了"); }); }); </script> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
九、jQuery显示和隐藏动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>39-jQuery显示和隐藏动画</title> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background: red; display: none; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { // $("div").css("display", "block"); // 注意: 这里的时间是毫秒 $("div").show(1000, function () { // 作用: 动画执行完毕之后调用 alert("显示动画执行完毕"); }); }); $("button").eq(1).click(function () { // $("div").css("display", "none"); $("div").hide(1000, function () { alert("隐藏动画执行完毕"); }); }); $("button").eq(2).click(function () { $("div").toggle(1000, function () { alert("切换动画执行完毕"); }); }); }); </script> </head> <body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div> </body> </html>
十、jQuery展开和收起动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>41-jQuery展开和收起动画</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 300px; background: red; display: none; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { $("div").slideDown(1000, function () { alert("展开完毕"); }); }); $("button").eq(1).click(function () { $("div").slideUp(1000, function () { alert("收起完毕"); }); }); $("button").eq(2).click(function () { $("div").slideToggle(1000, function () { alert("收起完毕"); }); }); }); </script> </head> <body> <button>展开</button> <button>收起</button> <button>切换</button> <div></div> </body> </html>
十、折叠菜单练习
jiantou.jpg
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{ width: 300px; margin: 100px auto; /*border: 1px solid black;*/ list-style: none; border-collapse:collapse; /*边框合并*/ } .nav>li{ border: 1px solid black; line-height: 50px; background-color: red; text-indent: 2em; position: relative; } .nav>li:first-child{ border-top-left-radius: 10px; border-top-right-radius: 10px; } .nav>li:last-child{ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .nav>li>span{ background: url("img/jiantou.jpg") no-repeat center center; background-size: 40px; display: inline-block; width:15px; height: 15px; position: absolute; right: 10px; top: 16px; } .sub{ display: none; } .sub>li{ list-style: none; background-color: bisque; border-bottom: 1px solid white; } .sub>li:hover{ background-color: greenyellow; } .nav>.current>span{ transform: rotate(90deg); } </style> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script type="text/javascript"> $(function(){ //1、监听一级菜单的点击事件 $(".nav>li").click(function(){ //1.1得到当前点击的li的二级菜单 var $sub = $(this).children(".sub"); //1.2让被点击的一级菜单箭头旋转 $(this).toggleClass("current"); //1.3显示二级菜单 $sub.slideToggle(500); //1.4拿到所有非当前的二级菜单 var otherSub = $(this).siblings().children(".sub"); //1.5让其他二级菜单隐藏 otherSub.slideUp(500); $(this).siblings().removeClass("current"); }); }); </script> </head> <body> <ul class="nav"> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span></li> <li>一级菜单<span></span></li> <li>一级菜单<span></span></li> </ul> </body> </html>
十一、下拉菜单练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{ width: 300px; height: 50px; background: red; margin: 100px auto; } .nav>li{ width: 100px; height: 50px; text-align: center; line-height: 50px; list-style: none; float: left; } .sub{ list-style: none; background-color: palegreen; display: none; } </style> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script type="text/javascript"> $(function(){ /* * jQuery中执行动画时，建议在执行动画之前先调用stop方法，再执行动画 */ //1、监听一级菜单的鼠标移入事件 $(".nav>li").mouseenter(function(){ //1.1拿到二级菜单 var $sub = $(this).children(".sub"); //停止当前正在执行的动画 $sub.stop(); //1.2让二级菜单显示 $sub.slideDown(1000); }); //2、监听一级菜单的鼠标移出事件 $(".nav>li").mouseleave(function(){ //2.1拿到二级菜单 var $sub = $(this).children(".sub"); //停止当前正在执行的动画 $sub.stop(); //2.2让二级菜单关闭 $sub.slideUp(1000); }); }); </script> </head> <body> <ul class="nav"> <li>一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> </body> </html>
十二、自定义动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>47-jQuery自定义动画</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; margin-top: 10px; background: red; } .two{ background: blue; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { /* $(".one").animate({ 500 }, 1000, function () { alert("自定义动画执行完毕"); }); */ $(".one").animate({ marginLeft: 500 }, 5000, function () { // alert("自定义动画执行完毕"); }); /* 第一个参数: 接收一个对象, 可以在对象中修改属性 第二个参数: 指定动画时长 第三个参数: 指定动画节奏, 默认就是swing 第四个参数: 动画执行完毕之后的回调函数 */ $(".two").animate({ marginLeft: 500 }, 5000, "linear", function () { // alert("自定义动画执行完毕"); }); }) $("button").eq(1).click(function () { $(".one").animate({ "+=100" }, 1000, function () { alert("自定义动画执行完毕"); }); }); $("button").eq(2).click(function () { $(".one").animate({ // "hide" "toggle" }, 1000, function () { alert("自定义动画执行完毕"); }); }) }); </script> </head> <body> <button>操作属性</button> <button>累加属性</button> <button>关键字</button> <div class="one"></div> <div class="two"></div> </body> </html>
十三、动画中stop和delay方法
bg.png
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>49-图标特效</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; width: 400px; height: 250px; border: 1px solid #000; margin: 100px auto; } ul>li{ width: 100px; height: 50px; margin-top: 50px; text-align: center; float: left; overflow: hidden; } ul>li>span{ display: inline-block; width: 24px; height: 24px; background: url("images/bg.png") no-repeat 0 0; position: relative; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 1.遍历所有的li $("li").each(function (index, ele) { // 1.1生成新的图片位置 var $url = "url("images/bg.png") no-repeat 0 "+(index * -24)+"px" // 1.2设置新的图片位置 $(this).children("span").css("background", $url); }); // 2.监听li移入事件 $("li").mouseenter(function () { // 2.1将图标往上移动 $(this).children("span").animate({ top: -50 }, 1000, function () { // 2.2将图片往下移动 $(this).css("top", "50px"); // 2.3将图片复位 $(this).animate({ top: 0 }, 1000); }); }); }); </script> </head> <body> <ul> <li><span></span><p>百度</p></li> <li><span></span><p>百度</p></li> <li><span></span><p>百度</p></li> <li><span></span><p>百度</p></li> <li><span></span><p>百度</p></li> <li><span></span><p>百度</p></li> <li><span></span><p>百度</p></li> <li><span></span><p>百度</p></li> </ul> </body> </html>
十四、无限循环滚动练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>50-无限循环滚动</title> <style> *{ margin: 0; padding: 0; } div{ width: 600px; height: 161px; border: 1px solid #000; margin: 100px auto; overflow: hidden; } ul{ list-style: none; width: 1800px; height: 161px; background: #000; } ul>li{ float: left; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 0.定义变量保存偏移位 var offset = 0; // 1.让图片滚动起来 var timer; function autoPlay(){ timer = setInterval(function () { offset += -10; if(offset <= -1200){ offset = 0; } $("ul").css("marginLeft", offset); }, 50); } autoPlay(); // 2.监听li的移入和移出事件 $("li").hover(function () { // 停止滚动 clearInterval(timer); // 给非当前选中添加蒙版 $(this).siblings().fadeTo(100, 0.5); // 去除当前选中的蒙版 $(this).fadeTo(100, 1); }, function () { // 继续滚动 autoPlay(); // 去除所有的蒙版 $("li").fadeTo(100, 1); }); }); </script> </head> <body> <div> <ul> <li><img src="images/a.jpg" alt=""></li> <li><img src="images/b.jpg" alt=""></li> <li><img src="images/c.jpg" alt=""></li> <li><img src="images/d.jpg" alt=""></li> <li><img src="images/a.jpg" alt=""></li> <li><img src="images/b.jpg" alt=""></li> </ul> </div> </body> </html>