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)
新闻来源:http://ybzwz.com/article/pgejeg.html