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>
		<  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: #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>
		<  src=\"js/jquery-1.12.4.js\" type=\"text/ \" charset=\"utf-8\"></ >
		<  type=\"text/ \">
			$(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\');
				})
			})
		</ >
	</body>

</html>

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

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

	<head>
		<  charset=\"UTF-8\">
		< >FAQ列表</ >
		<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>
		<  src=\"js/jquery-1.12.4.js\" type=\"text/ \" charset=\"utf-8\"></ >
		<  type=\"text/ \">
			$(document).ready(function(){
				$(\'#menu li.lastone\').click(function(){
					$(\'#menu li:gt(5):not(:last)\').toggle();
					$(this).toggleClass(\'up\');
				})
			})
		</ >
	</body>

</html>

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章