abstract:事件清单.blur() //失去焦点 .focus() //获得焦点 .change() //元素值发生变化 .click() .dblclick() //双击 .mouseover() //不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 .mouseenter() //只有在鼠标指
事件清单
.blur() //失去焦点 .focus() //获得焦点 .change() //元素值发生变化 .click() .dblclick() //双击 .mouseover() //不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 .mouseenter() //只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 .mouseleave() //只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件 .mouseout() //不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 .mousedown() .mouseup() .resize() //缩放窗口 .pageX //相对于文档左边缘的鼠标位置 .pageY //相对于文档上边缘的鼠标位置
(1)pageX、pageY是对象属性,不是方法,后面不需要加(),但是前面需要指定对象,该对象为function的参数。如果坐标是针对整个窗口的,函数对象应该是document。
$(document).mousemove(function(aa){ $('span').text('X:'+aa.pageX+'Y:'+aa.pageY) })
(2)resize()的对象是window。
(3)text()输出问题
//方法一: var num = 0 $(window).resize(function(){ $('b').text('调整次数'+ num++) //此方法调整一次后依然返回0 alert('窗口已被调整') } //方法二: var num = 0 $(window).resize(function(){ $('b').text(num+=1) //从1开始,但不能用"文本"+输出,会出错,无提示 alert('窗口已被调整') }
完整代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery事件</title> <script src="js/jquery-3.3.1.js"></script> <script> $(document).ready( function(){ $('div').css({'width':'300px','height':'100px','border':'2px blue dashed'}) $('input').blur(function(){ $('input').css('background','#B3D4FC') }) $('input').focus(function(){ $('input').css('background','#EDBCC8') }) $('div').dblclick(function(){ $('div').css('background','#EDBCC8') }) $('div').mouseup(function(aa){ $('span').text('X:'+aa.pageX+'Y:'+aa.pageY) }) var num = 0 $(window).resize(function(){ $('b').text(num+=1) alert('窗口已被调整!') }) }) </script> </head> <body> <input type="text" > <div> 双击触发变色<br> 坐标<span></span><br> 窗口调整次数:<b></b> </div> </body> </html>
END