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

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

成都创新互联成立于2013年，是专业互联网技术服务公司，拥有项目网站制作、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元浮山做网站,已为上家服务,为浮山各地企业和个人服务,联系电话:18982081108

   什么事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的元素可以控制

标签的元素显示或隐藏

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 p_w_picpath!
   ");
});

当图像不存在，就用一段预定义文本替换它

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)

示例：

这里时间不多，就不做示例了，有兴趣的童鞋可以自己操作试试琢磨琢磨，就当是作业吧