对jquery的各种事件进行了了解,并对常用的一些事件进行了练习。
常用事件:
1、ready():当dom载入就绪时执行的一个函数,相当于window.load方法。
2、on():在指定元素上添加事件处理的函数,经常用于添加click事件。
3、bind():在指定元素上绑定事件。用法同on。
4、one():用于在指定元素上添加事件处理函数,与on的区别是事件只执行一次。
5、hover():当鼠标移进移出是触发该函数,在该方法内分别可以对鼠标移进和移出事件做处理。
6、blur():当元素失去焦点是触发该事件。相当于直接在元素内添加onblur事件。
7、change():当元素值发生改变的时候触发该事件,该事件仅适用于文本域和select元素。当作用于文本域的时候该事件会在元素失去焦点时触发,相当于blur。
8、click():触发每一个匹配元素的click事件,dbclick触发双击事件。
9、focus():当元素获得焦点是触发。
10、keydown():当键盘或按钮被按下时触发该事件。
11、keypress():与keydown类似。与keydown事件不同的是,每插入一个字符就会触发keypress事件。
12、mousedown():当鼠标移动到元素上方并按下按键时触发。相对应的是mouseup()。
13、mouseenter():当鼠标移进是触发事件,相对应的是mouseout()或mouseleave()。
14、unload():当离开本页面时触发该事件。
15、submit():当提交表单是触发该事件。
在进行事件练习的时候,出现了一个问题,就是当把这些事件的js单独放在<script>标签内的时候,这些事件不会生效,原因是加载的时候没有加载。所以申明这些事件的时候要放到ready()方法内或者window.load()方法内,这样在加载的时候才会加载这些申明。
下面是练习时用的做的一些小demo:
由于有些事件只是通过弹窗的形式测试,在这里我是使用的Jquery的一个弹窗插件layer。要测试请首先下载相应的文件[这是我上传的layer相关文件](http://download.csdn.net/detail/zoujian1993/9420753)
当然了,你也可以去官网下载。另外关于layer的一些注意事项以及小demo我在上一篇博客有一些介绍[layer介绍](http://blog.csdn.net/zoujian1993/article/details/50602129)
下面是我的小demo:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">
var color = ['red','pink','black','gray','blue'];
$(document).ready(function(){
$('#div1').attr('style','background:pink;height:500px;width:100%;height:50%');
$('#div1').hover(function(){
layer.msg('Mouse in');
},function(){
layer.msg('Mouse out');
});
$("#btn1").on('click',function(){
var i=Math.floor(Math.random()*color.length);
$('#div1').attr('style','background:'+color[i]+';height:50%;width:100%');
});
$("#btn2").bind('click',function(){
var i=Math.floor(Math.random()*color.length);
$('#div1').attr('style','background:'+color[i]+';height:50%;width:100%');
});
$("#btn3").one('click',function(){
var i=Math.floor(Math.random()*color.length);
$('#div1').attr('style','background:'+color[i]+';height:50%;width:100%');
});
$("#txt1").blur(function(){
layer.msg($('#txt1').val());
});
$("#txt2").change(function(){
layer.msg('输入框改变'+$('#txt2').val());
});
$('#txt4').focus(function(){
layer.msg('获得焦点');
});
$('#txt5').keydown(function(event){
layer.msg('keydown '+event.keyCode);
});
$('#div2').mousedown(function(){
layer.msg('mousedown');
});
$('#div2').mouseenter(function(){
$('#div2').css('background-color','red');
});
$('#div2').mouseout(function(){
$('#div2').css('background-color','pink');
});
$(window).unload(function(){
layer.msg('unload事件触发');
});
$('#div3').show(4000,function(){});
});
function change(){
alert($('#txt3').val());
}
</script>
</head>
<body>
<div id="div1"></div>
<div>
<input type="button" id="btn1" value="改变颜色on事件">
<input type="button" id="btn2" value="改变颜色bind事件">
<input type="button" id="btn3" value="改变颜色one事件"><br/>
blur事件<input type="text" id="txt1">
change事件<input type="text" id="txt2"/>
change事件原生<input type="text" id="txt3" onchange="change()"/>
focus事件<input type="text" id="txt4">
keydown事件<input type="text" id="txt5">
</div>
<div id="div2" style="background:pink;height:10%;width:100%"></div>
<div>
<a href="http://www.baidu.com">百度一下</a><br/>
</div>
<div id="div3" style="display:none">用缓慢的动画将隐藏的段落显示出来,历时4000毫秒。<br/>
用缓慢的动画将隐藏的段落显示出来,历时4000毫秒。用缓慢的动画将隐藏的段落显示出来,历时4000毫秒。<br/>
用缓慢的动画将隐藏的段落显示出来,历时4000毫秒。用缓慢的动画将隐藏的段落显示出来,历时4000毫秒。<br/>
用缓慢的动画将隐藏的段落显示出来,历时4000毫秒。</div>
</body>
</html>