abstract:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
// 在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() 当鼠标指针从元素上移开时
// mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
// mouseup() 当在元素上松开鼠标按键时
// resize() 当调整当前浏览器窗口大小时
// pageX() 属性是鼠标指针的位置,相对于文档的左边缘 event.pageX event:必需 参数来自事件绑定函数。
// pageY() 属性是鼠标指针的位置,相对于文档的上边缘 event.pageY event:必需 参数来自事件绑定函数。
<script>
$(document).ready(function(){
$('button').click(function(){
$('div').toggle()
})
})
$(document).mousemove(function(aa){
$('span').text('x'+aa.pageX+'Y'+aa.pageY)
})
a=0
$(window).resize(function(){
$('b').text(a++)
})
$('input').focus(function(){
$('input').css('background','blue')
})
</script>
<div style="width: 100px;height: 100px;background:pink;"></div>
<button>点击</button>
<div>当前鼠标位置:
<span></span>
</div>
<div>页面被调整次数: <b></b></div>
<input type="text">
</body>
</html>
Correcting teacher:天蓬老师Correction time:2019-08-22 15:33:33
Teacher's summary:jQuery官方推荐使用on()和off()来绑定或取消事件, 如果直接用click, 只支持冒泡, 并且 同一事件只能触发一次