jQuery当当网项目实现

知识点总结：

一：jQuery选择器-->层级-->(1):parent(父名) (2):find(子名) （3）：next :表示相邻的两个元素 

作用：多用于选择某个网页中一个元素。

二：  (1):append(内部插入):向每个匹配的元素内部追加内容。(2):after（外部插入）:在每个匹配的元素之后插入内容。

注意事项：html元素的值用text（）、html（）方法获取。表单元素的值获取用val（）方法获取.

三：项目详解：

完成步骤:

1、计算出总价、积分、可以省的钱        (注意：(1)从html中获取的元素值都是string类型，需要转换类型 (2)通过样式获取对象方法中要加“ .” id方式获取要加"#")

2、将商品添加进购物车，价格、积分改变。如有重复的商品不添加，数量改变。注意：在html获取的元素值可能会有多余的标记，记得要去除,比如￥

3、删除购物车商品（清空购物车）  注意：新增加的行元素“删除"无法起效果 所以在新增的行元素中添加删除的方法

script实例代码：

 1 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 2     <script type="text/javascript">
 3     $(function(){//页面加载完以后执行这个方法
 4      //计算总价、积分、省钱方法
 5         loadprice();
 6 
 7         //向购物车添加书籍 实现思想：点击“购买”事件，得到要添加的内容
 8         $("#shopping_commend_sort .shopping_yellow").click(function(){
 9             var bookname=$(this).parent("li").parent("ul").find(".blue").text();//获取书名
10             var oldprice=$(this).parent("li").parent("ul").find(".shopping_commend_list_2").text();//获取价格
11             var newprice=$(this).parent("li").parent("ul").find(".shopping_commend_list_3").text();
12             var zhekou=Math.round(parseFloat(newprice.substring(1))/parseFloat(oldprice.substring(1))*100)+"折";//获取折扣
13             //对购物车的书籍进行去重
14             var ifexists=false;//控制是否存在书籍
15             $("#myTableProduct .shopping_product_list_1 a").each(function(){//遍历书名查找是否有相同书籍存在
16                 if($(this).text()==bookname){
17                     ifexists=true;
18                     var $input=$(this).parent("td").parent("tr").find("input");
19                     var num=parseFloat($input.val())+1;
20                     $input.val(num);
21                     return;
22                 }
23             });
24             if(!ifexists) {
25                 var str = "<tr class='shopping_product_list' >" +
26                         " <td class='shopping_product_list_1'><a href='#' class='blue'>" + bookname + "</a></td>" +
27                         "<td class='shopping_product_list_2'><label>19</label></td>" +
28                         "<td class='shopping_product_list_3'>￥<label>" + oldprice.substring(1) + "</label></td>" +
29                         "<td class='shopping_product_list_4'>￥<label>" + newprice.substring(1) + " </label>(" + zhekou + ")</td>" +
30                         "<td class='shopping_product_list_5'><input type='text' value='1'></td>" +
31                         "<td class='shopping_product_list_6'><a href='javascript:void(0)' οnclick='delit()' class='blue'>删除</a></td>" +
32                         "</tr>"
33                 //把数据添加进购物车
34                 $("#myTableProduct").append(str)
35                 //到这里要重新执行价格的运算 所以要把价格的计算写成一个方法 然后调用
36                 loadprice();
37             }
38         });
39         //删除方法
40         //逐条删除的方法
41                 $("#myTableProduct .shopping_product_list_6 .blue").each(function(){
42                     //注意新增加的行元素“删除"无法起效果 所以在新增的行元素中添加删除的方法
43                     $(this).click(function(){
44                         delit();
45                         loadprice();
46                     });
47                 });
48         //清空购物车的方法
49                  $("#removeAllProduct").click(function(){
50                      $("#myTableProduct").find("tr").remove();
51                      loadprice();
52                  });
53     });
54         function loadprice(){
55             var sum=0;//总价
56             var zhekou=0;//折扣金额
57             var jifen=0;//积分
58             $("#myTableProduct .shopping_product_list").each(function(){//找到行元素，遍历，通过层级找到元素
59                 var newprice=parseFloat($(this).find(".shopping_product_list_4").find("label").text());
60                 var num=parseFloat($(this).find(".shopping_product_list_5").find("input").val());
61                 var oldprice=parseFloat($(this).find(".shopping_product_list_3").find("label").text());//获取市场价
62                 var ji=parseFloat($(this).find(".shopping_product_list_2").find("label").text());
63                 sum+=newprice*num;
64                 zhekou+=oldprice-newprice;//获取折扣价格
65                 jifen+=ji*num;//获取积分
66             });
67             $("#product_save").html((zhekou).toFixed());
68             $("#product_total").html((sum).toFixed(2));//tofixed 保留两位小数,把值赋值给这个元素
69             $("#product_integral").html((jifen).toFixed());
70         }
71         function delit(){
72                  var obj=event.srcElement;//声明obj事件源对象 执行事件源的点击事件,找到这个元素
73                  $(obj).parent("td").parent("tr").remove();//将obj转为jq对象，执行jq的方法移除行元素
74         }
75     </script>

 

转载于:https://www.cnblogs.com/gongxuanming/p/7056644.html