<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery事件</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style>
.clear{clear:both;}
.box1,.box2,.box3,.box4,.box5{height: 100px;width: 100px;background:#333;float:left;margin: 5px}
</style>
<script type="text/javascript">
$(document).ready(function(){
//点击按钮 设置指定div
$('button.btn1').click(function(){
$('div.box1').css('background','red')
})
//双击
$('div.box2').dblclick(function(){
$('div.box2').css('background','pink')
})
//当鼠标指针穿过元素时 鼠标移入时颜色发生改变
$('div.box3').mouseenter(function(){
$('div.box3').css('background','blue')
})
//当鼠标指针离开元素时 设置背景颜色
$('div.box3').mouseleave(function(){
$('div.box3').css('background','#565565')
})
// 当鼠标指针移动到元素上方，并按下鼠标按键时
$('div.box4').mousedown(function(){
$('div.box4').css('background','pink')
})
//当在元素上松开鼠标按钮时
$('div.box5').mouseup(function(){
$('div.box5').css('background','pink')
})
//失去焦点
$('input:text').blur(function(){
$('input:text').css('background','#fff')
})
//获得焦点
$('input:text').focus(function(){
$('input:text').css('background','red')
})
//按键按下过程中
$('input:text').keypress(function(){
$('input:text').css('background','#895b8a')
})
//按键按下
$('input:text').keydown(function(){
$('input:text').css('background','#006e54')
})
//按键松开弹起
$('input:text').keyup(function(){
$('input:text').css('background','#302833')
})
//内容发生改变
$('input.change').change(function(){
$('input.change').css('background','#EDE977')
})
//提交事件
$('form').submit(function(){
alert("确认提交")
})
$('btn2').click(function(){
$("form").submit()
})
//获取鼠标位置
$(document).mousemove(function(a){
$('span').text('x: '+ a.pageX+',y:'+ a.pageY );
})
//窗口改变次数
a = 0;
$(window).resize(function(){
$('b').text(a++)
if(a>10){
alert('住手，浏览器要玩坏了！');
}
})
})
</script>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="clear"></div>
<button>点击</button>
<form>
<input type="text"><br>
<input type="" value="改变内容试试">
<button>提交</button>submit()事件
</form>
<div>
鼠标位置：<span></span>
窗口改变次数<b></b>
</div>
<div>
鼠标事件<br>
click() 元素被单机击<br>
dblclick() 元素被双击<br>
mouseenter() 当鼠标指针穿过元素时 鼠标移入时颜色发生改变<br>
mouseleave() 当鼠标指针离开元素时 设置背景颜色<br>
mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时<br>
mouseup () 当在元素上松开鼠标按钮时<br>
<br>
键盘事件<br>
keypress() 键按下的过程<br>
keydown() 键被按下<br>
eyup() 键被松开<br>
<br>
表单事件<br>
submit() <br>
change() 值发生改变时<br>
focus() 获得焦点<br>
blur() 失去焦点<br>
<br>
文档/窗口事件<br>
ready() 文档就绪函数 不可与<xmp><body noload=""></xmp>一起使用<br>
resize()当调整当前浏览器窗口大小时<br>
pageX（）属性是鼠标指针的位置，相对于文档的左边缘 event.pageX event：必需参数来自事件绑定函数。<br>
pageY（）属性是鼠标指针的位置，相对于文档的上边缘 event.pageY event：必需参数来自事件绑定函数。<br>
load() 图像全部加载时 <br>
scroll() 元素滚动<br>
</div>
</body>
</html>
