通过demo进行验证
(1)演示删除动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
font-size: 12px;
}
#cart {
width: 602px;
}
#cart .tipsbox {
width: 200px;
border: 2px solid #aaa;
float: right;
}
</style>
<title>删除动画</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script>
$(function() {
$("#del").click(function() {
$(".tipsbox").show("slow");
});
//用了基本选择器中的交集选择器和属性选择器
$("input[name=cancel]").click(function() {
$(".tipsbox").hide("fast");
});
});
</script>
</head>
<body>
<div id="cart">
<table width="600" border="1" cellpadding="0" cellspacing="0">
<tr>
<th><input type="checkbox" /> 全选</th>
<th>商品信息</th>
<th>宜美惠价</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><img src="img/umbrella.gif" />
<a href="#">天堂直杆彩虹伞</a>
</td>
<td>¥32.9元</td>
<td><input type="text" value="1" /></td>
<td>
<a href="#" id="del">删除</a>
</td>
</tr>
</table>
<div class="tipsbox" style="display:none;">
<p>确定要删除吗?</p>
<p>
<input name="confirm" type="button" value="确认" class="btns" />
<input name="cancel" type="button" value="取消" class="btns" />
</p>
</div>
</div>
</body>
</html>
(2)演示可伸缩菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可伸缩菜单</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<style type="text/css">
ul {
list-style: none;
padding: 5px;
width: 210px;
border: 1px solid red;
}
a {
text-decoration: none;
line-height: 30px;
}
.menu_style li {
border-bottom: 1px solid #666;
}
</style>
<script>
$(function() {
//获取最底部的按钮
$("input[name=more_btn]").click(function() {
//将大于5的id全部隐藏起来
//toggle用于切换的点击事件
//用到了过滤器中以及基本选择器中的交集选择器
$("li:gt(5):not(:last)").toggle();
//淡入淡出
//$("li:gt(5):not(:last)").fadeOut(2000);
//$("li:gt(5):not(:last)").fadeIn(1000);
//改变元素高度
$("li:gt(5):not(:last)").slideUp("slow"); //用200毫秒快速将段落滑上
$("li:gt(5):not(:last)").slideDown("slow"); //用200毫秒快速将段落滑下
});
});
</script>
</head>
<body>
<div id="menu" class="menu_style">
<ul>
<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 id="menu_07" class="element_hide">
<a href="#">家居家纺、锅具餐具</a>
</li>
<li id="menu_08" class="element_hide">
<a href="#">生活电器、汽车生活</a>
</li>
<li id="menu_09" class="element_hide">
<a href="#">电脑、外设、办公用品</a>
</li>
<li class="btn">
<input name="more_btn" type="button" value="展开或关闭菜单项" />
</li>
</ul>
</div>
</body>
</html>
(3)演示tab的切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab的切换</title>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#tabs {
width: 290px;
height: 194px;
border: 1px solid #E7E5E4;
}
#tabs .tabs-top {
height: 33px;
background-color: #F7F5F4;
border: 1px solid #E4E4E4;
}
#tabs .tabs-top ul {
list-style: none;
}
#tabs .tabs-top ul li {
display: block;
float: left;
height: 22px;
line-height: 22px;
margin-top: 8px;
padding-left: 15px;
padding-right: 15px;
color: #666666;
cursor: pointer;
}
#tabs .tabs-top ul li.choosed {
border: 1px solid #E4E4E4;
border-top: 2px solid #ff0000;
border-bottom: 1px solid #F7F5F4;
color: #000000;
}
#tabs .tabs-body {
padding: 5px;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script>
$(function() {
//用到了后代选择器
/**
* 通过div中tabs ,找到他下面的所有后代tabs-top元素.<br>
* 然后通过tabs-top找到他下面所有后代的ul的元素<br>
* 最后通过ul找到他下面所有后代的li的元素
*/
$("#tabs .tabs-top ul li").click(function() {
//alert("das");
$(this).addClass("choosed");
//通过siblings找到同辈元素
$(this).siblings().removeClass("choosed");
//先把tabs-body隐藏起来
$("#tabs .tabs-body .content").hide();
//然后通过角标所对应的值
$("#tabs .tabs-body .content").eq($(this).index()).show();
});
});
</script>
<body>
<div id="tabs">
<div class="tabs-top">
<ul>
<li class="choosed">手机充值</li>
<li>彩票</li>
</ul>
</div>
<div class="tabs-body">
<div class="content">
<img src="img/content1.gif"></img>
</div>
<div class="content" style="display: none;">
<img src="img/content2.gif"></img>
</div>
</div>
</div>
</body>
</html>
对其总结