jQuery----鼠标移动、点击案例
单击隐藏：
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('您的鼠标移到了 >);
10 });
11 });
12 </script>
13 </head>
14 <body>
15 <p >鼠标指针进入此处，会看到弹窗。</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 >这是一个段落。</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 >这是一个段落</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 >这是一个段落。</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 >这是一个段落。</p>
21
22 </body>
23 </html>