jquery动画与事件案例
代码都已经测试通过，直接打开注释即可看见效果！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//鼠标单击事件
/*$("#div1").click(function(){
alert('a');
});*/
//鼠标移动上的事件
/*$("#div1").mousemove(function(){
$(this).css("background","yellow");
});*/
//鼠标离开事件
/*$("#div1").mouseout(function(){
$(this).css("background","green");
});*/
//鼠标指针进入时
/*$("#div1").mouseenter(function(){
$(this).css("background","pink");
});*/
//鼠标指针离开时
/*$("#div1").mouseleave(function(){
$(this).css("background","red");
});*/
//用户按下键盘的时间
/*$("[name='pass']").keydown(function(){
alert("按下了键");
});*/
//用户释放键盘的时间
/*$("[name='pass']").keyup(function(){
alert("释放了键");
});*/
//当键盘或按钮被按下时
/*$("[name='pass']").keypress(function(){
alert("按下了键");
});*/
//获得焦点
/*$("[name='pass']").focus(function(){
alert("聚焦");
});*/
//失去焦点
/*$("[name='pass']").blur(function(){
alert("失去焦点");
});*/
//绑定单个事件
/*$("#div2").bind("click",function(){
alert('单击完了');
})*/
//绑定多个事件
/*$("#div2").bind({
mouseover:function(){
$(this).css("background","red");
},
mouseout:function(){
$(this).css("background","yellow");
}
});*/
//移除绑定的事件
/*$("#div2").unbind("mouseover");*/
//toggle()方法，相当于模拟鼠标多次单击事件
/*$("p").toggle(
function(){
$(this).css("background","red")
},
function(){
$(this).css("background","orange")
},
function(){
$(this).css("background","yellow")
},
function(){
$(this).css("background","green")
},
function(){
$(this).css("background","cyan")
},
function(){
$(this).css("background","blue")
},
function(){
$(this).css("background","people")
}
);*/
//动画，jquery显示和隐藏
/*$("p").hide();
$("#div2").click(function(){
$("p").show("300");
});*/
//隐藏
/*$("#div2").click(function(){
$("p").hide("300");
});*/
//改变元素的透明度(淡入和淡出)
//淡入
/*$("p").hide();
$("#div2").click(function(){
$("p").fadeIn("slow");
})*/
//淡出
/*$("#div2").click(function(){
$("#div1").fadeOut("slow");
})*/
//改变元素的高度
/*$("#div2").click(function(){
$("#div1").slideUp("slow");
})*/
/*$("#div1").hide("3000");
$("#div2").click(function(){
$("#div1").slideDown("slow");
})*/
})
</script>
<style type="text/css">
#div1{
width: 200px;
height: 150px;
background: pink;
border-radius: 5px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
#div2{
width: 200px;
height: 150px;
background: blueviolet;
border-radius: 5px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div1">
按钮1
<p style="background: brown;">p1</p>
</div>
<div id="div2">
按钮2
</div>
密码<input type="password" name="pass" />
</body>
</html>
