1 dom事件
2 单击事件：click
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <p>点击按钮隐藏这个段落</p> <button>隐藏</button> </body> </html>
3 双击事件：dblclick
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); }); </script> </head> <body> <p>双击鼠标左键隐藏这个段落</p> </body> </html>
4 鼠标移入移出：mouseenter、mouseleave
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ document.getElementById("p1").innerHTML = "<span style='color:red'>鼠标移入p标签</span>"; }); $("#p1").mouseleave(function(){ document.getElementById("p1").innerHTML = "<span style='color:blue'>鼠标移出p标签</span>"; }); }); </script> </head> <body> <p id="p1">鼠标移入移出有变化。</p> </body> </html>
5 焦点：focus、blur
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); }); </script> </head> <body> Name: <input type="text" name="fullname"><br> Email: <input type="text" name="email"> </body> </html>
6 悬停：
hover
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } ) }); </script> </head> <body> <p id="p1">这是一个段落。</p> </body> </html>
