使用JavaScriptjQuery实现页面特效第八章-实践.pptVIP

* 实践八 jQuery操作DOM 实践目标 购物车商品数量和总价的联动 团购项目图片的放大预览 利用jQuery操作页面元素的方法，实现美淘网购物车页面cart.html数量的增加和减少操作，并要求单项价格和总价随着数量的改变而改变。 用户单击“+”按钮，文本框的团购数量在以前的基础上增加1，单项价格和总价相应的增加。 任务一：购物车商品数量和总价的联动 （1）声明函数calPrice()，根据团购商品的单价和数量，计算单项价格，当单击改变数量的按钮时，调用函数calPrice()，即时刷新单项价格。 （2）声明函数calTotalPrice()，计算所有团购项目的总价格。当单击改变数量的按钮时，调用函数calTotalPrice()，即时刷新所有团购项目的应付总额。 （3）在页面加载完毕事件中，给“+”按钮的单击事件绑定方法，实现在原基础上数量增加1的功能，并调用calPrice()和calTotalPrice()方法实现价格和数量的联动。 任务一：购物车商品数量和总价的联动 任务一：购物车商品数量和总价的联动 //计算单个团购项目的价格 function calPrice($BtnObj,number){ //参数$BtnObj代表增减数量的按钮，number是团购的数量 var $tdObj=$BtnObj.parent().next(); //获取显示单价的td单元格 var price=parseFloat($tdObj.text().substr(1)); //从“￥”后截取，从而获取单价 var $tdObjTotal=$tdObj.next();//获取紧临的同胞元素，即显示商品小计的单元格 var total=price*number; //计算总价 $tdObjTotal.html(yen;+total.toFixed(2));//商品小计保留小数点后两位 } 任务一：购物车商品数量和总价的联动 //计算所有团购项目的总价格 function calTotalPrice(){ var sum=0; //保存总价 //遍历表格中有title=price属性的的单元格 $(#tabOrder td[title=price]).each(function() { sum=sum+parseFloat($(this).text().substr(1));//价格的累加 }); 任务一：购物车商品数量和总价的联动 //显示总价 $(#spanTotal).html(yen;+sum); } $(function(){ $(.btnAdd).click(function(){//在增加数量的按钮上绑定单击事件 var txtObj=$(this).siblings(input[type=text]);//获取按钮type=text的兄弟 var number=parseInt(txtObj.val()); txtObj.val(number+1); //小计某个商品的总价 calPrice($(this),number+1); calTotalPrice(); }); }); （1）jQuery对象的parent()方法用于获取当前元素的父元素；parents()方法则用于获取当前元素的祖先元素。 （2）jQuery对象的next()方法用于获得匹配元素集合中每个元素相邻的同胞元素。 （3）jQuery对象的siblings()方法用于获得匹配集合中每个元素的同胞，如果给siblings()方法传递选择器参数，那么则取回匹配该选择器的同胞元素。 任务一：购物车商品数量和总价的联动 （1）用户单击购物车页面的“+”按钮，文本框的团购数量在以前的基础上增加1，单项价格和总价将相应地增加。 （2）用户单击“-”按钮，文本框的团购数量在以前的基础上减去1，商品小计和总价将相应地减少。 任务一：购物车商品数量和总价的联动 （1）声明函数calPrice()，根据团购商品的单价和数量，计算单项价格。当单击改变数量的按钮时，调用函数calPrice()，即时刷新单项价格。 （2）声明函数calTotalPrice()，计算所有团购项目的总价格。当单击改变数量的按钮时，调用函数calTotalPrice()，即时刷新所有团购项目的应付总额。 （3）在页面加载完毕事件中，给“-”按钮的单击事件绑定方法，实现当团购的数量在一件以上时，在原基础上数量减1的功能，并调用calPrice()和calTotalPrice()方法计算并显示当前数量的价格。 （4）在页面加载完毕事件中，给“+”按钮的单击事件绑定方法，实现在原基础上数量上增加1