jQuery事件和动画
1、toggle事件
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>toggle事件</title> | |
| <!-- toggle事件 ： 1.9之后的版本之后废除了该事件！ | |
| 01.是一个循环事件！ | |
| 02.显示和隐藏--> | |
| </head> | |
| <body> | |
| <input type="button" id="hidebtn" value="toggle循环"> | |
| <input type="button" id="showbtn" value="toggle显示和隐藏"> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| //设置按钮的toggle事件 | |
| $("input[type='button']").toggle( | |
| function(){ //第1次触发的事件 | |
| $("body").css("background","red"); | |
| }, | |
| function(){//第2次触发的事件 | |
| $("body").css("background","pink"); | |
| }, | |
| function(){//第3次触发的事件 | |
| $("body").css("background","yellowgreen"); | |
| } | |
| ); | |
| //显示和隐藏 | |
| $("#showbtn").click(function(){ | |
| $("#hidebtn").toggle(); | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
2、事件绑定
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>事件绑定on</title> | |
| </head> | |
| <body> | |
| <button type="button" id="add">添加商品</button> | |
| <button type="button" id="btnClose">解除绑定</button> | |
| <ul> | |
| <li>手机</li> | |
| <li>充电器</li> | |
| <li>耳机</li> | |
| </ul> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| /*01.鼠标移入和移出li的事件! 这种方式 后面增加的节点没有事件 | |
| $("li").hover(function(){ //mouseover | |
| $(this).css({"background":"red"}); | |
| },function(){//mouseout | |
| $(this).css({"background":"pink"}); | |
| })*/ | |
| /*02.当我们点击按钮的时候 动态的增加li*/ | |
| $("#add").click(function(){ | |
| $("ul").append("<li>吹风机</li>"); | |
| }) | |
| /*针对于我们 新增的li 没有事件 解决方案！ 绑定事件 | |
| $("ul").on("mouseover","li",function(){ | |
| $(this).css({"background":"red"}); | |
| }); | |
| $("ul").on("mouseout","li",function(){ | |
| $(this).css({"background":"pink"}); | |
| });*/ | |
| $("ul").on({ //同时绑定多个事件 | |
| mouseover:function(){ | |
| $(this).css({"background":"red"}); | |
| }, | |
| mouseout:function(){ | |
| $(this).css({"background":"pink"}); | |
| }},"li"); | |
| /*解除绑定事件*/ | |
| $("#btnClose").click(function(){ | |
| $("ul").off("mouseover"); | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
3、事件绑定bind
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>事件绑定bind</title> | |
| </head> | |
| <body> | |
| <button type="button" id="add">添加商品</button> | |
| <button type="button" id="btnClose">解除绑定</button> | |
| <ul> | |
| <li>手机</li> | |
| <li>充电器</li> | |
| <li>耳机</li> | |
| </ul> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| //增加节点 | |
| $("#add").click(function(){ | |
| $("ul").append("<li>吹风机</li>"); | |
| }) | |
| /*事件bing 绑定 解除绑定 unbind*/ | |
| $("li").bind({ | |
| mouseover:function(){ | |
| $(this).css({"background":"red"}); | |
| }, | |
| mouseout:function(){ | |
| $(this).css({"background":"pink"}); | |
| } | |
| }) | |
| /*事件live 绑定 解除绑定 die*/ | |
| $("li").live({ | |
| mouseover:function(){ | |
| $(this).css({"background":"red"}); | |
| }, | |
| mouseout:function(){ | |
| $(this).css({"background":"pink"}); | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
4、键盘事件
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>键盘事件</title> | |
| </head> | |
| <body> | |
| <form action="#" method="get" id="myForm"> | |
| 用户名：<input name="userName" placeholder="请输入用户名"> | |
| 密码：<input type="password" name="pwd" placeholder="请输入密码"> | |
| <button type="submit">登录</button> | |
| </form> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| /*点击回车键 触发表单的提交事件 key用户的按键*/ | |
| $(document).keypress(function(key){ | |
| if(key.keyCode==13){ | |
| //表单提交 | |
| $("#myForm").submit(); | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
5、silde事件
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>silde事件</title> | |
| <style type="text/css" > | |
| ul{ | |
| list-style:none; | |
| padding:5px; | |
| width:210px; | |
| border:1px solid red; | |
| } | |
| a{ | |
| text-decoration:none; | |
| line-height: 30px; | |
| } | |
| .menu_style li{ | |
| border-bottom:1px solid #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="menu" class="menu_style"> | |
| <ul> | |
| <li><a href="#">手机通讯、数码电器</a></li> | |
| <li><a href="#">食品饮料、酒水、果蔬</a></li> | |
| <li><a href="#">进口食品、进口牛奶</a></li> | |
| <li><a href="#">美容化妆、个人护理</a></li> | |
| <li><a href="#">母婴用品、个人护理</a></li> | |
| <li><a href="#">厨卫清洁、纸、清洁剂</a></li> | |
| <li id="menu_07" class="element_hide"><a href="#">家居家纺、锅具餐具</a></li> | |
| <li id="menu_08" class="element_hide"><a href="#">生活电器、汽车生活</a></li> | |
| <li id="menu_09" class="element_hide"><a href="#">电脑、外设、办公用品</a></li> | |
| <li class="btn"> | |
| <input name="more_btn" type="button" value="展开或关闭菜单项" /> | |
| </li> | |
| </ul> | |
| </div> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| /*让li下标大于5的 但是不包含最后一个 显示或者隐藏*/ | |
| $(function(){ | |
| $("input").toggle( | |
| function(){ | |
| //$("li:gt(5):not(:last)").slideUp(1000); 毫秒数 | |
| $("li:gt(5):not(:last)").slideUp("fast"); | |
| }, | |
| function(){ | |
| $("li:gt(5):not(:last)").slideDown("slow"); | |
| } | |
| ); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
6、fade事件
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <button type="button" id="showImg">淡入</button> | |
| <button type="button" id="hideImg">淡出</button> | |
| <img src="../images/cat.jpg"> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| /*其实就是对元素的透明度进行修改*/ | |
| $("#showImg").click(function(){ //淡入 | |
| $("img").fadeIn(3000); | |
| }) | |
| $("#hideImg").click(function(){//淡出 | |
| $("img").fadeOut("slow"); | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
7、animate动画事件
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>animate动画事件</title> | |
| </head> | |
| <body> | |
| <button type="button" id="showAnimate">开始动画</button> | |
| <img src="../images/cat.jpg"> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| /* | |
| * animate(prop,speed,easing,callback) | |
| * prop:我们需要设置的css属性，可以是0-N个 | |
| * speed:动画执行的速度 | |
| * easing:速度曲线 | |
| * callback: 指的是我们动画完成所有动作之后的回调函数 （function） | |
| * */ | |
| $(function(){ | |
| //点击按钮 | |
| $("#showAnimate").click(function(){ | |
| //图片发生变化 | |
| $("img").animate( // start animate | |
| { | |
| "height":200, | |
| "width":200, | |
| "marginRight":50 | |
| }, | |
| "slow", | |
| "swing", | |
| function(){ | |
| alert("动画已经完成！"); | |
| }); // end animate | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
