一、本课目标
-掌握jQuery的复合事件
二、复合事件
- hover()方法
- toggle()方法
2.1hover()方法
hover()方法相当于mouseover与mouseout()事件的组合
语法：
hover(enter, leave)
分析：
image.png
示例代码：
html文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>当当图书导航</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="top">
<div class="wrap">
<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
<ul class="top-m right">
<li><a href=""><i class="top-car left"></i>购物车</a></li>
<li class="line"></li>
<li><a href="">我的订单</a></li>
<li class="line"></li>
<li><a href="">当当自出版</a></li>
<li class="line"></li>
<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
<li class="line"></li>
<li class="on">
<a href="" class="menu-btn">我的当当</a>
<ul class="topDown">
<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>
</ul>
</li>
<li class="line"></li>
<li><a href="" class="menu-btn">企业采购</a></li>
<li class="line"></li>
<li><a href="" class="menu-btn">客户服务</a></li>
<li class="line"></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="wrap">
<a href=""><img src="images/logo.jpg"/></a>
</div>
<div class="nav-box">
<div class="wrap">
<ul class="nav-ul">
<li class="all"><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><a href="">海外购</a></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/index.js"></script>
</body>
</html>
css文件：
*{padding:0;margin:0;}
html{color:#404040;font-size:12px;font-family:"Arial","微软雅黑";}
a{text-decoration:none;color:#1a66b3;}
ul{list-style:none;}
.left{float:left;}
.right{float:right;}
.hide{display:none;}
.clearfix{clear:both;overflow:hidden;height:0;}
.wrap{width:1200px;margin:0 auto;}
/**头部**/
.top{height:32px;background:#f9f9f9;padding-top:2px;line-height:32px;border-bottom:1px solid #f2f2f2}
.top,.top a{color:#646464;}
.top a:hover{color:#ff2832;}
.top-l .top-login{color:#ff2832;margin-right:5px;}
.top-m > li{float:left;height:22px;line-height:22px;padding-top:5px;}
.top-m > li.line{width:1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;}
.top-m > li a{display:block;padding:0 8px;}
.top-m > li a.menu-btn{padding-right:27px;background:url(../images/home_sprite.png) no-repeat right -307px;}
.top-m > li a i{margin-right:6px;margin-top:3px;}
.top-m > li.on{position:relative;border:1px #e6e6e6 solid;background:#fff;}
.top-m ul.topDown{position:absolute;border:1px #e6e6e6 solid;border-top:0;width:100%;top:27px;left:-1px;background:#fff;display:none;}
.top-m ul.topDown li{line-height:24px;}
.top-m ul.topDown li a{display:block;padding-left:10px;color:#000;}
.top-m ul.topDown li a:hover{background:#f2f2f2;color:#000;}
.top-m .top-car{width:15px;height:14px;background:url(../images/home_sprite.png) no-repeat -40px -86px;}
.top-m .top-tel{width:11px;height:16px;background:url(../images/home_sprite.png) no-repeat -40px -70px;}
.nav-box{height:36px;line-height:36px;background:#ff2832;color:#fff;}
.nav-box li{float:left;}
.nav-box li a{display:block;padding:0 15px;color:#fff;font-weight:bold;font-size:14px;}
.nav-box .all{width:190px;border:2px transparent solid;border-width:0 2px;margin-right:18px;}
.nav-box .all a,.nav-box .all a:hover{padding-left:20px;padding-right:0;background:url(../images/home_sprite.png) no-repeat 161px -567px;}
.nav-box li.on{position:relative;}
.nav-box li .topDown{position:absolute;width:120px;background:#fff;top:24px;left:0;}
js文件：
$(document).ready(function(){
// 使用hover方法来mouseinter和mouseleave
$(".top-m .on").hover(function(){
$(".topDown").show();
},
function(){
$(".topDown").hide();
}
);
/**主菜单鼠标移上时背景颜色加深**/
$(".nav-ul a").mouseover(function(){
$(this).css("background-color","#f01e28");
});
$(".nav-ul a").mouseout(function(){
$(this).css("background-color","#ff2832");
});
});
2.2toggle方法
toggle方法用于模拟鼠标连输click事件。
1、带参数
语法：
toggle(fn1, fn2,...., fnN);
2、不带参数
与show()和hide()方法作用一样
3、toggleClass()可以对样式进行切换
总体示例代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景颜色变化</title>
<style type="text/css">
.red{
font-size: 28px;
color: red;
}
</style>
</head>
<body>
<input type="button" value="点我吧">
<p>我一会显示一会隐藏</p>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 使用toggle方法来模拟鼠标连续click事件，这些事件执行完一轮之后会循环
// $("input").toggle(
// function(){$("body").css("background","#ff0000");},
// function(){$("body").css("background","#00ff00");},
// function(){$("body").css("background","#0000ff");}
// )
// $("input").click(function(){$("p").toggle();})
//
$("input").click(function(){$("p").toggleClass("red");})
})
</script>
</body>
</html>
image.png
三、总结
image.png
