jQuery 入门教程(4): Events分析

符号 阅读:244 2021-04-01 10:02:02 评论:0


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

下面为常见的DOM事件:

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

jQuery事件处理的语法

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

[javascript] view plain copy print ?
  1. $("p").click();  
$("p").click(); 


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

[javascript] view plain copy print ?
  1. $("p").click(function(){  
  2.   // action goes here!!  
  3. });  
$("p").click(function(){ 
  // action goes here!! 
}); 


 

常见的jQuery事件

$(document).ready()

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

click()

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

[javascript] view plain copy print ?
  1. $("p").click(function(){  
  2.   $(this).hide();  
  3. });  
$("p").click(function(){ 
  $(this).hide(); 
}); 

dblclick()

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

[javascript] view plain copy print ?
  1. $("p").dblclick(function(){  
  2.   $(this).hide();  
  3. });  
$("p").dblclick(function(){ 
  $(this).hide(); 
}); 

mouseenter()

在鼠标进入某个HTML元素时触发,例如:

[javascript] view plain copy print ?
  1. $("#p1").mouseenter(function(){  
  2.   alert("You entered p1!");  
  3. });  
$("#p1").mouseenter(function(){ 
  alert("You entered p1!"); 
}); 

mouseleave()

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

[javascript] view plain copy print ?
  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 copy print ?
  1. $("#p1").mousedown(function(){  
  2.   alert("Mouse down over p1!");  
  3. });  
$("#p1").mousedown(function(){ 
  alert("Mouse down over p1!"); 
}); 

mouseup()

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

[javascript] view plain copy print ?
  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 copy print ?
  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 copy print ?
  1. $("input").focus(function(){  
  2.   $(this).css("background-color","#cccccc");  
  3. });  
$("input").focus(function(){ 
  $(this).css("background-color","#cccccc"); 
}); 

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

[javascript] view plain copy print ?
  1. $("input").blur(function(){  
  2.   $(this).css("background-color","#ffffff");  
  3. });  
$("input").blur(function(){ 
  $(this).css("background-color","#ffffff"); 
}); 




声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号