jQuery----鼠標移動、點擊案例

本文轉載自查看原文 2017-04-03 14:23 2052

單擊隱藏：

 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery 實現鼠標點擊div盒子移動功能 jquery----分頁插件 js鼠標移動事件案例 javascript -- (點擊div，隨鼠標移動) jQuery 鼠標拖拽移動窗口 JS 圖片跟隨鼠標移動案例 jquery-實例:讓元素隨着鼠標移動而移動-- 博客裝飾---鼠標移動、點擊效果 C# 模擬鼠標移動和點擊 jQuery----獲取兄弟元素的方法