第8章 jQuery(一)上机.pptVIP

jQuery（一） 上机8 上机内容 选择器的使用 jQuery操作DOM jQuery事件处理和简单动画制作 上机目标 使用jQuery实现可拖拽的购物车用户界面 使用jQuery动画实现图像传送带效果 效果演示 阶段1 训练内容 使用CSS选择器 使用each()函数 使用html()函数 需求说明 使用jQuery选择器和each()方法计算购物车中商品总价 阶段1 完成时间：25分钟 实现思路 计算其总价必须遍历购物车中所有的元素,获得其HTML内容参与计算，使用jQuery的html()方法可以实现。 jQuery对象本质上时JavaScript数组，通过jQuery对象的each()函数可以对该对象进行遍历，并且可以在遍历没个元素时调用同一个函数进行处理 $(#cartProducts .productCart).each( function() { var price = parseFloat($(span.price, this).html()); var quantity = parseInt($(span.quantity, this).html()); total += price * quantity; }); $(#cartTotal).html(total);