abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery事件方法2</title> <script type="text/javascript" src="
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery事件方法2</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $(document).mousemove(function(aa){ $("span").text("x:"+aa.pageX+"y:"+aa.pageY) }) a=0 $(window).resize(function(){ $("b").text(a++) }) $(".one").mouseenter(function(){ $(".one").css("background","blue") }) $(".two").mouseover(function(){ $(".two").css("width","50px") }) $(".three").mouseout(function(){ $(".three").css("height","50px") }) $(".four").mousedown(function(){ $(".four").css({"width":"50px","height":"50px"}) }) $(".five").mouseup(function(){ $(".five").css({"width":"200px","height":"200px","background":"green"}) }) }) </script> <div>当前鼠标的位置:<span></span></div> <div>页面被调整大小的次数:<b></b></div> <div style="width:100px;height: 100px;background: red"></div><br> <div style="width:100px;height: 100px;background: red"></div><br> <div style="width:100px;height: 100px;background: red"></div><br> <div style="width:100px;height: 100px;background: red"></div><br> <div style="width:100px;height: 100px;background: red"></div><br> </body> </html> mouseover() 当鼠标指针位于元素上方时会发生mouseover事件 mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件 mousemove() 当鼠标指针在指定的元素中移动时,就会发生mousemove事件 mouseleave() 当鼠标指针离开元素时,就会发生mouseleave mouseout() 当鼠标指针从元素上移开时,就会发生mouseout mousedown() 当鼠标指针移动到元素上方并按下按键时) mouseup() 当在元素上松开鼠标按键时 resize() 当调整当前浏览器窗口大小时 pageX() 属性是鼠标指针的位置,相对于文档的左边缘 event.pageX event:必需 参数来自事件绑定函数 pageY() 属性是鼠标指针的位置,相对于文档的右边缘 event.pageY event:必需 参数来自事件绑定函数 $(".four").mousedown(function(){ $(".four").css({"width":"50px","height":"50px"}) }) // 在改变多个属性的时候, 1、每个属性,和属性值都要有引号, 2、属性和属性对应的属性值之间有冒号, 3、一定要有花括号将多个属性包起来 在写选择器的时候,一定要定位准确,因为有多个div,没有准确 定位的话,容易出错。