abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .move{widt
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .move{width: 100px;height: 100px;background: red;} </style> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ //文档就绪函数开始 // ---------------------------------------------------------------- // 事件函数:窗口发生大小变化或调整后发生的函数resize // a = 1; // //这是一个window方法,连接上resize函数事件,操作浏览器了所以叫window方法 // $(window).resize(function(){ // // 声明获取b标签把b标签的内容插入a的值,a用户计算用户乱动显示器的行为! // $('b').text(a++) // alert('亲,不要乱动显示器') // }) // ---------------------------------------------------------------- // 鼠标事件mouseove: 获取鼠标移动事件 获取坐标值:pageX() pageY() // $(document).mousemove(function(aa){ // // 获得x值加上y值坐标的结果插入到css属性 // $('.coord').text('x:'+aa.pageX+'y:'+aa.pageY); // }) // coord:坐标 //----------------------------------------------------------------- //双击事件 dbclick() // 第一句语法和别的不太一样,是直接先获取元素,然后连接双击事件函数 // $('.move').dbclick(function(){ // // this是指向函数绑定的DOM元素本身 // $(this).css('background','blue') // }) //----------------------------------------------------------------- // 点击事件 click // $('button').click(function(){ // $('#box').css('background','yellow') // }) //----------------------------------------------------------------- // focus() 当元素获取到焦点 // $('.input1').focus(function(){ // $('.input1').css('background','pink') // }) //----------------------------------------------------------------- // blur() 当元素失去焦点 例如:用户离开了input框执行此函数方法改变背景红色 // $('.input2').blur(function(){ // $('.input2').css('background','blue') // }) //----------------------------------------------------------------- }) //文档就绪函数 结束 </script> </head> <body> 当前坐标<span></span> <input type="" name=""> <p>正在计算您已经调整窗口<b></b>次</p> <div></div> <div id="box"></div> <button>变色</button> <br> <input> <br> <span>鼠标离开文本框变蓝</span><input> <br> </body> </html>