<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ready方法事件和事件切换</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
#out{
width: 300px;
height: 400px;
background-color: #c0c0c0;
}
input{
width: 250px;
}
</style>
</head>
<body>
jQuery 的事件处理（一）
目标：
1、理解jQuery 的ready()方法
2、熟悉使用jQuery 事件方法
3、熟悉jQuery事件切换
大纲
1、ready()方法
1）举例
$(document)。ready（function{
//我们的代码
}）;
2）ready()和window.load的区别
(1)ready()在DOM结构加载完成之后马上执行；window.load在网页上的所有元素全部载入陈恭候才执行 例如 图片展示网站 可能存在CSS文件、js文件 和大量的图片文件 建议使用ready()方法
(2)同一个网页中，可以写多个ready()，但是只能有一个生效的window.load
(3)ready（）方法的简写方式
$(function（）{
//写我们的代码
});
2、jQuery事件方法
blur([[data],fn]) 当元素失去焦点时触发 blur 事件
change([[data],fn]) 当元素的值发生改变时，会发生 change 事件。
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
3、jQuery事件切换
hover([over,]out)
toggle([spe],[eas],[fn])
-->
<div id="in">
<input type="text" name="in" value="请输入用户名">
<button>按钮</button>
</div>
<div id="out">
</div>
<script>
$(document).ready(function () {
/*$(':text').blur(function () {
alert('###');
});*/
/* $('#in input').change(function () {
$('#out').text($(this).val());
});*/
/* $(':text').keyup(function () {
var value = $.trim($(this).val());
if(value=='laodai'){
$('#out').text('我是PHPChina的老戴');
}else{
$('#out').text('*');
}
});*/
/* $('div:eq(1)').click(function () {
$(this).css('background','red');
});*/
/* $('div:last').mousemove(function () {
$(this).css('background','red');
});*/
/*$('div:last').hover(function () {
$(this).css('background','red');
},function () {
$(this).css('background','black');
});*/
$('#out').toggle(function () {
$(this).css('background','green');
},function () {
$(this).css('background','black');
},function () {
$(this).css('background','yellow');
},function () {
$(this).css('background','none');
});
});
</script>
</body>
</html>
网友评论