摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script 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
//語法:
// $(document).ready(function(){
// })
//*不能與<body onload="">一起使用
//blur()當元素失去焦點==onblur
// focus()當元素獲得焦點
// change()當元素的值發(fā)生改變的時候
// click()點擊事件
//dblclick()雙擊事件
// 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ù)。
<script>
$(document).ready(function(){
$('button').click(function(){
$('div').toggle()
})
})
$(document).mousemove(function(aa){
$('span').text('x'+aa.pageX+'Y'+aa.pageY)
})
a=0
$(window).resize(function(){
$('b').text(a++)
})
$('input').focus(function(){
$('input').css('background','blue')
})
</script>
<div style="width: 100px;height: 100px;background:pink;"></div>
<button>點擊</button>
<div>當前鼠標位置:
<span></span>
</div>
<div>頁面被調(diào)整次數(shù): <b></b></div>
<input type="text">
</body>
</html>
批改老師:天蓬老師批改時間:2019-08-22 15:33:33
老師總結(jié):jQuery官方推薦使用on()和off()來綁定或取消事件, 如果直接用click, 只支持冒泡, 并且 同一事件只能觸發(fā)一次