JQuery 第五章事件和动画上机+课后_jquery第五章上机作业-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36074043/article/details/70809340

这是一个关于JQuery事件和动画的实战教程，包括点击事件响应、鼠标悬停效果、元素背景颜色变化等。通过示例代码展示了如何使用JQuery实现导航栏的下拉菜单、登录表单的焦点样式切换以及页面元素的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<title>sj1.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}

#nav .navsBox {
	width: 160px;
}

#nav .navsBox .firstNav {
	height: 45px;
	line-height: 45px;
	background-color: #EBEBEB;
	border-left: 10px solid #FE705C;
	padding-left: 20px;
	width: 130px;
	font-weight: bold;
	cursor: pointer;
}

#nav .navsBox ul {
	display: none;
	list-style: none;
}

#nav .navsBox ul li {
	display: block;
	height: 45px;
	line-height: 45px;
	padding-left: 70px;
	width: 90px;
	background-color: #F2F2F2;
	background-position: 33px 7px;
	background-repeat: no-repeat;
}

#nav .navsBox ul li.jedh {
	background-image: url("./images/huan.gif");
}

#nav .navsBox ul li.jlbbyk {
	background-image: url("./images/you.gif");
}

#nav .navsBox ul li.jwljb {
	background-image: url("./images/gouwu.gif");
}

#nav .navsBox ul li.mrljb {
	background-image: url("./images/meiri.gif");
}

#nav .navsBox ul li.vipjtj {
	background-image: url("./images/zhe.gif");
}

#nav .navsBox ul li.onbg {
	background-color: #F9DBD1;
}

#nav .navsBox ul li a {
	color: #000;
	text-decoration: none;
}
</style>



<script type="text/javascript">
	$(document).ready(function() {
		$(".firstNav").click(function() {
			$("ul").css("display", "block");
			$("li").hover(function() {
				$(this).css("background-color", "pink");
			}, function() {
				$(this).css("background-color", "");
			});
		});

	});
</script>

</head>

<body>
	<div id="nav">
		<div class="navsBox">
			<div class="firstNav">购物特权</div>
			<ul>
				<li class="jedh"><a href="#">全额兑换</a>
				</li>
				<li class="jlbbyk"><a href="#">俱乐部包邮卡</a>
				</li>
				<li class="jwljb"><a href="#">购物领金币</a>
				</li>
				<li class="mrljb"><a href="#">每日领金币</a>
				</li>
				<li class="vipjtj"><a href="#">VIP阶梯价</a>
				</li>
			</ul>
		</div>
	</div>

</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>sj2.html</title>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
  <style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:12px;
}
#login{
	width:384px; 
	border:1px solid #999;
}
#login .top{
	height:70px;
	line-height:70px;
	padding-left:70px;
	width:314px;
	background:#F4F4F4 url(images/login.gif) no-repeat 26px  16px;
	font-size:14px;
	font-weight:bold;
}
#login .body{
	height:160px;
	padding:20px;
	width:344px;
	border-top:1px solid #999;	
	border-bottom:1px solid #999;	
}
#login .body div{
	height:50px;
	line-height:50px;
}
#login .body lable{
	text-align:right