jQuery 入门教程(4): Events

墨蓝 2024-02-17 14:10 38阅读 0赞

学习了jQuery的选择器，就可以针对选择的HMTL标记或是元素添加事件处理，事件包括按键，鼠标，单击按钮等。

下面为常见的DOM事件：

<table style=""> 
 <tbody style="font:inherit; margin:0px; padding:0px; border:0px currentColor; vertical-align:baseline"> 
  <tr style="font:inherit; margin:0px; padding:0px; border:0px currentColor; vertical-align:baseline"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> <strong style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; font-weight:bold; vertical-align:baseline">鼠标事件</strong></td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> <strong style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; font-weight:bold; vertical-align:baseline">键盘事件</strong></td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> <strong style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; font-weight:bold; vertical-align:baseline">表单事件</strong></td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> <strong style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; font-weight:bold; vertical-align:baseline">文档/窗口事件</strong></td> 
  </tr> 
  <tr style="font:inherit; margin:0px; padding:0px; border:0px currentColor; vertical-align:baseline; background-color:rgb(249,249,249)"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> click</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> keypress</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> submit</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> load</td> 
  </tr> 
  <tr style="font:inherit; margin:0px; padding:0px; border:0px currentColor; vertical-align:baseline"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> dblclick</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> keydown</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> change</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> resize</td> 
  </tr> 
  <tr style="font:inherit; margin:0px; padding:0px; border:0px currentColor; vertical-align:baseline; background-color:rgb(249,249,249)"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> mouseenter</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> keyup</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> focus</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> scroll</td> 
  </tr> 
  <tr style="font:inherit; margin:0px; padding:0px; border:0px currentColor; vertical-align:baseline"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> mouseleave</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> &nbsp;</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> blur</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; text-align:left; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-size:12px; font-style:inherit; font-variant:inherit; font-weight:inherit; vertical-align:top"> unload</td> 
  </tr> 
 </tbody> 
</table>

### jQuery事件处理的语法 ###

在jQuery中，大部分的DOM事件都有对应的jQuery事件，比如为所有<p>标记添加单击事件处理：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

$("p").click();

下一步添加单击事件的处理函数，你必须传一个回调函数给单击事件：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("p").click(function()\{
2.  // action goes here!!
3.  \});

$("p").click(function(){
      // action goes here!!
    });

### 常见的jQuery事件 ###

**$(document).ready()**

文档准备好事件，在文档完全载入后执行。

**click()**

用户单击某个HTML元素后调用，比如下面的例子中用户点击<p>标记部分后隐藏该标记的内容：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("p").click(function()\{
2.  $(this).hide();
3.  \});

$("p").click(function(){
      $(this).hide();
    });

**dblclick()**

双击某个HTML标记时调用，比如下面代码在双击<p>元素时隐藏其内容：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("p").dblclick(function()\{
2.  $(this).hide();
3.  \});

$("p").dblclick(function(){
      $(this).hide();
    });

**mouseenter()**

在鼠标进入某个HTML元素时触发，例如：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("\#p1").mouseenter(function()\{
2.  alert("You entered p1!");
3.  \});

$("#p1").mouseenter(function(){
      alert("You entered p1!");
    });

**mouseleave()**

在鼠标进入离开某个HTML元素时触发，例如：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("\#p1").mouseleave(function()\{
2.  alert("Bye! You now leave p1!");
3.  \});

$("#p1").mouseleave(function(){
      alert("Bye! You now leave p1!");
    });

**mousedown()**  
在按下鼠标左键时触发，例如：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("\#p1").mousedown(function()\{
2.  alert("Mouse down over p1!");
3.  \});

$("#p1").mousedown(function(){
      alert("Mouse down over p1!");
    });

**mouseup()**

在某个元素上释放鼠标左键时触发，例如：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("\#p1").mouseup(function()\{
2.  alert("Mouse up over p1!");
3.  \});

$("#p1").mouseup(function(){
      alert("Mouse up over p1!");
    });

**hover()**  
在鼠标指针放在某个元素之上时触发，为mouseenter和mouseleave的组合，它的第一个回调函数中鼠标进入时调用，第二个回调函数在鼠标离开时执行，例如：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("\#p1").hover(function()\{
2.  alert("You entered p1!");
3.  \},
4.  function()\{
5.  alert("Bye! You now leave p1!");
6.  \});

$("#p1").hover(function(){
      alert("You entered p1!");
      },
      function(){
      alert("Bye! You now leave p1!");
    });

**focus()**  
当某个表单输入域获得焦点时调用,例如：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("input").focus(function()\{
2.  $(this).css("background-color","\#cccccc");
3.  \});

$("input").focus(function(){
      $(this).css("background-color","#cccccc");
    });

**blur()**  
当某个表单输入域失去焦点时调用,例如：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("input").blur(function()\{
2.  $(this).css("background-color","\#ffffff");
3.  \});

$("input").blur(function(){
      $(this).css("background-color","#ffffff");
    });

[view plain]: http://blog.csdn.net/mapdigit/article/details/8644529#

jQuery 入门教程(4): Events

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关极客技术专题【007期】：jQuery初学者入门 - jQuery Event

相关 jQuery 入门教程(4): Events

相关 jQuery 入门教程(1): 概述

相关 jQuery 入门教程(21): jQuery UI 示例

相关 jQuery 入门教程(19): jQuery UI 概述

相关 javascript jquery 入门教程

相关 jQuery.event自定义事件机制-jQuery.event.special范例

相关三：Jquery-event

相关 jQuery教程——jQuery的快速入门

相关 Jquery入门指南教程