【精选】第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); $(#cart p).css(backgroundColor, transparent); }; 阶段1 需求说明 使用jQuery创建6个图片元素并且隐藏，6张图片描述如下： 鼠标移动到左侧的图片上时，在图片上显示left.gif图片 鼠标移动到右侧图片上时，图片上显示right.gif图片 鼠标移动到中间的图片上时，图片上显示enlarge.gif图片 鼠标点击中间一张图片，会出现大图，大图上显示close.gif图片，将该图片追加到body中以备用 鼠标点击中间一张图片，会出现相应的大图，为大图创建img元素加入到body中备用 鼠标点击任何一张图片，图片上出现等待信息，等待信息通过wait.gif图像来显示 实现思路 创建一个函数用于追加img元素，并在该函数中设置img元素的样 调用该函数，创建img元素 往body元素中追加用于显示大图像的img和用于显示关闭图像的img 参考代码 阶段小结 共性问题集中讲解 each()函数 创建元素 阶段2 训练内容 使用选择器 attr()方法 find()方法 将jQuery对象转换为DOM对象 append()方法 fadeIn()淡入淡出动画 需求说明 实现添加产品到购物车的方法 阶段2 完成时间：35分钟 实现思路 要获取商品的相关信息（名称、单价、ID），商品ID就是点击的商品图片元素的父元素的ID，如第1个商品的ID是“product1”。可以通过从购物车中选择产品来判断该产品是第一次添加还是购物车中已经存在。如果已经存在，只需要修改数量；否则，将往购物车内追加一个包含商品信息的div元素 阶段2 参考答案 需求说明 实现单击左侧的图像，图像向右滑动 实现思路 使用eq()定位图像 使用animate()函数实现自定义动画 阶段小结 共性问题集中讲解 find()函数的应用 通过get()函数获取DOM对象 阶段3 训练内容 使使用bind()绑定事件 使用return false阻止默认的事件触发 使用interface.js提供的Draggable对象和Droppable对象实现拖拽效果 需求说明 实现鼠标点击购买商品超链接时，调用第2阶段指导部分创建的添加商品到购物车；实现拖拽商品到购物车的动画效果 阶段3 完成时间：40分钟 实现思路 Draggable（拖动对象）的说明： revert=true，停止拖拽时，元素返回初始位置 fx:拖放释放鼠标后，备份对象返回到初始状态的时间 ghosting=true，则拖拽移动的是一个元素的副本 opacity:拖拽过程中元素的透明度 Droppable（放下对象）的说明： accept:值是选择器，允许接收拖动元素放入的元素 activeclass:值是样式类，当前对象在激活拖拽时的样式 hoverclass:拖拽对象进入到当前对象区域时当前对象的样式 tolerance:拖拽对象与当前对象产生重叠时的效果，可选值为：fit, intersect, pointer, touch‘ onDrop:指定拖拽结束后的回调函数 阶段3 参考答案 需求说明 点击右侧图片，图片向左滑动的效果 实现思路 可见图片中右侧的图片可以通过$(‘eq(2)’)