jquery事件函数

jquery事件函数

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

文档加载函数

//相当于在body中使用οnlοad=
//在页面完全加载后才会调用
$(document).ready(function() {
   //函数内容 
});

点击事件函数

$("button").click(function() {..some code... } ); //在buttion中添加onclick事件

隐藏元素函数

$("#p1").hide(); //将id=p1的元素隐藏

失去焦点函数

$("selector").blur(function() {...some code...}); //添加onblur事件

数据改变触发函数

$("selector").change();

鼠标双击事件函数

$("selector").dblclick();

其他简单函数

类似以上简单事件函数还有很多, 例如

focus(); //焦点函数
keydown(); //键盘按键按下事件
keypress(); //键盘按键按下再弹起事件
keyup(); //键盘按键弹起事件
mousedown(); //鼠标按下事件
mouseenter(); //鼠标进入元素事件, 当鼠标进入被选元素的子元素时候, 不会起作用
mouseleave(); //鼠标离开元素事件, 当鼠标离开被选元素的子元素时候, 不会起作用
mousemove(); //鼠标在元素中移动事件
mouseover(); //鼠标进入元素事件, 当鼠标进入被选元素的子元素时候, 也会起作用
mouseout(); //鼠标离开元素事件, 当鼠标离开被选元素的子元素时候, 也会起作用
mouseup(); //鼠标按下之后弹起事件
resize(); //当窗口调整大小发生时候, 触发resize事件
scroll(); //当用户滚动指定的元素时，会发生 scroll 事件
select(); //当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
submit(); //提交表单时候, 会触发submit事件
$("selector").error(); //当元素遇到错误（没有正确载入）时，发生 error 事件
load(); //指定的元素（及子元素）已加载时，会发生 load() 事件。
unload(); //用户离开页面时候, 会发生unload方法

元素绑定事件方法

$("selector").bind(functionName, function);// 为指定元素绑定指定事件方法, 动态添加的元素没有效果
$("selector").live(childSelector, functionName, function); // 为指定元素绑定指定事件方法, 动态添加的元素也有效果
$("selector").one(functionName, function); //为指定元素绑定事件, 但是事件只能使用一次
$("selector").unbind(); //移除通过bind添加的方法
$("selector").die(); //此方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序

子元素事件附加方法

$("selector").delegate(childSelector, functionName, function);
// childSelector 是selector的子元素
// functionName 是为childSelector添加的事件名称
/*
	为子元素添加相应的事件绑定, 如果是动态添加的子元素, 也可绑定相应的事件方法
*/
//例如: 
$("div").delegate("$('p')", "click", function() {
    $(this).css("color", "red");
}); //此方法绑定了div中所有的p元素, 点击之后color变成红色
// 于此对应, 有undelegate()方法

事件轮转方法

$("selector").toggle(function1, function2, ...,functionn); //可绑定一个或多个方法, 使其中的方法轮转执行
// 例如
$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
); //此方法会使body变换颜色, 每执行一次toggle方法, 变一次颜色. 第一次green, 第二次red....

事件激发方法

$("selector").trigger(event);//激发selector的event事件
$("button").click(function(){
  $("input").trigger("select");
}); // 此方法执行时候, 会激发input的select方法

事件属性

以下属性执行时候, 需要为方法传递一个event事件参数

示例可查看w3c:

event.pageX, event.pageY //相对于文档左边缘和上边缘的鼠标指针位置

event.preventDefault(); //阻止事件的默认行为, 例如阻止submit事件默认提交行为
$("a").click(function(event){
  event.preventDefault();
});

event.result(); //事件返回的结果
$("button").click(function(e) {
  $("p").html(e.result);
});

event.target(); //返回该事件触发的DOM元素
$("p, button, h1, h2").click(function(event){
  $("div").html("Triggered by a " + event.target.nodeName + " element.");
});

event.timeStamp// 该属性返回从1970年1月1日到目前的时间戳
$("button").click(function(event){
  $("span")html(event.timeStamp);
});

event.type //返回触发的事件类型
$("p").bind('click dblclick mouseover mouseout',function(event){
  $("div").html("Event: " + event.type);
});

event.which //返回按下按键的按键序号, 也就是按下了哪个键

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
使用noConflict()方法来为$改变名字

var jq = jQuery.noConflict(); //将$改为jq