最近由于工作需要的原因，开始系统学习jQuery的知识，然后跟着一个视频教程做了一个购物车的功能，现总结如下。
第一步：准备HTML页面，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" ??src="jquery.js"></script><title>购物车</title><style type="text/css">h1{ ???text-align:center}table{ ???margin:0 auto; ???width:60%; ???border:2px solid #09C; ???border-collapse:collapse}table th,table td{ ???border:2px solid #09C; ???padding:5px; ???????}th{ ???background-color:#0CC;}</style><script type="text/javascript"> ???</script></head><body><h1>真划算</h1><table> ???<tr> ???????<th>商品</th> ???????<th>单价</th> ???????<th>颜色</th> ???????<th>库存</th> ???????<th>好评率</th> ???????<th>操作</th> ???</tr> ???<tr> ???????<td>罗技鼠标</td> ???????<td>80</td> ???????<td>黑色</td> ???????<td>893</td> ???????<td>98%</td> ???????<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td> ???</tr> ???<tr> ???????<td>微软键盘</td> ???????<td>150</td> ???????<td>黑色</td> ???????<td>100</td> ???????<td>98%</td> ???????<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td> ???</tr> ???<tr> ???????<td>手机壳</td> ???????<td>60</td> ???????<td>透明</td> ???????<td>200</td> ???????<td>98%</td> ???????<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td> ???</tr> ???<tr> ???????<td>耳机</td> ???????<td>100</td> ???????<td>蓝色</td> ???????<td>302</td> ???????<td>98%</td> ???????<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td> ???</tr> ???</table><h1>购物车</h1><table><thead> ???<tr> ???<td>商品</td> ???<td>单价</td> ???<td>数量</td> ???<td>金额</td> ???<td>删除</td> ???</tr></thead><tbody id="goods"><!-- ???<tr> ???????????<td>罗技鼠标</td> ???????<td>80</td> ???????<td> ???????<input type="button" value="-"/> ???????<input type="text" size="3" readonly="readonly"/> ???????<input type="button" value="+"/> ???????</td> ???????<td>80</td> ???????<td align="center"> ???????<input type="button" value="*"/> ???????</td> ???</tr>--></tbody><tfoot> ???<tr> ??????<td colspan="3" align="right">总计</td> ??????<td></td> ??????<td></td> ???</tr></tfoot></table></body></html>第二步：实现增加物品的功能代码：
<script type="text/javascript"> ???function addShopping(btn){ ???????var tds=$(btn).parent().siblings();//获取当前元素的父节点的全部兄弟节点，就是当前这行的所有td ???????var name=$(tds).eq(0).text();//获取商品名称的td的文本值 ???????var price=$(tds).eq(1).text();//获取商品价格的td的文本值 ???????var html = $("<tr>" ???//开始拼接HTML元素，将取到的东西展示到对用的input中 ???????+"<td>"+name+"</td>" ???????+"<td>"+price+"</td>" ???????+"<td>" ???????+"<input type=‘button‘ value=‘-‘/>" ???????+"<input type=‘text‘ size=‘3‘ readonly=‘readonly‘/>" ???????+"<input type=‘button‘ value=‘+‘/>" ???????+"</td>" ???????+"<td>"+price+"</td>" ???????+"<td align=‘center‘>" ???????+"<input type=‘button‘ value=‘*‘/>" ???????+"</td></tr>"); ???????$("#goods").append(html); ???????}第三步：实现将购物车中的物品删除的基本功能
function deletShopping(btn){//给上一步你拼接的删除按钮上绑定一个这样的方法 ???????????$(btn).parent().parent().remove(); ???????????}第四步：增加物品和删除物品的基本功能完成以后，我们就要开始处理细节问题了，同一件物品的增加或者减少
function increas(btn){ ???????????????var text=$(btn).prev(); ???????????????var acount = parseInt($(text).val()); ???????????????$(text).val(++acount); ???????????????//获取单价 ???????????????var tds = $(text).parent().siblings(); ???????????????var price = parseInt($(tds).eq(1).text()); ????????????????//获取总价 ???????????????var sum = price*acount; ???????????????$(tds).eq(2).text(sum);}function decrease(btn){ ???????????????????var text=$(btn).next(); ???????????????var acount = parseInt($(text).val()); ???????????????$(text).val(--acount); ???????????????if(acount<1){ ???????????????????return; ???????????????????} ???????????????//获取单价 ???????????????var tds = $(text).parent().siblings(); ???????????????var price = parseInt($(tds).eq(1).text()); ???????????????????????????????//获取总价 ???????????????var sum = price*acount ???????????????$(tds).eq(2).text(sum);}最后，算所有商品合计：
function total(){ ???????????????????var trs = $("#goods tr"); ???????????????????var sum=0; ???????????????????for(var i=0;i<trs.length;i++){ ???????????????????????var td = trs.eq(i).children().eq(3); ???????????????????????var price = parseInt($(td).text()); ???????????????????????//alert(price); ???????????????????????sum = sum + price; ???????????????????????????????????????????????} ???????????????????????$("#total").text(sum); ???????????????????} ???然后将total方法放在前四个方法后面，每次事件触发都要调用合计的方法。
好了，到这里呢，一个简单的购物车功能就做完了，最后附图一张，大功告成！
jQuery实现一个简单的购物车功能
原文地址：http://www.cnblogs.com/smile-bai/p/7470753.html