jquery 获取div下的span_使用jquery实现jd购物车

最新推荐文章于 2021-11-27 09:48:51 发布
最新推荐文章于 2021-11-27 09:48:51 发布
阅读量266 收藏 2
点赞数
文章标签： jquery 获取div下的span

2fc4f52c02d05ce035e30464ab2626d4.png

首先实现我们还是把之前的html静态页面搭建好

530afbfc6b46e28f0ca21861aadd1310.png 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>jd 购物车</title>

		<link rel="stylesheet" type="text/css" href="../css/guifan.css" />
		<link rel="stylesheet" type="text/css" href="../css/jd.css" />
		<link rel="stylesheet" type="text/css" href="../icon/iconfont.css" />
		<script src="jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>

		<script src="jd/jss.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<!--导航开始-->
		<div class="nva">

			<div class="warp">

				<ul class="nav_ul1">
					<li><a href=""><i class="iconfont">&#xe616;</i>京东首页</a></li>
					<li><a href="">配送到：河南</a></li>
				</ul>
				<ul class="nav_ul2">
					<li><a href="">洋洋宝贝</a><span>|</span></li>
					<li><a href="">我的订单</a><span>|</span></li>
					<li><a href="">我的京东</a><span>|</span></li>
					<li><a href="">京东会员</a><span>|</span></li>
					<li><a href="">企业采购</a><span>|</span></li>
					<li><a href="">京东手机</a><span>|</span></li>
					<li><a href="">关注京东</a><span>|</span></li>
					<li><a href="">客户服务</a><span>|</span></li>
					<li><a href="">网站导航</a></li>
				</ul>

			</div>

		</div>

		<!--导航结束-->
		<!--搜索框开始-->

		<div class="search">
			<div class="warp">

				<img src="../img/logo.jpg" />
				<div class="search_div">
					<input type="text" class="ssearch_text" />
					<input type="button" value="搜索" class="search_but" />

				</div>

			</div>

		</div>

		<!--搜索框结束-->
		<!--标题开始-->
		<div class="title warp">
			<h3>全部商品</h3>
			<div>

				<span>配送至</span>
				<select>
					<option>信阳</option>
					<option>郑州</option>
					<option>平顶山</option>
					<option>驻马店</option>
					<option>安阳</option>

				</select>

			</div>
		</div>
		<!--标题结束-->
		<!--标题菜单开始-->
		<div class="tips warp">
			<ul>
				<li>
					<input type="checkbox" name="innam" id="_top" /> 全选
				</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ul>

		</div>

		<!--标题菜单结束-->

		<!--商品详情展示开始-->
		<div class="info warp">
			<ul>
				<li class="info_1">
					<input type="checkbox" name="inname" />
				</li>
				<li class="info_2"><img src="jd/jquery/img1.jpg" width="80px" /></li>
				<li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
				<li class="info_4"><a href="">          电脑</a></li>
				<li class="info_5"><strong>￥100</strong></li>
				<li class="info_6">
					<button class="bot">-</button>
					<input type="text" name="" id="iname" value="1" />
					<button class="bot">+</button>
				</li>
				<li class="info_7"><strong>￥100</strong></li>
				<li>
					<a onclick="sancu(this),oncktest2()" name="sss">删除</a>
					<br />
					<a>已到我的关注</a>

				</li>
			</ul>

		</div>
		<div class="info warp">
			<ul>
				<li class="info_1">
					<input type="checkbox" name="inname" />
				</li>
				<li class="info_2"><img src="../img/img1.jpg" width="80px" /></li>
				<li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
				<li class="info_4"><a href="">         洗衣液</a></li>
				<li class="info_5"><strong>￥200</strong></li>
				<li class="info_6">
					<button class="bot">-</button>
					<input type="text" name="" id="iname" value="1" />
					<button class="bot">+</button>
				</li>
				<li class="info_7"><strong>￥200</strong></li>
				<li>
					<a onclick="sancu(this),oncktest2()"name="sss">删除</a>
					<br />
					<a>已到我的关注</a>

				</li>
			</ul>

		</div>
		<div class="info warp">
			<ul>
				<li class="info_1">
					<input type="checkbox" name="inname" />
				</li>
				<li class="info_2"><img src="../img/img1.jpg" width="80px" /></li>
				<li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
				<li class="info_4"><a href="">颜色：灰色+粉红</a></li>
				<li class="info_5"><strong>￥300</strong></li>
				<li class="info_6">
					<button class="bot" onclick="oncktest3(this,1),oncktest2()	">-</button>
					<input type="text" name="" id="iname" value="1" />
					<button class="bot" onclick="oncktest3(this,2),oncktest2()">+</button>
				</li>
				<li class="info_7"><strong>￥300</strong></li>
				<li>
					<a onclick="sancu(this),oncktest2()" name="sss">删除</a>
					<br />
					<a>已到我的关注</a>

				</li>
			</ul>

		</div>
		<!--结算开始-->

		<div class="balance warp">

			<ul class="balance_ul1">
				<li>

					<input type="checkbox" name="innam" id="_down" value="" /> 全选
				</li>
				<li><a>删除选中商品</a></li>
				<li><a>移到我的关注</a></li>
				<li><a>清除下柜商品</a></li>
			</ul>

			<ul class="balance_ul2">

				<li>已经选择<span id="qqq" onclick="oncktest2()">0</span>件商品</li>
				<li>总价 <span id="ppp" onclick="oncktest2()">￥0</span></li>
				<li>
					<button class="butt">去结算</button>

				</li>

			</ul>

		</div>

		<!--结算结束-->

	</body>

然后就修饰页面的css语句

/**导航开始**/
.nav{
	height: 30px;
	background-color:#f1f1f1;
}
.wrap{
	width:1050px;
	margin:0 auto ;
	
}
.nav_u1,.nav_u2 li{
	float:left;
}
.nav_u1 li{
	float:left;
	line-height:30px;
	margin-right:20px ;
}
 .nav a,.nav_u2 li{
	font-size:12px;
	color:grey;
}
.nav_u2{
	float:right;
}
.nav_u2 li,.nav_u2 span{
	line-height: 30px;
	margin-left: 15px;
}
/**导航结束**/
/**搜索开始**/
.search{
	margin-top:30px ;
	
}
.search img{
	float:left;
}
.search .search_div{
	float:right;
}
.search input[type='text']{
	width:265px;
	height: 27px;
	border: 2px solid red;
	margin-top:20px ;
	position:relative;
	left:4px;
	
}
.search input[type='button']{
	width:60px;
	height: 30px;
	background-color: #c91623;
	color:white;
	border: 0px;
}
/**搜索结束**/
/*title开始*/
.title{
	
	margin-top:140px;
}
.title h3{
	
	float:left;
	margin-left: 10px;
	color:#c91623;
	font-size: 26px;
}
.title .title_div{
	
	float:right;
}
/*title结束*/
/**内容标题开始**/
.content_tips{
	margin-top:175px;
	height: 50px;
	background-color: #f1f1f1;
	border:1px solid black;
}
.content_tips li{
	float:left;
	line-height: 50px;
	color:gery;
	
}
.content_tips ul>li:nth-child(1){
	
	margin-left:20px;
}
.content_tips ul>li:nth-child(2){
	margin-left:94px;
}
.content_tips ul>li:nth-child(3){
	margin-left:400px;
}
.content_tips ul>li:nth-child(4){
	margin-left:112px;
}
.content_tips ul>li:nth-child(5){
	margin-left:72px;
}
.content_tips ul>li:nth-child(6){
	margin-left:42px;
}

/**内容标题结束**/
/**内容开始**/
.content{
	/**清除浮动的影响**/
	clear:both;
	margin-top:25px;
	height: 125px;
	border: 1px solid black;
	background-color:#FFF4E8;
}
.content li{
	float:left;
	/*line-height: 125px;*/
	margin-top:20px;
	height: 50px;/**设置删除中的内容**/
}
.content img{
	
	width:80px;
	height: 80px;
}

.content input[type='text']{
	width:30px;
	height: 20px;
}
.content ul>li:nth-child(1){
	
	margin-left:20px;
}
.content ul>li:nth-child(2){
	margin-left:34px;
}
.content ul>li:nth-child(3){
	margin-left:80px;
}
.content ul>li:nth-child(4){
	margin-left:90px;
}
.content ul>li:nth-child(5){
	margin-left:40px;
}
.content ul>li:nth-child(6){
	margin-left:25px;
}
.content .btn{
	 width: 20px;
	 
	 height: 18px;
}
/**内容结束**/
/**底部开始**/
.foot{
	margin-top:15px;
	height: 50px;
	border:1px solid black;
	
}
.foot li{
	line-height: 50px;
	float:left;
	font-size:14px;
	margin-left:44px;
	
}
.foot a{
	color:black;
}
.foot span{
	color:red;
	font-size:28px;
	font-weight: bold;
}
.foot input[type='button']{
	
	width:75px;
	height: 50px;
	background-color: red;
	color:white;
	
}
/**底部结束**/

现在开始实现我们的动态功能 全选和全不选

思路首先获取操作对象 

$(function() {

	//实现全选事件  获取全选对象 
	$("#_top,#_down").click(function() {
			//		当前的全选状态决定给所有单选的状态
			$(":checkbox").prop("checked", $(this).prop("checked"));

		})
		//获取

然后实现的是单选 控制全选的事件

如果单选有一个没有单选上就不会全选

	//获取所有单选
	$("input[name=inname]").click(function() {
		var flag = true;
		var par = $("input[name=inname]");
		par.each(function() {
			if (!$(this).prop("checked")) {
				flag = false;
			}
		})
		$("#_top,#_down").prop("checked", flag);
	})

然后需要实现点加减号实现数量的增加和后面商品的价格随数量变动

$("li .bot:first-child").click(function() {

		var txt = $(this).next();
		var txtVal = txt.val();
		if (txtVal > 0) {
			txt.val(--txtVal);
		}
		var commodityPrice = $(this).parent().prev().text().substr(1);
		//next 是获取最后相邻的节点 的字节的包含strong的
		$(this).parent().next().children("strong").text("￥" + commodityPrice * txtVal);
		count();
	});
	$("li .bot:last-child").click(function() {
		var txt = $(this).prev();
		var txtVal = txt.val();
		txt.val(++txtVal);
		var commodityPrice = $(this).parent().prev().text().substr(1);
		$(this).parent().next().children("strong").text("￥" + commodityPrice * txtVal);
		count();
	});
	$(":checkbox").click(count)

然后我们在来给选择的商品然后统计他的商品总计累加 

function count() {
		var num = 0;
		var countPrice = 0;
		$(":checkbox").each(function() {
			if ($(this).prop("checked")) {
				//获取当前对象的父节点 然后父节点的同级别节点 has同级别节点包含有strong的节点获取到后去last最后一个的文本值然后从下标为1开始截取到最后
				var price = $(this).parent().siblings().has("strong").last().text().substring(1);
				if (price > 0) {
					num++;
					//parseFloat() 函数可解析一个字符串，并返回一个浮点数。
					countPrice += parseFloat(price);
				}
			}
		});
		$("#qqq").text(num);
		$("#ppp").text("￥" + countPrice);
	}

然后就是删除功能了 这个实现起来比较简单 绑定好事件获取需要删除的节点remove()就好了

$("a[name=sss]").click(function() {
		$(this).parent().parent().parent().remove();
		count();
	})
weixin_39759107
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用js jquery去搭建完成京东购物车
这个名字没什么特点的博客
01-22 1512
使用js jquery去搭建完成京东购物车使用html css完成基本页面使用js完成动态效果使用jquery完成动态效果 使用html css完成基本页面 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" type="text/css" hre
仿京东购物车
GaoYiranBlog的博客
06-29 319
首先在values文件夹下创建一个dimens文件： &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;resources&gt; &lt;dimen name="left_space_pading"&gt;12dp&lt;/dimen&gt; &lt;/resources&gt; activity_ma
jquery获取div子节点的下的span标签的值
热门推荐
single0515的博客
04-17 1万+
今天遇到一个问题，需要获取div子节点的下的span标签的值，如图，需要获取id为s2id_status的div下的span值 如图可知，要获取span中的值“起草”，需要先获取id为s2id_status的div，即$("#s2id_status") 再获取其子节点，<a>标签,即即$("#s2id_status").children("a")，同理找到a的子结点span，即...
如何取div中包含的span的value
qq_24996873的博客
09-27 1481
1、使用javascript实现 a、为span设置一个id，写如下js代码 var value=document.getElementById("span的id属性").innerHTML;或 var value=document.getElementById("span的id属性").innerText; 就可以取出下面
jQuery模仿京东商城购物车
09-13
jQuery模仿京东商城购物车，可查看购物车商品，删除商品，登录等功能。
JQuery编写简易京东购物车功能
Ping_Pig的博客
01-10 2366
前天无意间看到有一位程序员的博客，有一篇名为无聊时编写的购物车，看了之后，只是觉得很垃圾，因为代码很臃肿，当然我写的也不咋地，当然我也是复习一下所学的js，再敲这个的期间遇到了如下问题,1:子元素父元素的混乱使用，层次没了解清楚就上手写！2：类型转换的问题，其中结算部分的ParesFloat和ParesInt以及.toFixed(2)的四舍五入,类型的把握，当然因为懒得弄，所以就直接写在了html
jquery_div.rar_div显示特效_jquery_div
09-24
本教程将深入探讨如何利用jQuery实现层（div）的显示与隐藏特效，以创建更加动态和交互性的用户体验。 首先，我们需要理解HTML中的`<div>`元素。`<div>`是一个块级元素，常用于组织页面布局或作为内容的容器。通过...
jquery获取div宽度的实现思路与代码
10-27
DIV的width宽度如何获取呢？接下来介绍使用jquery获取DIV的width宽度，感兴趣的朋友可以了解下的
JavaScript和JQuery获取DIV值的方法示例
10-20
主要介绍了JavaScript和JQuery获取DIV值的方法,结合具体实例形式对比分析了javascript与jQuery获取页面div元素值的实现技巧,需要的朋友可以参考下
jQuery实现鼠标滚轮控制div上下翻动效果.rar_BH1_div 滚轮 翻页_html_jquery_设置滚轮翻页
09-24
以上就是使用jQuery实现鼠标滚轮控制div上下翻动效果的基本步骤。你可以根据需要调整滚动距离、添加更多交互细节，或者扩展到其他HTML元素。通过这种方式，我们可以为用户提供更流畅、更个性化的浏览体验。
jQuery京东右侧边栏购物车功能菜单代码
11-19
jQuery京东右侧边栏购物车功能菜单代码 jQuery京东右侧边栏购物车功能菜单代码 jQuery京东右侧边栏购物车功能菜单代码 jQuery京东右侧边栏购物车功能菜单代码
jquery仿京东鼠标悬浮购物车特效
09-07
jquery仿京东鼠标悬浮购物车特效，视觉特效，鼠标悬浮飞入购物车
仿京东购物车页面
04-18
仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面
jquery 获取div下的span_如何使用jquery实现文字无缝衔接效果
weixin_39652760的博客
11-20 240
今天我们将学习如何使用jquery实现文字无缝衔接效果，废话不多说，开始上代码。<html> <head> <meta charset="utf-8" /> <title>title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min...
Jquery 选择器大全
swjian1997的博客
02-03 133
jQuery 选择器简介 　　　　  jQuery 选择器允许对 HTML 元素组或单个元素进行操作。 　　　　jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 　　　　jQuery 中所有选择器都以美元符号开头：$()。 1 .基本选择器 　　　　$("#test"...
jQuery仿购物车案例
原地起飞
11-27 1556
今天成功解锁购物车，想要更多可能就往下看吧！！ 一、全选 二、增减商品数量 三、修改商品小计 四、计算总计和总和 五、删除商品 六、选中商品添加背景 七、全部文件 今天是一些购物车的基本功能实现，全选、增减商品数量、修改商品小计、计算总计和总和、删除商品、选中添加背景颜色等一些常见功能。 html结构的全部代码都在文末了，懂的都懂啊！！！ 一、全选 全选分析： ⭐全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按...
仿京东的购物车和订单
biggrand的博客
12-21 2096
//从购物车跳转到了确认订单界面 /** * 确认下单界面 */ public class Main2Activity extends AppCompatActivity { private TextView text_order; private TextView text_kuan; private ImageView tu; @Override protected void
使用jQuery获取div下的第一个table
最新发布
06-09
可以使用如下代码： ```javascript var firstTable = $('div').find('table:first'); ``` 其中，`$('div')` 选取所有的 `div` 元素，`.find('table:first')` 查找其中第一个 `table` 元素。最终，`firstTable` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值