<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的事件函数</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<!--
在jQuery中是以调用函数的形式来触发事件的，如js中的onclick事件，在jQuery则用click()来替代
简单的理解：事件方法会触发匹配元素的事件，或者将函数绑定到所有匹配元素的事件
ready() 当我们的DOM（文档对象模型）已经加载，页面已经加载完成，触发的事件==相当于我们js的onload事件效果，ready方法不可以跟onload一起使用
focus() 当元素获得焦点==onfocus
blur() 当元素失去焦点==onblur
change() 当元素的值发生改变的时候==onchange
click() 点击事件==onclick
dblclick() 双击事件==onabclick
mouseover() 当鼠标指针位于元素上方时会发生的mouseover事件
mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
mousemove() 当鼠标指针在指定的元素中移动时，就会发生该事件
mouseleave() 当鼠标指针离开元素时
mouseout() 当鼠标指针从元素上移开时
mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
mouseup() 当在元素上松开鼠标按键时
resize() 当调整当前浏览器窗口大小时
pageX() 属性是鼠标指针的位置，相对于文档的左边缘 event.pageX event:必需 参数来自事件绑定函数。
pageY() 属性是鼠标指针的位置，相对于文档的上边缘 event.pageY event:必需 参数来自事件绑定函数。 -->
<!-- *注意ready()事件不能与<body onload="">一起使用 -->
<script type="text/javascript">
$(document).ready(function(){
})
// $(document).ready(function(){
// $('input').focus(function(){
// $('input').css('background','pink')
// })
// $('input').blur(function(){
// $('input').css('background','red')
// })
// $('input').change(function(){
// $('input').css('background','green')
// })
// $('button').click(function(){
// $('div').css('background','blue')
// })
// $('div').dblclick(function(){
// $(this).css('background','pink')
// })
// })
$(document).ready(function(){
$(document).mousemove(function(aa){
$('span').text('x: '+aa.pageX+' y: '+aa.pageY)
})
a=0
$(window).resize(function(){
// alert('窗口被调整大小')
$('b').text(a++)
})
})
</script>
<!-- <input type="text">
<div style="width: 100px;height: 100px;background: red;margin-top: 20px;"></div>
<button>点击</button> -->
<div>当前鼠标的位置：<span></span></div>
<div>页面被调整大小的次数：<b></b></div>
</body>
</html>
