jQuery-事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq</title> <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <style> </style> </head> <body> <script> $(document).ready(function(){ $("input:first").focus(function(){ alert("获得焦点"); }); $("input:first").blur(function(){ alert("失去焦点"); }); $("input:first").change(function(){ alert("值被改变") });// $("img").error(function(){ //alert("图片未识") });// $("p:first").click(function(){ alert("单击事件") });// $("p:eq(1)").dblclick(function(){ alert("双击事件") });// $("div").focusin(function(){ $("div").css("background-color","blue"); });//可在父级获得子级的焦点 $("div").focusout(function(){ $("div").css("background-color","#fff") });//可在父级失去子级的焦点 $("body").keydown(function(){ $("h2:first").slideToggle(20000); }); $("body").keypress(function(){ $("h2:eq(1)").slideToggle(20000); }); $("body").keyup(function(){ $("h2:last").slideToggle(20000); }); }); </script>
<img src="z"/> <br /> <div style="border:1px solid black;"> <input type="text" value="获得，失去，改变" /> </div> <p>单击</p> <p>双击</p> <h2>按下键盘任意键过程中滑入滑出（看谁先执行）</h2> <h2>按下键盘任意键滑入滑出</h2> <h2>按下键盘任意键松开后滑入滑出</h2> </body> </html>
事件2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq</title> <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <style> </style> </head> <body> <script> $(document).ready(function(){ $("p:first").mousedown(function(){ alert("触发mousedown"); }); $("div:first").mouseenter(function(){ $("div:first").css("background-color","blue"); }); $("div:first").mouseleave(function(){ $("div:first").css("background-color","#fff"); }); $("div:eq(1)").mousemove(function(){ $("div:eq(1)").css("background-color","yellow"); }); $("div:eq(1)").mouseout(function(){ $("div:eq(1)").css("background-color","#fff"); }); $("p:eq(1)").mouseover(function(){ $("p:eq(1)").css("background-color","red"); }); $("p:eq(1)").mouseup(function(){ $("p:eq(1)").css("background-color","#fff"); }); $("div").focusout(function(){ $("div").css("background-color","#fff") }); $(window).resize(function(){ alert("Stop it!"); }); $("div:eq(2)").scroll(function(){ $("div:eq(2)").css("background-color","red"); }); $("input:first").select(function(){ $("input:first").after("被选中了"); }); $("form").submit(function(){ alert("提交"); }); $(window).unload(function(){ alert("Bye now!"); });//离开页面会警告 }); </script> <p>移至上方并按下</p> <div style="border:1px solid black;width:100px;height:100px;">穿过，离开</div> <br /> <div style="border:1px solid black;width:100px;height:100px;">元素中移动，移开</div> <p style="border:1px solid black;width:100px;height:100px;">鼠标指针位于上方，放松鼠标</p> <p>当改变窗口大小时会触发resize</p> <div style="border:1px solid black;overflow:scroll;width:100px;height:100px;"> <p>当滚动时触发scroll</p> <p>a</p> <p>w</p> <p>s</p> </div> <input type="text" value="当被选中时触发select"> <form> 账号：<input type="text"> <br /> 密码：<input type="password"> <br /> <span>（提交时会警告）</span><input type="submit" value="提交"> </form> </body> </html>
