JavaScript 第七章作业

1.jQuery中有哪些基础事件方法？

鼠标事件 ：click、mouseover、mouseout、mouseenter、mouseleave
键盘事件 ：keydown、keyup、keypress
浏览器事件：resize

2.jQuery中常用的动画方式有哪些？并简述他们的特点。

show()：可以控制元素的显示，还能定义显示元素时的效果，如显示速度。
hide()：可以控制元素的隐藏，还能定义隐藏元素时的效果，如隐藏速度。
toggle()：除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态。
fadeIn()：控制元素淡入，同时可以定义元素淡入时的效果，如显示速度。
fadeOut()：元素淡出，同时可以定义元素淡出时的效果，如淡出速度。
slideUp()：元素从下到上缩短直至隐藏。
slideDown()：元素会从上向下延伸显示。
animate()：可以自定义动画，例如实现字体大小、位置等变化。

3.将一个HTML DOM元素隐藏有哪些方式？

（1）使用css()或addClass()方法该变元素的display样式的值为none。
（2）调用hide()方法。
（3）调用toggle()切换元素的可见状态。
（4）调用fadeOut()或slideUp()隐藏元素。

4.制作页面导航特效，初始状态下仅显示"购物特权"主菜单，单击"购物特权"二级菜单在显示和隐藏之间切换，当鼠标放到二级子菜单上时，子菜单添加背景颜色
实现代码如下:

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>导航特效</title>
		<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: #F2F2F2 33px 7px no-repeat;
			}
			
			#nav .navsBox ul li.jedh {
				background-image: url(img/huan.gif);
			}
			
			#nav .navsBox ul li.jlbbyk {
				background-image: url(img/you.gif);
			}
			
			#nav .navsBox ul li.jwljb {
				background-image: url(img/gouwu.gif);
			}
			
			#nav .navsBox ul li.mrljb {
				background-image: url(img/meiri.gif);
			}
			
			#nav .navsBox ul li.vipjtj {
				background-image: url(img/zhe.gif);
			}
			
			#nav .navsBox ul li.onbg {
				background-color: #F9DBD1;
			}
			
			#nav .navsBox ul li a {
				color: #000;
				text-decoration: none;
			}
		</style>
	</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>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#nav .navsBox .firstNav').click(function(){
					var list = $('#nav .navsBox ul');
					list.toggle();
				});
				$('#nav .navsBox ul li').mousemove(function(){
					$(this).addClass('onbg');
				}).mouseout(function(){
					$(this).removeClass('onbg');
				})
			})
		</script>
	</body>

</html>

5.制作导航列表页面，当单击底部箭头时，隐藏菜单项的后四项，并且箭头向下，再次单击底部箭头，显示隐藏的菜单项，并且底部箭头向上
实现代码如下:

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>FAQ列表</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 12px;
			}
			
			a {
				color: #000;
				text-decoration: none;
			}
			
			#menu {
				margin: 30px;
				width: 188px;
				background-color: #EFFDFA;
			}
			
			#menu .top {
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				font-weight: bold;
				text-align: center;
				border: 1px solid #93D6C5;
				border-bottom: none;
			}
			
			#menu ul.nav {
				list-style: none;
			}
			
			#menu ul.nav li {
				display: block;
				height: 30px;
				line-height: 30px;
				border: 1px solid #93D6C5;
				border-top: none;
				padding-left: 30px;
				background: url(img/point.jpg) no-repeat 15px center;
			}
			
			#menu ul.nav li.lastone {
				border: none;
				cursor: pointer;
				background: #fff url(img/up.jpg) no-repeat center top;
			}
			
			#menu ul.nav li.up {
				background: #fff url(img/down.jpg) no-repeat center top;
			}
			
			span.icon {
				float: right;
				margin-right: 10px;
				margin-top: 10px;
			}
		</style>

	</head>

	<body>
		<div id="menu">
			<div class="top">全部商品详细分类</div>
			<ul class="nav">
				<li>
					<a href="#">尾品汇</a>
				</li>
				<li>
					<a href="#">图书音像数字管</a>
				</li>
				<li>
					<a href="#">美妆个护</a>
				</li>
				<li>
					<a href="#">家具、家纺、家装</a>
				</li>
				<li>
					<a href="#">鞋靴、箱包</a>
				</li>
				<li>
					<a href="#">珠宝装饰</a>
				</li>
				<li>
					<a href="#">手表/眼镜/礼品</a>
				</li>
				<li>
					<a href="#">运动户外</a>
				</li>
				<li>
					<a href="#">食品、茶、酒</a>
				</li>
				<li>
					<a href="#">手机、数码</a>
				</li>
				<li>
					<a href="#">电脑办公</a>
				</li>
				<li class="lastone"></li>
			</ul>
		</div>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#menu li.lastone').click(function(){
					$('#menu li:gt(5):not(:last)').toggle();
					$(this).toggleClass('up');
				})
			})
		</script>
	</body>

</html>

JavaScript 第七章 作业

猜你喜欢

JavaScript 第七章作业