摘要:<!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(){ //文檔就緒函數(shù)開(kāi)始 // ---------------------------------------------------------------- // 事件函數(shù):窗口發(fā)生大小變化或調(diào)整后發(fā)生的函數(shù)resize // a = 1; // //這是一個(gè)window方法,連接上resize函數(shù)事件,操作瀏覽器了所以叫window方法 // $(window).resize(function(){ // // 聲明獲取b標(biāo)簽把b標(biāo)簽的內(nèi)容插入a的值,a用戶計(jì)算用戶亂動(dòng)顯示器的行為! // $('b').text(a++) // alert('親,不要亂動(dòng)顯示器') // }) // ---------------------------------------------------------------- // 鼠標(biāo)事件mouseove: 獲取鼠標(biāo)移動(dòng)事件 獲取坐標(biāo)值:pageX() pageY() // $(document).mousemove(function(aa){ // // 獲得x值加上y值坐標(biāo)的結(jié)果插入到css屬性 // $('.coord').text('x:'+aa.pageX+'y:'+aa.pageY); // }) // coord:坐標(biāo) //----------------------------------------------------------------- //雙擊事件 dbclick() // 第一句語(yǔ)法和別的不太一樣,是直接先獲取元素,然后連接雙擊事件函數(shù) // $('.move').dbclick(function(){ // // this是指向函數(shù)綁定的DOM元素本身 // $(this).css('background','blue') // }) //----------------------------------------------------------------- // 點(diǎn)擊事件 click // $('button').click(function(){ // $('#box').css('background','yellow') // }) //----------------------------------------------------------------- // focus() 當(dāng)元素獲取到焦點(diǎn) // $('.input1').focus(function(){ // $('.input1').css('background','pink') // }) //----------------------------------------------------------------- // blur() 當(dāng)元素失去焦點(diǎn) 例如:用戶離開(kāi)了input框執(zhí)行此函數(shù)方法改變背景紅色 // $('.input2').blur(function(){ // $('.input2').css('background','blue') // }) //----------------------------------------------------------------- }) //文檔就緒函數(shù) 結(jié)束 </script> </head> <body> 當(dāng)前坐標(biāo)<span></span> <input type="" name=""> <p>正在計(jì)算您已經(jīng)調(diào)整窗口<b></b>次</p> <div></div> <div id="box"></div> <button>變色</button> <br> <input> <br> <span>鼠標(biāo)離開(kāi)文本框變藍(lán)</span><input> <br> </body> </html>