码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-04-03 14:32:50      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:hover   jquery   html   sed   doctype   leave   his   color   案例   

单击隐藏:

 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----鼠标移动、点击案例

标签:hover   jquery   html   sed   doctype   leave   his   color   案例   

原文地址:http://www.cnblogs.com/tidhy/p/6661882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!