abstrak：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> div{height: 100px;width: 100px;background: #CCCCCC;marg
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
div{height: 100px;width: 100px;background: #CCCCCC;margin: 10px 0px;}
p{background: #CCCCCC;}
</style>
<body>
輸入框1：<input type="text" id="box1"/><br />
輸入框2：<input type="text" value="" id="box2"/>
<div id="div1"></div>
<div id="div2"></div>
<button>點(diǎn)擊</button><br />
<p>我愛(ài)PHP中文網(wǎng)</p>
當(dāng)前鼠標(biāo)的位置是：<span id="sp1"></span> <br />
當(dāng)前調(diào)整窗口的次數(shù)是：<span id="sp2"></span>
</body>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script>
$(document).ready(function(){
//focus()獲取焦點(diǎn)事件
//blur()失去焦點(diǎn)事件
//change()文本域改變事件
//click()點(diǎn)擊事件
//dblclick()雙擊事件
//mousemove()鼠標(biāo)指針在指定元素中移動(dòng)觸發(fā)事件
//pageX()鼠標(biāo)指針的水平位置 event.pageX
//pageY()鼠標(biāo)指針的垂直位置 event.pageY
//mousedown()鼠標(biāo)被按下時(shí)觸發(fā)
//mouseenter()鼠標(biāo)指針穿過(guò)元素時(shí)
//mouseleave()鼠標(biāo)指針離開(kāi)元素時(shí)
//mouseover()鼠標(biāo)指針位于元素上方時(shí)
//mouseout()鼠標(biāo)指針離開(kāi)元素時(shí)
//改變多個(gè)CSS樣式
//$("選擇器").css({"屬性名1":"屬性值1","屬性名2":"屬性值2","屬性名3":"屬性值3"})
$("input").focus(function(){
$("#box1").css("background","pink")
})
$("input").blur(function(){
$("#box1").css("background","yellow")
})
$("input").change(function(){
$("#box2").css("background","gray")
})
$("button").click(function(){
$("div").css({"background":"red","border-radius":"50px"})
})
$("div").dblclick(function(){
$("div").css("background","red")
})
$(document).mousemove(function(xy){
$("#sp1").text("x:"+xy.pageX+"y:"+xy.pageY)
})
x=0
$(window).resize(function(){
$("#sp2").text(x=x+1)
})
$("#div2").mousedown(function(){
$("#div2").text("PHP中文網(wǎng)")
})
$("p").mouseenter(function(){
$("p").css("background","yellow")
})
$("p").mouseleave(function(){
$("p").css("background","#CCCCCC")
})
$("#div1").mouseover(function(){
$("#div1").text("我愛(ài)PHP中文網(wǎng)")
})
$("#div1").mouseout(function(){
$("#div1").text("")
})
})
</script>
</html>
總結(jié):通過(guò)選擇器選取要操作的元素,調(diào)用相應(yīng)的事件方法,以此來(lái)改變?cè)氐腸ss樣式和文本內(nèi)容