摘要：<!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)指針穿過(guò)元素時(shí) 鼠標(biāo)移入時(shí)顏色發(fā)生改變
$('div.box3').mouseenter(function(){
$('div.box3').css('background','blue')
})
//當(dāng)鼠標(biāo)指針離開(kāi)元素時(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)在元素上松開(kāi)鼠標(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')
})
//按鍵按下過(guò)程中
$('input:text').keypress(function(){
$('input:text').css('background','#895b8a')
})
//按鍵按下
$('input:text').keydown(function(){
$('input:text').css('background','#006e54')
})
//按鍵松開(kāi)彈起
$('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)指針穿過(guò)元素時(shí) 鼠標(biāo)移入時(shí)顏色發(fā)生改變<br>
mouseleave() 當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí) 設(shè)置背景顏色<br>
mousedown() 當(dāng)鼠標(biāo)指針移動(dòng)到元素上方，并按下鼠標(biāo)按鍵時(shí)<br>
mouseup () 當(dāng)在元素上松開(kāi)鼠標(biāo)按鈕時(shí)<br>
<br>
鍵盤(pán)事件<br>
keypress() 鍵按下的過(guò)程<br>
keydown() 鍵被按下<br>
eyup() 鍵被松開(kāi)<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)指針的位置，相對(duì)于文檔的左邊緣 event.pageX event：必需參數(shù)來(lái)自事件綁定函數(shù)。<br>
pageY（）屬性是鼠標(biāo)指針的位置，相對(duì)于文檔的上邊緣 event.pageY event：必需參數(shù)來(lái)自事件綁定函數(shù)。<br>
load() 圖像全部加載時(shí) <br>
resize() 瀏覽器窗口調(diào)整<br>
scroll() 元素滾動(dòng)<br>
</div>
</body>
</html>
