JQuery事件切换
效果图:
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function() { /**第一种写法*/ /*$("#divId").mouseover(function() { $(this).html("鼠标进入"); }).mouseout(function() { $(this).html("鼠标离开"); })*/ /**第二种写法*/ $("#divId").hover(function() { $(this).html("鼠标进入"); }, function() { $(this).html("鼠标离开"); }) var i = 0; $("#bId").click(function() { i++; if(i % 2 == 0) { alert("222"); } else { alert("111"); } }) /*$("#bId").toggle(function() { //浏览器有可能会不兼容 alert("111"); }, function() { alert("222") })*/ }) </script> </head> <body> <input type="button" id="bId" value="点击查看" /><br> <div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div> </body> </html>