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> |
转载于:https://www.cnblogs.com/yunfeioliver/p/7784167.html