abstract:依旧上图 粘代码提交没反应<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ事件函数</title> <script type="text/javascript" sr
依旧上图 粘代码提交没反应
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ事件函数</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()当元素获得焦点 ==onfocus // change()当元素的值发生改变的时候 // dblclick()双击事件 // mouseover() 当鼠标指针位于元素上方时会发生mouseover事件 // mouseenter() 当鼠标穿过元素时会发生mouseenter事件 // mousemove() 当鼠标在指定的元素中移动时,就会发生该事件 // mouseleave()当鼠标指针离开元素时 // mouseout() 当鼠标指针从元素上移开时 // mouseup() 当在元素上松开鼠标按键时 // resize() 当调整当前浏览器窗口大小时 // pageX 属性是鼠标指针的位置,相对于文档左边缘 event.pageX event:必须 参数来自事件绑定函数 //pageY 属性是鼠标指针的位置,相对于文档上边缘 event.pageX event:必须 参数来自事件绑定函数 $(document).ready(function(){ // $('input').blur(function(){ // $(this).css('background','red'); // }); // $('input').focus(function(){ // $(this).css('background','blue'); // // }) // $('input').change(function(){ // $('input').css('background','pink'); // }) // $('button').click(function(){ // $('div').css('background','blue') // }); // $('div').dblclick(function(){ // $(this).css('background','red') // }); $(document).mousemove(function(aa){ $('span').text('x:'+aa.pageX+'y:'+aa.pageY); }) a = 0; $(window).resize(function(){ $('b').text(a+=1); }) }) </script> <input type="text" name=""> <button>改变</button> <div style="width:100px;height:100px;background:#f0f"></div> <div> 当前鼠标的位置是<span></span></div> <div> 页面调整大小次数<b></b></div> </body> </html>