當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 事件介绍

發布時間：2024/9/30 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 事件時運行的函數;

-------------------------------------------------------------------- 注：如果你對python感興趣，我這有個學習Python基地，里面有很多學習資料，感興趣的+Q群：895817687 -------------------------------------------------------------------- 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 中的核心函數。

總結

以上是生活随笔為你收集整理的jQuery 事件介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。