????：<!DOCTYPE html>
<html>
<head>
<title>jQuery事件</title>
<script type="text/javascript" src="http://apps
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
div {
border: solid red 5px;
margin: 10px;
width: 90%;
height: 50px;
}
input {
margin: 10px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#input').blur(function(){
$(this).css('background-color','red')//當(dāng)input元素失去焦點(diǎn)時(shí)背景色變?yōu)榧t色
})
$('#input').focus(function(){
$(this).css('background-color','blue')//當(dāng)input元素獲得焦點(diǎn)時(shí)背景色變?yōu)樗{(lán)色
})
$('#input1').change(function(){
$(this).css('background-color','pink')//當(dāng)input元素的值發(fā)生改變時(shí)背景色變?yōu)榉凵? })
$('button').click(function(){
if($('#box').show()){
$('#box').hide()//點(diǎn)擊button按鈕判斷div顯示變?yōu)殡[藏
} else {
$('#box').show()//點(diǎn)擊button按鈕判斷div隱藏變成顯示(這里不執(zhí)行)
}
})
$('#box').dblclick(function(){
$(this).css('background-color','pink')//鼠標(biāo)雙擊div元素改變當(dāng)前背景顏色為粉色
})
a = 1
$(window).resize(function(){
$('span').text(a++)//當(dāng)瀏覽器窗口被調(diào)整后，調(diào)整次數(shù)加一
})
$(document).mousemove(function(aa){
$('b').text('x:' + aa.pageX + 'y:' + aa.pageY)//當(dāng)鼠標(biāo)經(jīng)過文檔某個(gè)位置顯示當(dāng)前位置的X、Y
})
$('#down').mousedown(function(){
$(this).css('background-color','red')//當(dāng)鼠標(biāo)按下#down時(shí)背景顏色變?yōu)榧t色
})
$('#down').mouseup(function(){
$(this).css('background-color','#000')//當(dāng)鼠標(biāo)松開#down時(shí)背景顏色變?yōu)楹谏? })
b=1
$('#div1').mouseover(function(){
$('#sp1').text(b++)//當(dāng)鼠標(biāo)進(jìn)入#div1和進(jìn)入#sp1或者從#sp1回到#div1都會(huì)觸發(fā)mouseover
})
c=1
$('#div2').mouseenter(function(){
$('#sp2').text(c++)//當(dāng)鼠標(biāo)進(jìn)入#div2(包括子元素)一共觸發(fā)一次mouseenter
})
d=1
$('#div3').mousemove(function(){
$('#sp3').text(d++)//當(dāng)鼠標(biāo)在#div3(包括子元素)中移動(dòng)一個(gè)像素，就會(huì)觸發(fā)mousemove
})
e=1
$('#div4').mouseleave(function(){
$('#sp4').text(e++)//當(dāng)鼠標(biāo)從#div4(包括子元素)中移出一共觸發(fā)一次mouseleave
})
f=1
$('#div5').mouseout(function(){
$('#sp5').text(f++)//當(dāng)鼠標(biāo)從#div5或者子元素移出都會(huì)觸發(fā)mouseout
})
})
</script>
<label>獲得失去焦點(diǎn)測試：</label><input id="input" type="text" name=""><br>
<label>元素值改變測試：</label><input id="input1" type="text" name=""><br>
<p id="box" style="width: 100px; height: 100px; background-color: #ccc;">
</p>
<button>點(diǎn)擊</button>
<p>當(dāng)前瀏覽器窗口被調(diào)整：<span></span>次</p>
<p>當(dāng)前鼠標(biāo)位置：<b></b></p>
<p id="down" style="width: 100px; height: 100px; background-color: #ccc"></p>
<p>通過mouseover事件觸發(fā)<span id="sp1"></span>次</p>
<div id="div1">
<input type="button" id="bt1" value="bt1">
<input type="button" id="bt2" value="bt2">
</div>
<p>通過mouseenter事件觸發(fā)<span id="sp2"></span>次</p>
<div id="div2">
<input type="button" id="bt3" value="bt3">
<input type="button" id="bt4" value="bt4">
</div>
<p>通過mousemove事件觸發(fā)<span id="sp3"></span>次</p>
<div id="div3">
<input type="button" id="bt5" value="bt5">
<input type="button" id="bt6" value="bt6">
</div>
<p>通過mouseleave事件觸發(fā)<span id="sp4"></span>次</p>
<div id="div4">
<input type="button" id="bt7" value="bt7">
<input type="button" id="bt8" value="bt8">
</div>
<p>通過mouseout事件觸發(fā)<span id="sp5"></span>次</p>
<div id="div5">
<input type="button" id="bt9" value="bt9">
<input type="button" id="bt4" value="bt10">
</div>
</body>
</html>
