单击隐藏：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>点击按钮隐藏</title> 6 <script> 7 $(document).ready(function(){ 8 $("button").click(function(){ 9 $(this).hide(); 10 }); 11 }); 12 </script> 13 </head> 14 <!-- 点击按钮之后，按钮隐藏 --> 15 <body> 16 <button>点我</button> 17 </body> 18 </html>
双击隐藏：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>双击点击消隐藏</title> 6 <script> 7 $(document).ready(function(){ 8 $("button").dblclick(function(){ 9 $(this).hide(); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <button>双击点我隐藏</button> 16 <!-- 双击按钮之后将隐藏 --> 17 </body> 18 </html>
鼠标移进事件：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鼠标移进事件</title> 6 <script> 7 $(document).ready(function(){ 8 $("#p1").mouseenter(function(){ 9 alert('您的鼠标移到了 id="p1" 的元素上!'); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <p id="p1">鼠标指针进入此处，会看到弹窗。</p> 16 <!-- 鼠标移进标签，弹出对话框 --> 17 </body> 18 </html>
鼠标移出案例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鼠标移出案例</title> 6 <script> 7 $(document).ready(function(){ 8 $("#p1").mouseleave(function(){ 9 alert("再见，您的鼠标离开了该段落。"); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <p id="p1">这是一个段落。</p> 16 <!-- 移出弹出对话框--> 17 </body> 18 </html>
在段落按下案例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>段落按下</title> 6 <script> 7 $(document).ready(function(){ 8 $("#p1").mousedown(function(){ 9 alert("鼠标在该段落上按下！"); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 16 <p id="p1">这是一个段落</p> 17 <!-- 在段落按下弹出对话框--> 18 </body> 19 </html>
鼠标在段落松开：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>在段落松开</title> 6 <script> 7 $(document).ready(function(){ 8 $("#p1").mouseup(function(){ 9 alert("鼠标在段落上松开。"); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <p id="p1">这是一个段落。</p> 16 </body> 17 </html>
鼠标进入和离开案例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script> 6 $(document).ready(function(){ 7 $("#p1").hover( 8 function(){ 9 alert("你进入了 p1!"); 10 }, 11 function(){ 12 alert("拜拜! 现在你离开了 p1!"); 13 } 14 ) 15 }); 16 </script> 17 </head> 18 <body> 19 20 <p id="p1">这是一个段落。</p> 21 22 </body> 23 </html>