两周的时间教会我，要低头做人（jQuery实现京东购物车）

于 2020-12-09 00:31:28 发布
阅读量154 收藏 1
点赞数 1
分类专栏： 网页你好，我是小白； 文章标签： js css html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yhh924snoopy/article/details/110913986
版权
博主用两周时间学习了HTML、CSS和JavaScript，并最终通过jQuery实现了京东购物车功能。过程中经历了从兴奋到抓狂的情绪变化，认识到前端开发并不简单。本文分享了购物车的实现，希望对读者有所帮助。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

漫长的两周从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">&#xe644;</i>
						<a href="https://global.jd.com/">京东首页</a>
					</li>
					<li>
						<i class="iconfont">&#xe62a;</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的input
		var 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()
	
}

最后在这里真心说一句，做什么都不容易；
但加油坚持，怎么都会有自己一批天地；
献给所有正在奋斗的人们；

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值