masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Membangunkan halaman troli beli-belah dengan jQuery dan memperkenalkan perpustakaan jQuery luaran

Dalam bab sebelumnya kami memperkenalkan penggunaan JavaScript untuk melaksanakan fungsi troli beli-belah

Dalam bab ini kami menggunakan versi ringkas perpustakaan JavaScript jQuery untuk melaksanakan fungsi troli beli-belah 🎜>Mula-mula kita perlu membuat halaman depan hadapan troli beli-belah termasuk pemilihan produk, gambar produk, maklumat produk, peningkatan atau penurunan kuantiti produk, perubahan harga, dll.

Lakukan pelbagai operasi terpilih pada produk, dengan itu menjejaskan perubahan harga subjumlah produk dan Perubahan dalam jumlah harga barang.

Sama seperti halaman troli beli-belah JavaScript sebelumnya, di sini kami hanya menukar beberapa gaya CSS. 

<!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实现购物车功能</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;}

	/*****购物车*********/
	.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">数量</td>
	<td class="tb1_td6">单价</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="#">产品标题</a></td>
	<td class="tb1_td4">产品介绍</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="#">产品标题</a></td>
	<td class="tb1_td4">产品介绍</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">合计(不含运费):<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">结算</span><a href="#" style=" display:none;"  class="jz2" id="jz2">结算</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>

Perpustakaan awam jquery luaran diperkenalkan di sini. 

<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>

memperkenalkan fail JS bertulis Calculation.js ke dalam folder js di bawah folder setempat, dan kemudian menggunakan <skrip> untuk merujuk 

<script type="text/javascript" src="js/Calculation.js"></script>

Meneruskan pembelajaran
||
<!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实现购物车功能</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;} /*****购物车*********/ .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">数量</td> <td class="tb1_td6">单价</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="#">产品标题</a></td> <td class="tb1_td4">产品介绍</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="#">产品标题</a></td> <td class="tb1_td4">产品介绍</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">合计(不含运费):<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">结算</span><a href="#" style=" display:none;" class="jz2" id="jz2">结算</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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492454 permainan