Skip to content

P
Python-100-Days

不想做程序猿的员 / Python-100-Days
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
P
Python-100-Days

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
jquery3.html 9.0 KB
Newer Older
骆昊的技术专栏's avatar
更新了语言基础之后的文档  
骆昊的技术专栏 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 
<!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 id="pay" 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() {
					if (!$(this).prop('checked')) {
						$('#selectAll').prop('checked', false);
					}
					calcTotal();
				});
				
				// 为删除选中商品超链接绑定事件回调
				$('#clearSelected').on('click', function() {
					if (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());
					// 12 == "12"
					// "12abc" == 12
					// "xyz" == NaN
					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>