jquery常用事件作业
第一遍 blur()当元素失去焦点==onblur focus()当元素获得焦点 change()当元素的值发生改变的时候 click()点击事件 dblclick()双击事件 mouseover() 当鼠标指针位于元素上方时会发生mouseover事件 mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件 mousemove() 当鼠标指针在指定的元素中移动时，就会发生该事件 mouseleave() 当鼠标指针离开元素时 mouseout() 当鼠标指针移动到元素上方并按下鼠标按键时 mouseup() 当在元素上松开鼠标按键时 resize() 当调整当前浏览器窗口大小时 pageX() 属性是鼠标指针的位置，相对于文档的左边缘 event.pageX event:必需 参数来自事件绑定函数 pageY() 属性是鼠标指针的位置，相对于文档的上边缘 event.pageY event:必需 参数来自事件绑定函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hiki</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
//在Jquery中是以调用事件函数的形式来触发事件的，如js中的onclick事件，在Jquery用click()来替代
//简单的理解：事件方法会触发匹配元素的事件，或者将函数绑定到所有匹配元素的某个事件
//ready() 当我们的DOM已经加载完成，页面已经加载完，触发的事件==js的onload
// $(document).ready(function(){
// })
//不能与<body onload="">一起使用
// blur()当元素失去焦点==onblur
// focus()当元素获得的焦点
// change()当元素的值发生改变的时候
// click()点击事件
// dblclick()双击事件
// mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
// mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
// mousemove() 当鼠标指针在指定的元素中移动时，就会发生该事件
// mouseleave() 当鼠标指针离开元素时
// mouseout() 当鼠标指针移动到元素上方并按下鼠标按键时
// 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':'pink','border-radius':'50px'})
// // })
// // $('div').dblclick(function(){
// // $(this).css({'background':'blue','border-radius':'10px'})
// // })
// })
$(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" name="">
<div style="width:100px;height:100px;background:red;margin-top:20px"></div><br>
<button>点击</button> -->
<div>
当前鼠标的位置:<span> </span>
</div>
<div>
当前页面被调整的次数:<b> </b>
</div>
</body>
</html>blur() blur() blur() 元素失去焦点
focus() focus() focu() 元素获得焦点
change() change() change() 元素值改变时
click() click() click() 点击事件
dblclick() dblclick() dblclick() 双击事件
下方为鼠标指针事件
mouseover() mouseover() mouseover() 元素上方
mouseenter() mouseenter() mouseenter() 穿过元素
mousemove() mousemove() mousemove() 元素中移动
mouseleave() mouseleave() mouseleave() 离开元素
mouseout() mouseout() mouseout() 元素上方并按下鼠标按键时
mouseup() mouseup() mouseup() 元素上松开鼠标
resize() resize() resize() 浏览器窗口大小被调整时，也可以计数调整次数括号内传变量
pageX() pageX() pageX() 获取x轴位置
pageY() pageY() pageY() 获取y轴位置