jQuery基础系列（二）---事件介绍(1)

最近比较公司比较忙碌，所以发博文有点少，以后会慢慢补上，请见谅

什么事JQuery事件，JQuery事件其实是指你的一些操作，比如单机，双击，鼠标移入，鼠标移出等。对触发这些事件使用不同的函数方法进行操作，合起来就叫做事件方法。
下面来讲一讲一些事件方法的语法和使用示例：
/*============下面是事件方法说明=====================================================================================*/
/*注：$(selector)为Jquery的选择器，详情请参考我的博文：jQuery基础系列（一）---选择器介绍*/

1.ready() 文档就绪事件
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
语法：
1.$(document).ready(function)
2.$().ready(function)
3.$(function)
示例：
$(document).ready(function(){

$(".btn1").click(function(){

$("p").slideToggle();

});

});
示例效果：当文档就绪之后，点击Class=btn1的元素可以控制<p>标签的元素显示或隐藏

2.blur() 失去焦点事件
当元素失去焦点时发生 blur 事件。
语法：

$(selector).blur(function)
示例：

$(document).ready(function(){
$("input").blur(function(){

$("input").css("background-color","#D6D6FF");

});
});
当输入域失去焦点的时候改变其颜色

3.change() 元素改变事件
当元素的值发生改变时触发Change事件
语法：

$(selector).change(function)

示例：

$(".field").change(function(){
$(this).css("background-color","#FFFFCC");

});
当Class为field的元素值发生变化时 改变其背景颜色

4.click() 元素点击事件
当点击元素时触发click事件
语法：

$(selector).click(function)
示例：
$("button").click(function(){
$("p").slideToggle();
});
当button标签元素点击的时候 p标签元素显示隐藏

5.dbclick() 元素双击事件
当元素双击时触发dbclick事件
语法：

$(selector).dblclick(function)
示例：
$("button").dblclick(function(){
$("p").slideToggle();
});
当button标签元素双击的时候 p标签元素显示隐藏

6.error() 元素错误事件
当元素遇到错误（没有正确载入时）触发error事件
语法：
$(selector).error(function)
示例：
$("img").error(function(){
$("img").replaceWith("
Missing image!
");
});
当图像不存在，就用一段预定义文本替换它

7.focus() 元素焦点获得事件
当元素获得焦点时，触发focus事件
语法：
$(selector).focus(function)
示例：
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
当input元素获得焦点时，改变它的背景颜色

8.keydown() keypress() keyup() 按键触发事件
完整的keypress事件包含2部分 一部分是按键按下kendown() 一部分是按键松开keypress
keydown触发按键按下事件 keyup触发按键松开事件 keypress触发按键按下并松开事件
语法：
$(selector).keypress(function)
$(selector).keydown(function)
$(selector).keyup(function)
示例：
$(document).ready(function(){
$("input").keydown(function(){
$(this).css("background","#FF0000");
})
$("input").keyup(function(){
$(this).css("background","#000");
})
$("input").keypress(function(){
alert("这是keypress事件");
})
})
当按下按键的时候 input背景色为红色 当松开背景色为黑色 当完成一次按键操作 触发弹出事件

9.load() 元素加载完成事件
当指定的元素（及子元素）已加载时，会发生 load() 事件。
语法：
$(selector).load(function)
示例：
$("img").load(function(){
$("div").text("Image loaded");
});

10.unload() 用户离开事件
当用户离开页面时，会发生 unload 事件。

具体来说，当发生以下情况时，会发出 unload 事件：
点击某个离开页面的链接

在地址栏中键入了新的 URL

使用前进或后退按钮

关闭浏览器

重新加载页面

unload() 方法将事件处理程序绑定到 unload 事件。
unload() 方法只应用于 window 对象。
语法：

event.unload(function)
示例：

$(window).unload(function(){
alert("Goodbye!");
});
当用户离开页面是弹出Goodbye!

11.resize() 窗口大小调整事件
当调整浏览器窗口大小时 触发resize事件
语法：
$(selector).resize(function)
示例：
$(window).resize(function() {
$('span').text(x+=1);
});
对浏览器窗口大小调整进行计数

12.scroll() 元素滚动事件
当用户对元素进行滚动时，触发scroll事件
语法：
$(selector).scroll(function)
示例：

$("div").scroll(function() {

$("span").text(x+=1);

});
对元素滚动进行计数

13.select() 文本选择事件
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
语法：
$(selector).select(function)
示例：
$("input").select(function(){
$("input").after(" Text marked!");
});
往文本域添加文本，以显示出提示文本

14.submit 表单提交事件
当表单提交时，触发表单提交事件
该事件只适用于表单
语法：
$(selector).submit(function)
示例：
$("form").submit(function(e){
alert("Submitted");
});

15.鼠标事件
mousedown()鼠标按下事件，
mouseenter()鼠标进入（穿过元素事件），
mouseleave()鼠标离开元素事件，注释：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。请看下面例子的演示。
mousemove()鼠标在元素中移动事件，
mouseout()鼠标离开事件，
mouseover()鼠标进入事件，注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。请看下面例子的演示。
mouseup()鼠标松开事件
语法：
$(selector).mousedown(function)
$(selector).mouseenter(function)
$(selector).mouseenter(function)
$(selector).mouseenter(function)
$(selector).mouseenter(function)
$(selector).mouseenter(function)
$(selector).mouseenter(function)
示例：
这里时间不多，就不做示例了，有兴趣的童鞋可以自己操作试试琢磨琢磨，就当是作业吧

本文出自 “学一点记一点” 博客，请务必保留此出处http://iszeo.blog.51cto.com/4100808/1282528