jQuery——购物车的实现

最新推荐文章于 2025-10-15 22:39:35 发布

原创最新推荐文章于 2025-10-15 22:39:35 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的购物车功能实现案例，通过HTML构建购物车界面，使用CSS进行样式美化，并借助jQuery实现商品数量调整、总价计算及选中状态同步等功能。

HTML Tag/Element — Content 标签承载内容
CSS — Display — Box Model 渲染页面显示
- 样式表是有继承的
- 但margin,padding,border,backgroundImage,backgroungColor这些不会被子元素继承
javaScript — Behavior 负责行为
- ECMAScript 标准
- BOM 浏览器对象模型 —window —locaiton/history/screen
- DOM —document — CRUD 增删改查
jQuery
- 如果在导入的时候，有其他的库也封装了$函数，并且jQuery先导入，可以用jQuery函数，产生相同的相同的效果
- 如果是后导入，但不想和其他的冲突可以先写jQuery.noConflict();，在使用jQuery.

"""
jQuery中的$函数（jQuery）的作用
1.如果$函数的参数是一个函数那么该函数是文档加载完成后要执行的回调函数
2.如果$函数的参数是一个选择器字符串那么$函数会返回对应的元素（jQuery对象）
3.如果$函数的参数是一个标签字符串那么$函数会创建该元素并返回（jQuery对象）
4.如果$函数的参数是一个原生的JavaScript元素对象那么$函数会将它转变成jQuery对象
"""

购物车

以下一段代码实现了购物车的一些基本功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* { 
				margin: 0;
				padding: 0;
			}
			body {
				width: 960px;
				margin: 20px auto;
			}
			#cart {
				margin: 0 auto;
				width: 850px;
			}
			#cart-header {
				height: 40px;
				background-color: lightgray;
				margin-bottom: 20px;
			}
			#cart-header div {
				line-height: 40px;
			}
			.left {
				float: left;
			}
			.right {
				float: right;
			}
			.w110 {
				width: 100px;
			}
			.ml10 {
				margin-left: 10px;
			}
			.w120 {
				width: 120px;
			}
			.w250 {
				width: 250px;
			}
			.center {
				text-align: center;
			}
			.w20 {
				width: 20px;
			}
			.w90 {
				width: 90px;
			}
			.clear {
				clear: both;
			}
			#cart-items>div {
				height: 100px;
			}
			#cart-items>div>div {
				line-height: 100px;
			}
			.w250 span {
				display: inline-block;
				font-size: 12px;
				line-height: 16px !important;
			}
			.single-item {
				border-bottom: 1px solid gray;
			}
			.small-button {
				display: inline-block;
				width: 20px;
				height: 20px;
				border: none;
			}
			.big-button {
				color: white;
				background-color: red;
				display: inline-block;
				width: 120px;
				height: 40px;
				border: none;
				font-size: 22px;
			}
			#totalCount, #totalPrice {
				color: red;
			}
			#totalPrice {
				font: bolder 20px Arial;
				display: inline-block;
				width: 150px;
			}
			#cart a {
				text-decoration: none;
			}
			#cart a:link, #cart a:visited, #cart a:active {
				color: gray;
			}
		</style>
	</head>
	<body>
		<div id="cart">
			<div id="cart-header">
				<div class="left w110 ml10">
					<input id="selectAll" type="checkbox">
					<label for="selectAll">全选</label>
				</div>
				<div class="left w250">商品</div>
				<div class="left w120 center">单价</div>
				<div class="left w120 center">数量</div>
				<div class="left w120 center">小计</div>
				<div class="left w120 center">操作</div>
			</div>
			<div id="cart-items">
				<div class="clear single-item">
					<div class="left w20 ml10">
						<input name="selectOne" type="checkbox">
					</div>
					<div class="left w90">
						<a href="">
							<img src="img/a1.jpg">
						</a>
					</div>
					<div class="left w250">
						<span>
						海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
						</span>
					</div>
					<div class="left w120 center">&yen;<span class="price">138.00</span></div>
					<div class="left w120 center">
						<button class="small-button">-</button>
						<input class="center count" type="text" size="2" value="1">
						<button class="small-button">+</button>
					</div>
					<div class="left w120 center">&yen;<span>138.00</span></div>
					<div class="left w120 center">
						<a href="javascript:void(0);">删除</a>
					</div>
				</div>
				<div class="clear single-item">
					<div class="left w20 ml10">
						<input name="selectOne" type="checkbox">
					</div>
					<div class="left w90">
						<a href="">
							<img src="img/a2.jpg">
						</a>
					</div>
					<div class="left w250">
						<span>
						HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰
						</span>
					</div>
					<div class="left w120 center">&yen;<span class="price">128.00</span></div>
					<div class="left w120 center">
						<button class="small-button">-</button>
						<input class="center count" type="text" size="2" value="1">
						<button class="small-button">+</button>
					</div>
					<div class="left w120 center">&yen;<span>128.00</span></div>
					<div class="left w120 center">
						<a href="javascript:void(0);">删除</a>
					</div>
				</div>
				<div class="clear single-item">
					<div class="left w20 ml10">
						<input name="selectOne" type="checkbox">
					</div>
					<div class="left w90">
						<a href="">
							<img src="img/a3.jpg">
						</a>
					</div>
					<div class="left w250">
						<span>
						HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男
						</span>
					</div>
					<div class="left w120 center">&yen;<span class="price">99.00</span></div>
					<div class="left w120 center">
						<button class="small-button">-</button>
						<input class="center count" type="text" size="2" value="1">
						<button class="small-button">+</button>
					</div>
					<div class="left w120 center">&yen;99.00</div>
					<div class="left w120 center">
						<a href="javascript:void(0);">删除</a>
					</div>
				</div>
			</div>
			<div id="cart-footer">
				<div class="clear left">
					<a id="clearSelected" href="javascript:void(0);">删除选中商品</a>
				</div>
				<div class="right">
					<span>总共选中了<span id="totalCount">0</span>件商品</span>
					<span>总计: <span id="totalPrice">&yen;0.00</span></span>
					<button class="big-button">去结算</button>
				</div>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script>
			// jQuery中的$函数(jQuery)的作用
			// 1. 如果$函数的参数是一个函数那么该函数绑定文档加载完成后要执行的回调函数
			// 2. 如果$函数的参数是一个选择器字符串那么$函数会返回对应的元素(jQuery对象)
			// 3. 如果$函数的参数是一个标签字符串那么$函数会创建该元素并返回(jQuery对象)
			// 4. 如果$函数的参数是一个原生的JS元素对象那么$函数会将它转变成jQuery对象
			$(function() {
				// this到底是什么要看具体的上下文环境
				// 简单的说函数中的this指的是谁调用了这个函数或者谁引发了这个函数的执行
				$('#selectAll').on('change', function(evt) {
					// 获取事件源的两种方式: evt.target或者this
					// 这里拿到的是原生的JavaScript对象
					if ($(this).prop('checked')) {
						$('.single-item input[type="checkbox"]').prop('checked', true);
						calcTotal();
					} else {
						$('.single-item input[type="checkbox"]').prop('checked', false);
						$('#totalCount').text('0');
						$('#totalPrice').html('&yen;0.00');
					}
				});
				
				// 为单个商品项的复选框绑定改变事件
				$('input[name="selectOne"]').on('change', function() {
					calcTotal();
					if (!$(this).prop('checked')) {
						$('#selectAll').prop('checked', false);
					}
				});
				
				// 为删除选中商品超链接绑定事件回调
				$('#clearSelected').on('click', function() {
					if (window.confirm('确定要删除所选商品吗?')) {
						$('.single-item').each(function() {
							if ($(this).find('input[name="selectOne"]').prop('checked')) {
								$(this).remove();
							}
						});
						calcTotal();
					}
				});
				
				// 为减少和添加商品数量的按钮绑定事件回调
				$('.single-item button').on('click', function(evt) {
					$(this).parent().parent().find('input[name="selectOne"]').prop('checked', true);
					if ($(this).text() == '-') {
						var count = parseInt($(this).next().val());
						if (count > 1) {
							count -= 1;
							$(this).next().val(count);
						} else {
							alert('商品数量最少为1');
						}
					} else {
						var count = parseInt($(this).prev().val());
						if (count < 200) {
							count += 1;
							$(this).prev().val(count);
						} else {
							alert('商品数量最多为200');
						}
					}
					var price = parseFloat($(this).parent().prev().find('span').text());
					$(this).parent().next().html('&yen;' + (price * count).toFixed(2));
					calcTotal();
				});
				
				// 为单个商品项删除超链接绑定事件回调
				$('.single-item a').on('click', function() {
					if (window.confirm('确定要删除该项吗?')) {
						$(this).parent().parent().remove();
						calcTotal();
					}
				});
				
				// 为商品数量文本框绑定改变事件回调
				$('.single-item input[type="text"]').on('change', function() {
					$(this).parent().parent().find('input[name="selectOne"]').prop('checked', true);
					var count = parseInt($(this).val());
					
					if (count != $(this).val() || count < 1 || count > 200) {
						alert('无效的商品数量值');
						count = 1;
						$(this).val(count);
					}
					var price = parseFloat($(this).parent().prev().find('span').text());
					$(this).parent().next().html('&yen;' + (price * count).toFixed(2));
					calcTotal();
				});
				
				// 计算总计
				function calcTotal() {
					var checkBoxes = $('input[name="selectOne"]');
					var priceSpans = $('.single-item .price');
					var countInputs = $('.single-item .count');
					var totalCount = 0;
					var totalPrice = 0;
					for (var i = 0; i < priceSpans.length; i += 1) {
						// 复选框被勾中的购物车项才进行计算
						if ($(checkBoxes[i]).prop('checked')) {
							// 强调: jQuery对象使用下标运算或get方法会还原成原生的JavaScript对象
							var price = parseFloat($(priceSpans[i]).text());
							var count = parseInt($(countInputs[i]).val());
							totalCount += count;
							totalPrice += price * count;
						}
					}
					$('#totalCount').text(totalCount);
					$('#totalPrice').html('&yen;' + totalPrice.toFixed(2));
				}
			});
		</script>
	</body>
</html>