摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery的事件函數(shù)</title> <script type="text/javascript" src="
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery的事件函數(shù)</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> </head> <body> <!-- 在jQuery中是以調(diào)用函數(shù)的形式來觸發(fā)事件的,如js中的onclick事件,在jQuery則用click()來替代 簡單的理解:事件方法會觸發(fā)匹配元素的事件,或者將函數(shù)綁定到所有匹配元素的事件 ready() 當我們的DOM(文檔對象模型)已經(jīng)加載,頁面已經(jīng)加載完成,觸發(fā)的事件==相當于我們js的onload事件效果,ready方法不可以跟onload一起使用 focus() 當元素獲得焦點==onfocus blur() 當元素失去焦點==onblur change() 當元素的值發(fā)生改變的時候==onchange click() 點擊事件==onclick dblclick() 雙擊事件==onabclick mouseover() 當鼠標指針位于元素上方時會發(fā)生的mouseover事件 mouseenter() 當鼠標指針穿過元素時會發(fā)生mouseenter事件 mousemove() 當鼠標指針在指定的元素中移動時,就會發(fā)生該事件 mouseleave() 當鼠標指針離開元素時 mouseout() 當鼠標指針從元素上移開時 mousedown() 當鼠標指針移動到元素上方并按下鼠標按鍵時 mouseup() 當在元素上松開鼠標按鍵時 resize() 當調(diào)整當前瀏覽器窗口大小時 pageX() 屬性是鼠標指針的位置,相對于文檔的左邊緣 event.pageX event:必需 參數(shù)來自事件綁定函數(shù)。 pageY() 屬性是鼠標指針的位置,相對于文檔的上邊緣 event.pageY event:必需 參數(shù)來自事件綁定函數(shù)。 --> <!-- *注意ready()事件不能與<body onload="">一起使用 --> <script type="text/javascript"> $(document).ready(function(){ }) // $(document).ready(function(){ // $('input').focus(function(){ // $('input').css('background','pink') // }) // $('input').blur(function(){ // $('input').css('background','red') // }) // $('input').change(function(){ // $('input').css('background','green') // }) // $('button').click(function(){ // $('div').css('background','blue') // }) // $('div').dblclick(function(){ // $(this).css('background','pink') // }) // }) $(document).ready(function(){ $(document).mousemove(function(aa){ $('span').text('x: '+aa.pageX+' y: '+aa.pageY) }) a=0 $(window).resize(function(){ // alert('窗口被調(diào)整大小') $('b').text(a++) }) }) </script> <!-- <input type="text"> <div style="width: 100px;height: 100px;background: red;margin-top: 20px;"></div> <button>點擊</button> --> <div>當前鼠標的位置:<span></span></div> <div>頁面被調(diào)整大小的次數(shù):<b></b></div> </body> </html>