<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="前端课件/jQuery/jquery-3.3.1.min.js"></script>
<style type="text/css">
.div_1{width: 100px;height: 100px;background: red;margin-top: 30px;}
</style>
</head>
<body>
<script>
// ready() 当我们的DOM已经加载，页面已经加载完，触发的事件==js的onload
// 不能与<body onload="">一起使用
// blur() 当元素失去焦点==onblur
// focus() 当元素获取焦点==onfocus
// change() 当元素的值发生改变的时候
// click() 点击事件==js的onclick
// dblclick() 点击事件==js的ondblclick
// mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
// mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
// mousemove() 当鼠标指针在指定的元素中移动时，就会发生该事件
// mouseleave() 当鼠标指针离开元素时
// mouseout() 当鼠标指针从元素上移开时
// mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
// mouseup() 当在元素上松开鼠标按键时
// resize() 当调整浏览器窗口大小时
// pageX() 属性是鼠标指针的位置，相对于文档的左边缘 event.pageX event:必选 参数来自事件绑定函数。
// pageY() 属性是鼠标指针的位置，相对于文档的上边缘 event.pageY event:必选 参数来自事件绑定函数。
$(document).ready(function(){
// $('input').blur(function(){
// $('input').css('background','red')
// })
// $('input').focus(function(){
// $('input').css('background','blue')
// })
// $('input').change(function(){
// $('input').css('background','pink')
// $('button').click(function(){
// $('div').css('background','blue')
// $('div').dblclick(function(){
// $(this).css('background','pink')
// })
// $('.div_1').mouseover(function(){
// $('.div_1').css('background','pink')
// })
// $('.div_1').mouseleave(function(){
// $('.div_1').css('background','blue')
// })
// $('.div_1').mouseenter(function(){
// $('.div_1').css('background','blue')
// })
// $('.div_1').mousemove(function(){
// $('.div_1').css('background','blue')
// })
// $('.div_1').mousedown(function(){
// $('.div_1').css('background','blue')
// })
// $('.div_1').mouseup(function(){
// $('.div_1').css('background','pink')
// })
// var i=0
// $(window).resize(function(){
// $('b').text(i++)
// })
$(document).mousemove(function(aa){
$('span').text('x: '+aa.pageX+'y: '+aa.pageY)
})
})
</script>
<!--<input type="text" name="">
<div style="width: 100px;height: 100px;background: red;margin-top: 30px;"></div>
<button>点击</button>-->
<div class="div_1" ></div>
<div>
当前鼠标的位置：<span> </span>
</div>
<div>
页面被调整大小的次数：<b> </b>
</div>
</body>
</html>本章节主要介绍了几个常用事件函数，最多的就是鼠标事件，经过多次测试后发现mouseover()和mouseenter()
的效果有点相似，mouseleave()和mouseout()的效果有点相似，问了下度娘说是‘mouseenter事件只作用于目标元素，而mouseover作用于目标元素及其后代元素’mouseleave()事件只作用于目标元素，而mouseout()作用于目标元素及其后代元素
