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>
jquery动画与事件案例

猜你喜欢
