<!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元素失去焦点时背景色变为红色
})
$('#input').focus(function(){
$(this).css('background-color','blue')//当input元素获得焦点时背景色变为蓝色
})
$('#input1').change(function(){
$(this).css('background-color','pink')//当input元素的值发生改变时背景色变为粉色
})
$('button').click(function(){
if($('#box').show()){
$('#box').hide()//点击button按钮判断div显示变为隐藏
} else {
$('#box').show()//点击button按钮判断div隐藏变成显示(这里不执行)
}
})
$('#box').dblclick(function(){
$(this).css('background-color','pink')//鼠标双击div元素改变当前背景颜色为粉色
})
a = 1
$(window).resize(function(){
$('span').text(a++)//当浏览器窗口被调整后，调整次数加一
})
$(document).mousemove(function(aa){
$('b').text('x:' + aa.pageX + 'y:' + aa.pageY)//当鼠标经过文档某个位置显示当前位置的X、Y
})
$('#down').mousedown(function(){
$(this).css('background-color','red')//当鼠标按下#down时背景颜色变为红色
})
$('#down').mouseup(function(){
$(this).css('background-color','#000')//当鼠标松开#down时背景颜色变为黑色
})
b=1
$('#div1').mouseover(function(){
$('#sp1').text(b++)//当鼠标进入#div1和进入#sp1或者从#sp1回到#div1都会触发mouseover
})
c=1
$('#div2').mouseenter(function(){
$('#sp2').text(c++)//当鼠标进入#div2(包括子元素)一共触发一次mouseenter
})
d=1
$('#div3').mousemove(function(){
$('#sp3').text(d++)//当鼠标在#div3(包括子元素)中移动一个像素，就会触发mousemove
})
e=1
$('#div4').mouseleave(function(){
$('#sp4').text(e++)//当鼠标从#div4(包括子元素)中移出一共触发一次mouseleave
})
f=1
$('#div5').mouseout(function(){
$('#sp5').text(f++)//当鼠标从#div5或者子元素移出都会触发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>当前浏览器窗口被调整：<span></span>次</p>
<p>当前鼠标位置：<b></b></p>
<p id="down" style="width: 100px; height: 100px; background-color: #ccc"></p>
<p>通过mouseover事件触发<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事件触发<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事件触发<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事件触发<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事件触发<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>
