快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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)

示例:

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


网站标题:jQuery基础系列(二)---事件介绍(1)
分享URL:http://6mz.cn/article/pgejeg.html

其他资讯