jQuery笔记之动画以及tab的切换

来源：互联网发布：mysql 查询日志开启编辑：程序博客网时间：2024/04/28 10:50

通过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>

对其总结

0 0