首页 > 代码库 > jQuery----鼠标移动、点击案例

jQuery----鼠标移动、点击案例

2024-09-12 04:31:24   213人阅读

单击隐藏：

 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>

 

jQuery----鼠标移动、点击案例


联系
我们