jQuery 事件介紹_ZenDei技術網路在線

jQuery 事件介紹

-Advertisement-

事件處理程式指的是當 HTML 中發生某些事件時所調用的方法，是 jQuery 中的核心函數。 ...

　　什麼是事件?頁面對不同訪問者的響應叫做事件。事件處理程式指的是當 HTML 中發生某些事件時所調用的方法。

　　常用的時間主要有以下幾種：

　　click()事件：click() 方法是當按鈕點擊事件被觸發時會調用一個函數。該函數在用戶點擊 HTML 元素時執行;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>click()事件</title>
 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 7       <script>
 8         $(document).ready(function(){
 9           $("p").click(function(){
10             $(this).hide();
11           });
12         });
13        </script>
14  </head>
15 <body>
16     <p>如果你點我，我就會消失。</p>
17     <p>點我消失!</p>
18     <p>點我也消失!</p>
19 </body>
20 </html>

　　dblclick()事件：當雙擊元素時，會發生 dblclick 事件。dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>dblclick()事件</title>
 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
 7 </script>
 8 <script>
 9         $(document).ready(function(){
10           $("p").dblclick(function(){
11             $(this).hide();
12           });
13         });
14 </script>
15 </head>
16 <body>
17         <p>雙擊滑鼠左鍵的，我就消失。</p>
18         <p>雙擊我消失！</p>
19         <p>雙擊我也消失！</p>
20 </body>
21 </html>

　　mouseenter()事件：當滑鼠指針穿過元素時，會發生的事件。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>mouseenter()事件</title>
 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 7  <script>
 8         $(document).ready(function(){
 9           $("#p1").mouseenter(function(){
10             alert('您的滑鼠移到了 id="p1" 的元素上!');
11           });
12         });
13  </script>
14 </head>
15 <body>
16    <p id="p1">滑鼠指針進入此處，會看到彈窗。</p>
17 </body>
18 </html>

　　mouseleave()事件：當滑鼠指針離開元素時，會發生的事件。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>mouseleave()事件</title>
 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9           $("#p1").mouseleave(function(){
10             alert("再見，您的滑鼠離開了該段落。");
11           });
12         });
13     </script>
14 </head>
15 <body>
16 <p id="p1">這是一個段落。</p>
17 </body>
18 </html>

　　mousedown()事件：當滑鼠指針移動到元素上方，並按下滑鼠按鍵時，會發生的事件。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>mousedown()事件</title>
 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9           $("#p1").mousedown(function(){
10             alert("滑鼠在該段落上按下！");
11           });
12         });
13     </script>
14 </head>
15 <body>
16 <p id="p1">這是一個段落</p>
17 </body>
18 </html>

　　mouseup()事件：當在元素上鬆開滑鼠按鈕時，會發生的事件。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>mouseup()事件</title>
 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9           $("#p1").mouseup(function(){
10             alert("滑鼠在段落上鬆開。");
11           });
12         });
13     </script>
14 </head>
15 <body>
16 <p id="p1">這是一個段落。</p>
17 </body>
18 </html>

　　hover()事件：用於模擬游標懸停事件。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"><title>hover()事件</title>
 5 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
 6 </script>
 7     <script>
 8         $(document).ready(function(){
 9             $("#p1").hover(
10                 function(){
11                     alert("你進入了 p1!");
12                 },
13                 function(){
14                     alert("拜拜! 現在你離開了 p1!");
15                 }
16             )
17         });
18     </script>
19 </head>
20 <body>
21 <p id="p1">這是一個段落。</p>
22 </body>
23 </html>

　　focus()事件：當元素獲得焦點時，發生的事件。當通過滑鼠點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>focus()事件</title>
 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9           $("input").focus(function(){
10             $(this).css("background-color","#cccccc");
11           });
12           $("input").blur(function(){
13             $(this).css("background-color","#ffffff");
14           });
15         });
16     </script>
17 </head>
18 <body>
19 Name: <input type="text" name="fullname"><br>
20 Email: <input type="text" name="email">
21 </body>
22 </html>

　　blur()事件：當元素失去焦點時，發生 blur 事件。blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>blur()事件</title>
 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9           $("input").focus(function(){
10             $(this).css("background-color","#cccccc");
11           });
12           $("input").blur(function(){
13             $(this).css("background-color","#ffffff");
14           });
15         });
16     </script>
17 </head>
18 <body>
19 Name: <input type="text" name="fullname"><br>
20 Email: <input type="text" name="email">
21 </body>
22 </html>

　　事件處理程式指的是當 HTML 中發生某些事件時所調用的方法，是 jQuery 中的核心函數。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

關於swiper 4的coverflowEffect（3d）

輪播效果： HTML: JS: ...
簡述JavaScript模塊化編程（一）

在早期編寫JavaScript時，我們只需在<script>標簽內寫入JavaScript的代碼就可以滿足我們對頁面交互的需要了。但隨著時間的推移，時代的發展，原本的那種簡單粗暴的編寫方式所帶來的諸如邏輯混亂，頁面複雜，可維護性差，全局變數暴露等問題接踵而至，前輩們為瞭解決這些問題提出了很種的解決方 ...
前端筆記之React（七）redux-saga&Dva&路由

一、redux-saga解決非同步 redux-thunk 和 redux-saga 使用redux它們是必選的，二選一，它們兩個都可以很好的實現一些複雜情況下redux，本質都是為瞭解決非同步action而生，使redux保持完整性，不至於太過混亂。redux-saga 是一個用於管理Redux 應用 ...
Vue開發——實現吸頂效果

因為項目需求，最近開始轉到微信公眾號開發，接觸到了Vue框架，這個效果的實現雖說是基於Vue框架下實現的，但是同樣也可以借鑒到其他地方，原理都是一樣的。進入正題，先看下效果圖：其實js做這個效果還是挺簡單的，因為在css中我們可以設置一個元素的position: fixed;，這樣它就可以固定在 ...
使用jquery moblie框架搭建一個手機版博客園

本例結合我的前兩篇博客，使用jquery moblie框架搭建了一個簡單的手機版博客園；項目地址為http://blog.mdzz.tv:1011，這裡我僅爬取了博客園首頁的鏈接，點擊每一項即跳轉到博客園相應的頁面，源碼已放在github上了，地址https://github.com/guasses... ...
ECharts模擬百度遷徙實例

本實例原始信息：作者： "anix" 演示地址： "Echarts模擬遷徙" 源碼地址： "GitHub ananix qianxi" 前言 “百度地圖春節人口遷徙大數據”（簡稱“百度遷徙”）是百度在春運期間推出的技術品牌項目，為業界首個以“人群遷徙”為主題的大數據可視化項目。準備開發工具由 ...
文件導入功能的前端實現

1.HTML部分 accept屬性可以設置要上傳文件的格式 2.js部分介面部分代碼部分 ...
js截取字元串相關的知識點

截取字元串中的數字 1、使用parseInt() 2、使用正則截取字元串 1、使用split() 2、使用join() 3、使用substring() 4、使用indexOf() 5、使用substr() ...