摘要：<!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>點擊</button><br />
<p>我愛PHP中文網(wǎng)</p>
當前鼠標的位置是：<span id="sp1"></span> <br />
當前調整窗口的次數(shù)是：<span id="sp2"></span>
</body>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script>
$(document).ready(function(){
//focus()獲取焦點事件
//blur()失去焦點事件
//change()文本域改變事件
//click()點擊事件
//dblclick()雙擊事件
//mousemove()鼠標指針在指定元素中移動觸發(fā)事件
//pageX()鼠標指針的水平位置 event.pageX
//pageY()鼠標指針的垂直位置 event.pageY
//mousedown()鼠標被按下時觸發(fā)
//mouseenter()鼠標指針穿過元素時
//mouseleave()鼠標指針離開元素時
//mouseover()鼠標指針位于元素上方時
//mouseout()鼠標指針離開元素時
//改變多個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("我愛PHP中文網(wǎng)")
})
$("#div1").mouseout(function(){
$("#div1").text("")
})
})
</script>
</html>
總結:通過選擇器選取要操作的元素,調用相應的事件方法,以此來改變元素的css樣式和文本內(nèi)容