参考手册
jQuery 教程
jQuery 选择器
jQuery 隐藏与显示

jQuery 事件方法

jQuery 是为响应 HTML 页面中的事件而定制的。

什么是事件?

一个网页可以响应的所有不同访问者的行为都被称为事件。

一个事件代表某件事发生的确切时刻。

实例:

  • 在元素上移动鼠标
  • 选择单选按钮
  • 点击一个元素

术语 "触发/被触发" 通常用于事件。实例："按键事件在您按键时被触发"。

下面是一些常见的 DOM 事件:

鼠标事件键盘事件表单事件文档/窗体事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleave blurunload

事件的 jQuery 语法

在 jQuery 中，大多数 DOM 事件都有一个对应的 jQuery 方法。

要将单击事件分配给页面上的所有段落，可以执行以下操作:

  1. $("p").click();

下一步是定义事件触发时应该发生什么。必须向事件传递函数:

  1. $("p").click(function(){
  2.   // 这里放操作代码!!
  3. });
运行一下

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法让我们可以在文档完全加载时执行函数。jQuery 语法 一章已经解释了这个事件。

click()

click() 方法将事件处理程序函数附加到 HTML 元素。

该函数在用户单击 HTML 元素时执行。

下面的例子是这样的：当点击事件在 <p> 元素上触发时；隐藏当前 <p> 元素:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("p").click(function(){
  8.     $(this).hide();
  9.   });
  10. });
  11. </script>
  12. </head>
  13. <body>
  15. <p>点击这里，这里会消失</p>
  16. <p>点击这里也是!</p>
  18. </body>
  19. </html>
运行一下
dblclick()

dblclick() 方法将事件处理程序函数附加到 HTML 元素。

该函数在用户双击 HTML 元素时执行:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("p").dblclick(function(){
  8.     $(this).hide();
  9.   });
  10. });
  11. </script>
  12. </head>
  13. <body>
  15. <p>双击这里，这里会消失</p>
  16. <p>双击这里也是!</p>
  18. </body>
  19. </html>
运行一下
mouseenter()

mouseenter() 方法将事件处理程序函数附加到 HTML 元素。

该函数在鼠标指针进入 HTML 元素时执行:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("#p1").mouseenter(function(){
  8.     alert("你已进入 p1!");
  9.   });
  10. });
  11. </script>
  12. </head>
  13. <body>
  15. <p id="p1">鼠标进入这个段落</p>
  17. </body>
  18. </html>
运行一下
mouseleave()

mouseleave() 方法将事件处理程序函数附加到 HTML 元素。

该函数在鼠标指针离开 HTML 元素时执行:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("#p1").mouseleave(function(){
  8.     alert("拜! 你已经离开 p1!");
  9.   });
  10. });
  11. </script>
  12. </head>
  13. <body>
  15. <p id="p1">这是段落 1</p>
  17. </body>
  18. </html>
运行一下
mousedown()

mousedown() 方法将事件处理程序函数附加到 HTML 元素。

当鼠标位于 HTML 元素上时，按下鼠标左键、中键或右键，就会执行该函数:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("#p1").mousedown(function(){
  8.     alert("在 p1 上点击鼠标!");
  9.   });
  10. });
  11. </script>
  12. </head>
  13. <body>
  15. <p id="p1">这是一个段落</p>
  17. </body>
  18. </html>
运行一下
mouseup()

mouseup() 方法将事件处理程序函数附加到HTML元素。

当鼠标位于 HTML 元素上时，释放鼠标左键、中键或右键，就会执行该函数:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("#p1").mouseup(function(){
  8.     alert("在 p1 上释放鼠标左键!");
  9.   });
  10. });
  11. </script>
  12. </head>
  13. <body>
  15. <p id="p1">这是一个段落</p>
  17. </body>
  18. </html>
运行一下
hover()

hover() 方法相当于两个函数， mouseenter() 和 mouseleave() 方法的组合。

第一个函数在鼠标进入 HTML 元素时执行，第二个函数在鼠标离开 HTML 元素时执行:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("#p1").hover(function(){
  8.     alert("你已进入 p1!");
  9.   },
  10.   function(){
  11.     alert("拜! 你已经离开 p1!");
  12.   });
  13. });
  14. </script>
  15. </head>
  16. <body>
  18. <p id="p1">这是一个段落</p>
  20. </body>
  21. </html>
运行一下

focus()

focus() 方法将事件处理程序函数附加到 HTML 单字段。

该函数在表单字段获得焦点时执行:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("input").focus(function(){
  8.     $(this).css("background-color", "yellow");
  9.   });
  10.   $("input").blur(function(){
  11.     $(this).css("background-color", "green");
  12.   });
  13. });
  14. </script>
  15. </head>
  16. <body>
  18. Name: <input type="text" name="fullname"><br>
  19. Email: <input type="text" name="email">
  21. </body>
  22. </html>
运行一下
运行一下
blur()

blur() 方法将事件处理程序函数附加到 HTML 表单字段。

该函数在表单字段失去焦点时执行:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("input").focus(function(){
  8.     $(this).css("background-color", "yellow");
  9.   });
  10.   $("input").blur(function(){
  11.     $(this).css("background-color", "green");
  12.   });
  13. });
  14. </script>
  15. </head>
  16. <body>
  18. Name: <input type="text" name="fullname"><br>
  19. Email: <input type="text" name="email">
  21. </body>
  22. </html>
运行一下
运行一下

on() 方法

on() 方法为所选元素附加一个或多个事件处理程序。

将单击事件附加到 <p> 元素:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("p").on("click", function(){
  8.     $(this).hide();
  9.   });
  10. });
  11. </script>
  12. </head>
  13. <body>
  15. <p>如果你点击这里，这里将消失</p>
  16. <p>点击这里也是!</p>
  18. </body>
  19. </html>
运行一下

将多个事件处理程序附加到 <p> 元素:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("p").on({
  8.     mouseenter: function(){
  9.       $(this).css("background-color", "lightgray");
  10.     },
  11.     mouseleave: function(){
  12.       $(this).css("background-color", "lightblue");
  13.     },
  14.     click: function(){
  15.       $(this).css("background-color", "yellow");
  16.     }
  17.   });
  18. });
  19. </script>
  20. </head>
  21. <body>
  23. <p>在该段落上单击或移动鼠标指针</p>
  25. </body>
  26. </html>
运行一下

jQuery 事件方法

有关完整的 jQuery 事件参考，请转到本站的 jQuery 事件 参考。

jQuery 选择器
jQuery 隐藏与显示

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML