语法:
$(document).ready(function(){
})
不能和<body onload="">一起使用
focus()当元素获得焦点
change()当元素的值发生改变的时候
click()点击事件
dblclick()双击事件
mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
mousemove() 当鼠标指针在指定的元素中移动时,就会发生该事件
mouseleave() 当鼠标指针离开元素时
mouseout() 当鼠标指针从元素上移开时
mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
mouseup() 当在元素上松开鼠标按键时
resize() 当调整当前浏览器窗口大小时
pageX() 属性是鼠标指针的位置,相对于文档的左边缘 event.pageX event:必须 参数来自事件绑定函数
pageY() 属性是鼠标指针的位置,相对于文档的上边缘 event.pageY event: 必须 参数来自事件绑定函数
<!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> <script type="text/javascript"> $(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('backgroundColor','blue') })*/ /*$('button').dblclick(function(){ $('div').css('backgroundColor','blue') })*/ /*$(document).mousemove(function(a){ $('span').text('x:'+a.pageX+'y:'+a.pageY) }) n=0; $(window).resize(function(){ $('b').text(n++) })*/ /*$('div').mouseenter(function(){ $('div').css('backgroundColor','pink') }) $('div').mouseleave(function(){ $('div').css('backgroundColor','blue') })*/ /*$('div').mouseout(function(){ $('div').css('backgroundColor','blue') })*/ /*$('div').mouseover(function(){ $('div').text('大家好,我是星辰') })*/ $('div').mousedown(function(){ $('div').text('按下') }) $('div').mouseup(function(){ $('div').text('松开') }) }) </script> <!-- <input type="text" name=""> <div style="width:100px;height:100px;background-color:red;margin-top: 20px;"></div> <button>点击</button> --> <!-- 鼠标位置:<span></span> 窗口大小被调整的次数:<b></b> --> <div style="width:100px;height: 100px;margin:50px auto;background: red;"></div> </body> </html>