两周的时间教会我，要低头做人（jQuery实现京东购物车）
生活随笔
收集整理的这篇文章主要介绍了
两周的时间教会我，要低头做人（jQuery实现京东购物车）
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
漫长的两周从HTML到css再到JavaScript最后jQuery；从刚开始的欢喜，激动，兴奋；
到最后的抓狂！本以为前段很简单，那全是扯淡；真的不容易！
废话不多说了今天最后一份，京东购物车的实现；希望能帮到你！
HTML文件
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><!--引入样式--><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/jd.css"/><link rel="stylesheet" type="text/css" href="icon/iconfont.css"/><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="js/jd.js"></script></head><body ><!--导航栏开始--><div class="nav"><div class="fir"><ul class="nav_ul1"><li><i class="iconfont"></i><a href="https://global.jd.com/">京东首页</a></li><li><i class="iconfont"></i><select><option>海外</option><option>港澳</option><option>大陆</option></select></li></ul><ul class="nav_ul2"><li><a href="https://order.jd.com/center/list.action">我的订单</a></li><li><span>|</span><a href="https://home.jd.com/">我的京东</a></li><li><span>|</span><a href="https://vip.jd.com/">京东会员</a></li><li><span>|</span><a href="https://b.jd.com/">企业采购</a></li><li><span>|</span><select><option>客户服务</option><option>客户</option><option>商户</option></select></li><li><span>|</span><select><option>网站导航</option><option>特殊主题</option><option>行业频道</option><option>生活服务</option><option>更多精彩</option></select></li><li><span>|</span><a href="https://app.jd.com/">手机京东</a></li></ul></div></div><!--导航栏结束--><!--搜索框开始--><div class="search"><div class="fir"><img src="img/jdlogo-201708-@1x.png"/><div class="search_div"><input type="text" class="search_text"/><button class="search_bt">搜索</button></div></div> </div><!--搜索框结束--><!--标题栏开始--><div class="title fir"> <h3>全部商品</h3><div class="title_1"><i>配送至：</i><select><option>海外</option><option>大陆</option><option>港澳</option></select></div></div><!--标题栏结束--><!--显示栏开始--><div class="typs fir"><ul><li><input type="checkbox" name="fav1" id="ches" /></li><li >全选</li><li >商品</li><li >单价</li><li >数量</li><li >小计</li><li >操作</li></ul></div><!--显示栏结束--><!--空白开始--><div class="kb fir"></div><!--空白结束--><!--商品展示栏开始--><div class="info fir"><ul class="ul_1"><li class="info_1"><input type="checkbox" name="fav" "/></li><li class="info_2"><img src="img/0f96fe7f6a8596a0.jpg" width="100px"/></li><li class="info_3"><i class="info_i">京品手机</i>荣耀20青春版 </li><li class="info_4">冰岛幻境</li><li class="info_5">￥1299.00</li><li class="info_6"><button class="bu1" onclick="zhongJia(),zengjian(this,1)">-</button></li><li class="info_7"><input type="text" class="hj" value="1" /></li><li class="info_8"><button class="bu2" onclick="zengjian(this,0),zhongJia()">+</button></li><li class="info_9"><b class="jia">￥1299.00</b></li><li class="info_10"><a href="javascript:void(0)" onclick="checkTest4(this)">删除</a><br />移入关注</li></ul></div><div class="info fir"><ul class="ul_1"><li class="info_1"><input type="checkbox" name="fav" "/></li><li class="info_2"><img src="img/0f96fe7f6a8596a0.jpg" width="100px"/></li><li class="info_3"><i class="info_i">京品手机</i>荣耀20青春版 </li><li class="info_4">冰岛幻境</li><li class="info_5">￥1299.00</li><li class="info_6"><button class="bu1" onclick="zhongJia(),zengjian(this,1)">-</button></li><li class="info_7"><input type="text" class="hj" value="1" /></li><li class="info_8"><button class="bu2" onclick="zengjian(this,0),zhongJia()">+</button></li><li class="info_9"><b class="jia">￥1299.00</b></li><li class="info_10"><a href="javascript:void(0)" onclick="checkTest4(this)">删除</a><br />移入关注</li></ul></div><div class="info fir"><ul class="ul_1"><li class="info_1"><input type="checkbox" name="fav" "/></li><li class="info_2"><img src="img/0f96fe7f6a8596a0.jpg" width="100px"/></li><li class="info_3"><i class="info_i">京品手机</i>荣耀20青春版 </li><li class="info_4">冰岛幻境</li><li class="info_5">￥1299.00</li><li class="info_6"><button class="bu1" onclick="zhongJia(),zengjian(this,1)">-</button></li><li class="info_7"><input type="text" class="hj" value="1" /></li><li class="info_8"><button class="bu2" onclick="zengjian(this,0),zhongJia()">+</button></li><li class="info_9"><b class="jia">￥1299.00</b></li><li class="info_10"><a href="javascript:void(0)" onclick="checkTest4(this)">删除</a><br />移入关注</li></ul></div><!--商品展示栏结束--><!--结算栏开始--><div class="check fir"><ul class="check_ul1"><li><input type="checkbox" name="fav1" id="ches1"/></li><li>全选</li><li><a href="javascript:void(0)" id="delsp" ">删除选中的商品</a></li><li><a href="">移入关注</a></li><li><a href=""><b>清理购物车</b></a></li></ul><ul class="check_ul2"><li>已选择<span id="zos">0</span>件商品</li><li class="zj1">总价：</li><li class="zj2" id="zongj">0</li><li><button><a href="">去结算</a></button></li></ul></div><!--结算栏结束--><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></body> </html>
CSS文件
Jd.css
/*导航开始*/ .nav{height: 40px;background-color: #e3e4e5;}.fir{width: 1000px;margin: 0px auto;} .nav_ul1,{float: left;} .nav_ul1 li, .nav_ul2 li,.nav_ul2 span{float: left;margin-right: 15px;line-height: 40px;}.nav_ul1 a , .nav_ul2 a , .nav_ul2 span , .nav_ul2 select , .nav_ul1 select{color: gray;font-family: "黑体";font-size: 13px; }.nav_ul2 select , .nav_ul1 select{border: 0px;background-color: #e3e4e5;}.nav a:hover{color: red; } .nav_ul2{float: right; }/*导行结束*//*搜索框开始*/.search{margin: 35px; } .search img{float: left;} .search_div{float: right;margin-top: 8px; } .search_text{width: 336px;height: 23px;border: 3px solid #c91623;position: relative;left: 6px;} .search_bt{height: 31px;width: 51px;border: 0px;background-color: #c91623;color: #FFFFFF;}/*搜索框结束*/ /*标题栏开始*/.title{margin-top: 127px; } .title h3{float: left;color: #e2231a;font-size: 23px;} .title_1{float: right;} .title_1 select{width: 180px;border-color:gainsboro ; } /*标题栏计算*/ /*显示栏开始*/ .typs{margin-top: 170px;height: 50px;background-color: #f3f3f3;} .typs li{float: left;line-height: 50px;font-size: 12px;font-family: "新宋体";} .typs input{margin-left: 10px; } .typs li:nth-child(2){margin-left: 8px; } .typs li:nth-child(3){margin-left: 100px; } .typs li:nth-child(4){margin-left: 384px; } .typs li:nth-child(5){margin-left: 100px; } .typs li:nth-child(6){margin-left: 130px; } .typs li:nth-child(7){margin-left:55px ; } /*显示栏结束*/ /*空白开始*/ .kb{height: 45px;} /*空白结束*/ /*商品展示栏开始*/.info{height: 150px;background-color: #fff4e8;width: 1000px;border: 1px solid gainsboro; } .info li{float: left;margin-top:35px ; } .info_2{margin-left: 8px;} .info_1{margin-left: 4px; }.info_3{margin-left: 20px; } .info_i{background-color: red;color: white; } .info_4{margin-left: 20px; } .info_5{margin-left:165px ; } .info_6{margin-left: 60px;} .bu1{width: 24px; } .info_7 input{width: 20px;text-align: center; } .info_9 b{margin-left: 72px; } .info_10{margin-left: 20px; } /*商品展示栏结束*/ /*结算栏开始*/ .check{height: 50px;border: 1px solid gainsboro;margin-top: 20px;position: fixed;bottom: -1px;background: #e5e5e5;margin-left: 259px;} .check_ul1 li,.check_ul1,.check_ul2 li{float: left;line-height: 50px;} .check li:nth-child(3),.check li:nth-child(4),.check li:nth-child(5){margin-left: 12px; } .check_ul1 a:hover{color: red; } .check_ul1 i:nth-child(1){color: darkgrey;font-family: "黑体";font-size: 14px; } .check_ul1 a{color: darkgrey;font-family: "黑体";font-size: 14px; } .check_ul2{float: right; } .zj1{color: gray;font-family: "黑体";font-size: 13px; } .zj2{font-weight: bold;color: red;position: relative;left: -5px; } .check_ul2 button{background-color: #e64347;border: 0px;width: 100px;height: 50px;font-weight: bold;font-size: 20px;font-family: "黑体"; } .check_ul2 a{color: #FFFFFF; } .check_ul2 li:first-child{margin-left:-139px ; } .check_ul2 span{font-weight: bold;color: red;font-size: 20px;} /*结算栏结束*/Reset.css
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px; padding: 0px;} body{text-align: center;font-size:14px;} a{text-decoration: none;} li{list-style: none;}JavaScript文件
$(function(){//判断是否全选$("#ches").click(function(){var flag = $(this).prop("checked");$("input[name=fav]").prop("checked",flag);$("#ches1").prop("checked",flag);zhongJia()})$("#ches1").click(function(){var flag = $(this).prop("checked");$("input[name=fav]").prop("checked",flag);$("#ches").prop("checked",flag);zhongJia()})//删除所选项$("#delsp").click(function(){//获取已被选中的项var del = $("input[name=fav]:checked");if(del.length==0){alert("至少选择一行");}else{del.parent().parent().parent().remove();}zhongJia()})//判断是否全选的操作$("input[name=fav]").click(function(){var flag = true;//获得名字为fav的inputvar che = $("input[name=fav]");//遍历che.each(function(){if(!$(this).prop("checked")){flag = false;return;}})//全选框是否勾选；$("#ches").prop("checked",flag);$("#ches1").prop("checked",flag);zhongJia();})})//计算总价以及总数的方法 function zhongJia(){//商品总价var zong = 0;//商品数量var zs = 0;var shu = 0;var che = $("input[name=fav]");che.each(function(){if($(this).prop("checked")){shu++;//获得单个商品总价var dan = $(this).parent().parent().find(".jia").html().split("￥")[1];//获得数量var sl = $(this).parent().parent().find(".hj").val();zong+=Number(dan);zs+=Number(sl);}$(".zj2").html("￥"+zong);$("#zos").html(zs);})if(shu==0){$(".zj2").html(0);$("#zos").html(0);}}//控制数量的增加与减少的方法 function zengjian(th,num){//获得单价var dan = $(th).parent().parent().find(".info_5").html().split("￥")[1];//获得单个商品总价var danz = $(th).parent().parent().find(".jia");//获得数量var sl = $(th).parent().parent().find(".hj");var zsl = Number(sl.val())+1;var jsl = Number(sl.val())-1; if(num==1){if(sl.val()>0){sl.val(jsl);}danz.html("￥"+dan*sl.val());}else{sl.val(zsl);danz.html("￥"+dan*sl.val());}}//删除方法 function checkTest4(th){//获得div父节点var div = $(th).parent().parent().parent();div.remove();zhongJia()}
最后在这里真心说一句，做什么都不容易；
但加油坚持，怎么都会有自己一批天地；
献给所有正在奋斗的人们；
总结
以上是生活随笔为你收集整理的两周的时间教会我，要低头做人（jQuery实现京东购物车）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 最简单实现多线程的方法（Thread)
- 下一篇： 网络协议知识总结