摘要：<!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')//當input元素失去焦點時背景色變?yōu)榧t色
})
$('#input').focus(function(){
$(this).css('background-color','blue')//當input元素獲得焦點時背景色變?yōu)樗{色
})
$('#input1').change(function(){
$(this).css('background-color','pink')//當input元素的值發(fā)生改變時背景色變?yōu)榉凵? })
$('button').click(function(){
if($('#box').show()){
$('#box').hide()//點擊button按鈕判斷div顯示變?yōu)殡[藏
} else {
$('#box').show()//點擊button按鈕判斷div隱藏變成顯示(這里不執(zhí)行)
}
})
$('#box').dblclick(function(){
$(this).css('background-color','pink')//鼠標雙擊div元素改變當前背景顏色為粉色
})
a = 1
$(window).resize(function(){
$('span').text(a++)//當瀏覽器窗口被調(diào)整后，調(diào)整次數(shù)加一
})
$(document).mousemove(function(aa){
$('b').text('x:' + aa.pageX + 'y:' + aa.pageY)//當鼠標經(jīng)過文檔某個位置顯示當前位置的X、Y
})
$('#down').mousedown(function(){
$(this).css('background-color','red')//當鼠標按下#down時背景顏色變?yōu)榧t色
})
$('#down').mouseup(function(){
$(this).css('background-color','#000')//當鼠標松開#down時背景顏色變?yōu)楹谏? })
b=1
$('#div1').mouseover(function(){
$('#sp1').text(b++)//當鼠標進入#div1和進入#sp1或者從#sp1回到#div1都會觸發(fā)mouseover
})
c=1
$('#div2').mouseenter(function(){
$('#sp2').text(c++)//當鼠標進入#div2(包括子元素)一共觸發(fā)一次mouseenter
})
d=1
$('#div3').mousemove(function(){
$('#sp3').text(d++)//當鼠標在#div3(包括子元素)中移動一個像素，就會觸發(fā)mousemove
})
e=1
$('#div4').mouseleave(function(){
$('#sp4').text(e++)//當鼠標從#div4(包括子元素)中移出一共觸發(fā)一次mouseleave
})
f=1
$('#div5').mouseout(function(){
$('#sp5').text(f++)//當鼠標從#div5或者子元素移出都會觸發(fā)mouseout
})
})
</script>
<label>獲得失去焦點測試：</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>點擊</button>
<p>當前瀏覽器窗口被調(diào)整：<span></span>次</p>
<p>當前鼠標位置：<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>
