一.简答题
1.答
鼠标事件 :click、mouseover、mouseout、mouseenter、mouseleave
键盘事件 :keydown、keyup、keypress
浏览器事件:resize
2.答
show():可以控制元素的显示,还能定义显示元素时的效果,如显示速度。
hide():可以控制元素的隐藏,还能定义隐藏元素时的效果,如隐藏速度。
toggle():除了可以模拟鼠标的连续单击事件外,还能用于切换元素的可见状态。
fadeIn():控制元素淡入,同时可以定义元素淡入时的效果,如显示速度。
fadeOut():元素淡出,同时可以定义元素淡出时的效果,如淡出速度。
slideUp():元素从下到上缩短直至隐藏。
slideDown():元素会从上向下延伸显示。
animate():可以自定义动画,例如实现字体大小、位置等变化。
3.答
(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("./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>
</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" ></script>
<script>
$(document).ready(function () {
$("#nav .navsBox .firstNav").click(function(){
var $list = $("#nav .navsBox ul");
$list.toggle();
});
$("#nav .navsBox ul li").mouseover(function(){
$(this).addClass("onbg"); //为该元素添加类样式.onbg
}).mouseout(function(){
$(this).removeClass("onbg");//为该元素移除类样式.onbg
});
});
</script>
</body>
</html>
<!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(images/point.jpg) no-repeat 15px center;
}
#menu ul.nav li.lastone{
border:none;
cursor:pointer;
background:#fff url(images/up.jpg) no-repeat center top;
}
#menu ul.nav li.up{
background:#fff url(images/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" ></script>
<script>
$(document).ready(function(){
$("#menu li.lastone").click(function(){
//切换菜单
$("#menu li:gt(6):not(:last)").toggle();
//更换底部夹头方向
$(this).toggleClass("up");
});
});
</script>
</body>
</html>