????:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery事件</title> <script type="text/javascript" src="jqu
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery事件</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style> .clear{clear:both;} .box1,.box2,.box3,.box4,.box5{height: 100px;width: 100px;background:#333;float:left;margin: 5px} </style> <script type="text/javascript"> $(document).ready(function(){ //點(diǎn)擊按鈕 設(shè)置指定div $('button.btn1').click(function(){ $('div.box1').css('background','red') }) //雙擊 $('div.box2').dblclick(function(){ $('div.box2').css('background','pink') }) //當(dāng)鼠標(biāo)指針穿過元素時(shí) 鼠標(biāo)移入時(shí)顏色發(fā)生改變 $('div.box3').mouseenter(function(){ $('div.box3').css('background','blue') }) //當(dāng)鼠標(biāo)指針離開元素時(shí) 設(shè)置背景顏色 $('div.box3').mouseleave(function(){ $('div.box3').css('background','#565565') }) // 當(dāng)鼠標(biāo)指針移動(dòng)到元素上方,并按下鼠標(biāo)按鍵時(shí) $('div.box4').mousedown(function(){ $('div.box4').css('background','pink') }) //當(dāng)在元素上松開鼠標(biāo)按鈕時(shí) $('div.box5').mouseup(function(){ $('div.box5').css('background','pink') }) //失去焦點(diǎn) $('input:text').blur(function(){ $('input:text').css('background','#fff') }) //獲得焦點(diǎn) $('input:text').focus(function(){ $('input:text').css('background','red') }) //按鍵按下過程中 $('input:text').keypress(function(){ $('input:text').css('background','#895b8a') }) //按鍵按下 $('input:text').keydown(function(){ $('input:text').css('background','#006e54') }) //按鍵松開彈起 $('input:text').keyup(function(){ $('input:text').css('background','#302833') }) //內(nèi)容發(fā)生改變 $('input.change').change(function(){ $('input.change').css('background','#EDE977') }) //提交事件 $('form').submit(function(){ alert("確認(rèn)提交") }) $('btn2').click(function(){ $("form").submit() }) //獲取鼠標(biāo)位置 $(document).mousemove(function(a){ $('span').text('x: '+ a.pageX+',y: '+ a.pageY ); }) //窗口改變次數(shù) a = 0; $(window).resize(function(){ $('b').text(a++) if(a>10){ alert('住手,瀏覽器要玩壞了!'); } }) }) </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <button>點(diǎn)擊</button> <form> <input type="text"><br> <input type="" value="改變內(nèi)容試試"> <button>提交</button>submit()事件 <div> 鼠標(biāo)位置:<span></span> 窗口改變次數(shù)<b></b> <p><a href="http://ipnx.cn">php中文網(wǎng)</a></p> </div> </form> <div> 鼠標(biāo)事件<br> click() 元素被單機(jī)擊<br> dblclick() 元素被雙擊<br> mouseenter() 當(dāng)鼠標(biāo)指針穿過元素時(shí) 鼠標(biāo)移入時(shí)顏色發(fā)生改變<br> mouseleave() 當(dāng)鼠標(biāo)指針離開元素時(shí) 設(shè)置背景顏色<br> mousedown() 當(dāng)鼠標(biāo)指針移動(dòng)到元素上方,并按下鼠標(biāo)按鍵時(shí)<br> mouseup () 當(dāng)在元素上松開鼠標(biāo)按鈕時(shí)<br> <br> 鍵盤事件<br> keypress() 鍵按下的過程<br> keydown() 鍵被按下<br> eyup() 鍵被松開<br> <br> 表單事件<br> submit() <br> change() 值發(fā)生改變時(shí)<br> focus() 獲得焦點(diǎn)<br> blur() 失去焦點(diǎn)<br> <br> 文檔/窗口事件<br> ready() 文檔就緒函數(shù) 不可與<xmp><body noload=""></xmp>一起使用<br> resize()當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)<br> pageX()屬性是鼠標(biāo)指針的位置,相對于文檔的左邊緣 event.pageX event:必需參數(shù)來自事件綁定函數(shù)。<br> pageY()屬性是鼠標(biāo)指針的位置,相對于文檔的上邊緣 event.pageY event:必需參數(shù)來自事件綁定函數(shù)。<br> load() 圖像全部加載時(shí) <br> resize() 瀏覽器窗口調(diào)整<br> scroll() 元素滾動(dòng)<br> </div> </body> </html>