$(document).ready(function)表示当 DOM（文档对象模型） 已经加载完毕，会发生 ready 函数中的。

格式：

$(document).ready(function(){
	//当DOM加载完毕执行的代码
    ......
})

由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。

例子：

//当页面加载完毕后，弹出ready 
$(document).ready(function(){
	alert("ready")   
});

click事件会触发元素的点击事件，或者把一个执行函数绑定到元素上。

(1) 触发click事件

格式：

$(selector).click(fun)

例子：

//点击id为button的元素，触发该元素已绑定的事件				
$("#button").click()；

 

(2) 绑定click触发后执行函数

格式：

$(selector).click(function(){
	//点击元素后执行的代码
})

例子：

//点击id为button的元素隐藏所有图像					
$("#button").click(function(){
	$("img").hide();
})

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

格式：

$(selector).live(event,data,function(){
    //元素附加事件触发后执行的代码
})

其中event为元素附加的事件。data为可选，规定传递到该函数的额外数据。function为当事件发生时运行的函数。

例子：

//点击id为button的元素隐藏所有图像，包括页面加载完成后创建的新的图像
$("#button").live("click",function(){
    $("img").hide();
});

当指定的元素（及子元素）加载完成时，触发 load() 事件。

该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。

格式：

$(selector).load(function(){
	//元素加载完成后执行的代码
})

例子：

//当所有图片都加载完成后，弹出Image loaded
$("img").load(function(){
	alert("Image loaded");  
});

当鼠标指针位于元素上方时，包括子元素，触发 mouseover 事件。

当鼠标指针从元素上移开时，包括子元素，触发 mouseout 事件。

(1)触发mouseover 和mouseout事件。

格式：

$(selector).mouseover()
$(selector).mouseout()

例子：

//鼠标滑过p元素时，触发p元素已绑定的事件
$("p").mouseover();

//鼠标滑出p元素时，触发p元素已绑定的事件
$("p").mouseout();

 

(2) 绑定mouseover和mouseout触发后执行函数

格式：

$(selector).mouseover(function(){
	//鼠标在元素或者元素子元素上方时，执行的代码
})

$(selector).mouseout(function(){
	//鼠标移出元素或者元素子元素上方时，执行的代码
})

例子：

//当鼠标滑过p元素上方时，p元素的背景变成黄色
$("p").mouseover(function(){
	$("p").css("background-color","yellow"); 
});

//当鼠标滑出p元素上方时，p元素的背景变成红色
$("p").mouseout(function(){
	$("p").css("background-color","#red");
});

当鼠标指针穿过元素时，会触发 mouseenter 事件。

当鼠标指针离开元素时，会触发 mouseleave 事件。

(1) 触发mouseenter和mouseleave事件

格式：

$(selector).mouseenter()
$(selector).mouseleave()

例子：

//鼠标滑过p元素时，触发p元素已绑定的事件
$("p").mouseenter(); 

//鼠标滑出p元素时，触发p元素已绑定的事件
$("p").mouseleave();

 

(2) 绑定mouseover和mouseout触发后执行函数

格式：

$(selector).mouseenter(function(){
	//鼠标在元素或者元素子元素上方时，执行的代码
})

$(selector).mouseleave(function(){
	//鼠标移出元素或者元素子元素上方时，执行的代码
})

例子：

//当鼠标滑过p元素上方时，p元素的背景变成黄色
$("p"). mouseenter(function(){
	$("p").css("background-color","yellow"); 
});

//当鼠标滑出p元素上方时，p元素的背景变成红色
$("p").mouseleave(function(){
	$("p").css("background-color","#red");
});

注意： 与 mouseover 和 mouseout事件不同，只有在鼠标指针穿过或离开被选元素时，才会触发 mouseenter和 mouseleave事件。而mouseover 和 mouseout 不论鼠标指针穿过被选元素或其子元素code>，都会触发 mouseover和mouseout事件。

当鼠标指针在指定的元素中移动时，就会触发 mousemove 事件。

(1) 触发mousemove 事件

格式：

$(selector).mousemove ()

例子：

//鼠标div元素上移动时，触发p元素已绑定的事件
 $("div").mousemove();

 

(2) 绑定mousemove触发后执行函数

格式：

$(selector).mousemove(function(){
    //鼠标在元素或者元素子元素上方时，执行的代码
})

例子：

//在span上输出当前鼠标的X,Y信息
$(document).mousemove (function(e){
    $("span").text(e.pageX + ", " + e.pageY);   
});

当浏览器窗口大小变化时，发生 resize 事件。

(1) 触发resize和事件

格式：

$(selector).resize()

例子：

//点击button,执行窗口变化函数
$("button").click(function(){
	$(window).resize();   
}); 

 

(2) 绑定resize触发后执行函数

格式：

$(window).resize(function(){
	//浏览器窗口变化时，执行的代码
})

例子：

x=0;
$(document).ready(function(){
	//x值累加1
	$(window).resize(function() {
    	$("span").text(x+=1); 
  	});
	
	//点击按钮，执行窗口变化函数
  	$("button").click(function(){
    	$(window).resize();
  	});
});

当用户滚动指定的元素时，会触发 scroll 事件。

(1) 触发scroll事件

格式：

$(selector).scroll()

例子：

//点击button,执行div滚动函数
$("button").click(function(){
	$(div).scroll();   
}); 
 

 

(2) 绑定resize触发后执行函数

格式：

$(window).resize(function(){
    //浏览器窗口变化时，执行的代码
})

例子：

x=0;
$(document).ready(function(){
	//x值累加1
	$(window).resize(function() {
		$("span").text(x+=1); 
	});
	
	//点击button,执行div滚动函数
   	$("button").click(function(){
    	$("div").scroll();
  	});
});

toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

格式：

$(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");}
);

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

格式：

$(selector).bind(event,data,function)

其中event为元素附加的事件。data为可选，规定传递到该函数的额外数据。function为当事件发生时运行的函数。

例子：

//在button上绑定click事件，当点击button时，隐藏所有图片
$("button").bind("click",function(){
    $("img").hide(); 
});

//等价于

//在button上绑定click事件，当点击button时，隐藏所有图片
$("button").click(function(){
    $("img").hide(); 
});

unbind() 方法 规定从指定元素上删除的一个或多个事件处理程序。 如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。

ubind() 适用于任何通过 jQuery 附加的事件处理程序。

格式：

$(selector).unbind(event,function)

其中event为删除元素的一个或多个code>事件由空格分隔多个事件值。 如果只规定了该参数，则会删除绑定到指定事件的所有函数。function为可选， 规定从元素的指定事件取消绑定的函数名。

例子：

//首先为P标签绑定，点击后p段落隐藏事件
$("p").click(function(){
	$(this).slideToggle(); 
});

//点击button后，解除p元素的绑定事件
$("button").click(function(){
    $("p").unbind();   
});