首页 > 安全资讯 >

jQuery 入门教程(4): Events

13-03-11

学习了jQuery的选择器,就可以针对选择的HMTL标记或是元素添加事件处理,事件包括按键,鼠标,单击按钮等。下面为常见的DOM事件:鼠标事件 键盘事件 表单事件 文档/窗口事件click keypress submit loaddbl...

学习了jQuery的选择器,就可以针对选择的HMTL标记或是元素添加事件处理,事件包括按键,鼠标,单击按钮等。
 
下面为常见的DOM事件:
 
鼠标事件 键盘事件 表单事件 文档/窗口事件 
click keypress submit load 
dblclick keydown change resize 
mouseenter keyup focus scroll 
mouseleave   blur unload 
 
jQuery事件处理的语法
在jQuery中,大部分的DOM事件都有对应的jQuery事件,比如为所有<p>标记添加单击事件处理:
 
[javascript]  
$("p").click();  
 
$("p").click();
 
下一步添加单击事件的处理函数,你必须传一个回调函数给单击事件:
 
[javascript] 
$("p").click(function(){  
  // action goes here!!   
});  
 
$("p").click(function(){
  // action goes here!!
});
 
 
 
常见的jQuery事件
$(document).ready()
 
文档准备好事件,在文档完全载入后执行。
 
click()
 
用户单击某个HTML元素后调用,比如下面的例子中用户点击<p>标记部分后隐藏该标记的内容:
 
[javascript]  
$("p").click(function(){  
  $(this).hide();  
});  
 
$("p").click(function(){
  $(this).hide();
});
dblclick()
 
双击某个HTML标记时调用,比如下面代码在双击<p>元素时隐藏其内容:
 
[javascript]  
$("p").dblclick(function(){  
  $(this).hide();  
});  
 
$("p").dblclick(function(){
  $(this).hide();
});
mouseenter()
 
在鼠标进入某个HTML元素时触发,例如:
 
[javascript]  
$("#p1").mouseenter(function(){  
  alert("You entered p1!");  
});  
 
$("#p1").mouseenter(function(){
  alert("You entered p1!");
});
mouseleave()
 
在鼠标进入离开某个HTML元素时触发,例如:
 
[javascript] 
$("#p1").mouseleave(function(){  
  alert("Bye! You now leave p1!");  
});  
 
$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});
mousedown()
在按下鼠标左键时触发,例如:
 
[javascript] 
$("#p1").mousedown(function(){  
  alert("Mouse down over p1!");  
});  
 
$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});
mouseup()
 
在某个元素上释放鼠标左键时触发,例如:
 
[javascript]  
$("#p1").mouseup(function(){  
  alert("Mouse up over p1!");  
});  
 
$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});
hover()
在鼠标指针放在某个元素之上时触发,为mouseenter和mouseleave的组合,它的第一个回调函数中鼠标进入时调用,第二个回调函数在鼠标离开时执行,例如:
 
[javascript] 
$("#p1").hover(function(){  
  alert("You entered p1!");  
  },  
  function(){  
  alert("Bye! You now leave p1!");  
});  
 
$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});
focus()
当某个表单输入域获得焦点时调用,例如:
 
[javascript]  
$("input").focus(function(){  
  $(this).css("background-color","#cccccc");  
});  
 
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
blur()
当某个表单输入域失去焦点时调用,例如:
 
[javascript]  
$("input").blur(function(){  
  $(this).css("background-color","#ffffff");  
});  
 
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});
 
 
 
 
 
 
 
 
 
 
相关文章
最新文章
热点推荐