Develop shopping cart page with jQuery and introduce external jQuery library
In the previous chapter, we introduced the use of JavaScript to implement the shopping cart function.
In this chapter, we use a simplified version of the JavaScript library jQuery to implement the shopping cart function.
First we need to create a The front-end page of the shopping cart includes product selection, product pictures, product information, increase or decrease in product quantity, price changes, etc.
Perform various selective operations on the products, thereby affecting the changes in product subtotal prices and Changes in the total price of goods.
Similar to the previous JavaScript shopping cart page, here we just changed some CSS styles.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery實(shí)現(xiàn)購(gòu)物車功能</title>
<style>
*{margin:0px;padding:0px;border:0px; font-size:12px;color:#333; font-family:微軟雅黑;}
ul li{ list-style:none}
a{ text-decoration:none;}
a:hover{ color:#e46432;}
body{margin:auto; overflow-x:hidden;}
/*****購(gòu)物車*********/
.gwc{ width:96%;overflow:hidden;}
.gwc_tb1{ width:100%; border-top:5px solid #48b9e5; background:#d0e7fa; height:38px; margin-top:20px; overflow:hidden;}
.tb1_td1{ width:3%; text-align:center;}
.tb1_td3{ width:18%; text-align:center;}
.tb1_td4{ width:20%; text-align:center;}
.tb1_td5{ width:22%; text-align:center;}
.tb1_td6{ width:13%; text-align:center;}
.tb1_td7{ text-align:center;}
.gwc_tb2{ width:100%; margin-top:20px; background:#eef6ff; border:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px;}
.tb2_td1{ width:6%; text-align:center;}
.tb2_td2{ width:13%; text-align:center;}
.tb2_td2 img{ width:96px; height:96px; border:2px solid #c9c6c7;}
.tb2_td3{ width:5%; text-align:center;}
.tb2_td3 a{ font-size:14px; line-height:22px;}
.gwc_tb3{ width:100%; border:1px solid #d2d2d2; background:#e7e7e7; height:46px; margin-top:20px; }
.gwc_tb3 tr td{font-size:14px;}
.tb3_td1{ width:13%; text-align:center;}
.tb3_td2{ width:100px;text-align:center;}
.tb3_td2 span{ color:#ff5500;font-size:14px; font-weight:bold; padding-left:5px; padding-right:5px; }
.tb3_td3{ width:220px;text-align:center;}
.tb3_td3 span{ font-size:18px; font-weight:bold;}
.tb3_td4{ width:110px;text-align:center;}
.jz2{ width:100px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#fff; background:#ee0000; display:block; float:right;}
#jz1{font-size:18px;}
@media only screen and (min-width: 410px){
div{
margin: auto;
}
}
</style>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Calculation.js"></script>
</head>
<body>
<div class="gwc" style=" margin:auto;">
<table cellpadding="0" cellspacing="0" class="gwc_tb1">
<tr>
<td class="tb1_td1"><input id="Checkbox1" type="checkbox" class="allselect"/></td>
<td class="tb1_td1">全選</td>
<td class="tb1_td3">商品</td>
<td class="tb1_td4">商品信息</td>
<td class="tb1_td5">數(shù)量</td>
<td class="tb1_td6">單價(jià)</td>
<td class="tb1_td7">操作</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb2" >
<tr>
<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
<td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c290d2a73a781.jpg"/></a></td>
<td class="tb2_td3"><a href="#">產(chǎn)品標(biāo)題</a></td>
<td class="tb1_td4">產(chǎn)品介紹</td>
<td class="tb1_td5">
<input id="min1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
<input id="text_box1" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" />
<input id="add1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
</td>
<td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
<td class="tb1_td7"><a href="#">操作</a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb2" >
<tr>
<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>
<td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c294ad5abd805.jpg"/></a></td>
<td class="tb2_td3"><a href="#">產(chǎn)品標(biāo)題</a></td>
<td class="tb1_td4">產(chǎn)品介紹</td>
<td class="tb1_td5">
<input id="min2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
<input id="text_box2" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" />
<input id="add2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
</td>
<td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
<td class="tb1_td7"><a href="#">操作</a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb3">
<tr>
<td class="tb1_td1"><input id="checkAll" class="allselect" type="checkbox" /></td>
<td class="tb1_td1">全選</td>
<td class="tb3_td1">
<input id="invert" type="checkbox" />反選
<input id="cancel" type="checkbox" />取消
</td>
<td class="tb3_td2">已選商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
<td class="tb3_td3">合計(jì)(不含運(yùn)費(fèi)):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;">0.00</label></span></td>
<td class="tb3_td4"><span id="jz1">結(jié)算</span><a href="#" style=" display:none;" class="jz2" id="jz2">結(jié)算</a></td>
</tr>
</table>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>The external jquery public library is introduced here.
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
Introduced the written JS file Calculation.js into the js folder under the local folder, and then used <script> to reference
<script type="text/javascript" src="js/Calculation.js"></script>
