jquery事件方法
<!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中文网</p>
当前鼠标的位置是：<span id="sp1"></span> <br />
当前调整窗口的次数是：<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()鼠标指针在指定元素中移动触发事件
//pageX()鼠标指针的水平位置 event.pageX
//pageY()鼠标指针的垂直位置 event.pageY
//mousedown()鼠标被按下时触发
//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中文网")
})
$("p").mouseenter(function(){
$("p").css("background","yellow")
})
$("p").mouseleave(function(){
$("p").css("background","#CCCCCC")
})
$("#div1").mouseover(function(){
$("#div1").text("我爱PHP中文网")
})
$("#div1").mouseout(function(){
$("#div1").text("")
})
})
</script>
</html>
总结:通过选择器选取要操作的元素,调用相应的事件方法,以此来改变元素的css样式和文本内容