《JavaScript程序设计》课件——项目7-4 jQuery元素操作和尺寸位置操作.pptxVIP

JavaScript程序设计2021

1课程导入2任务导入3知识讲解4任务实施项目7-4jQuery元素操作和尺寸位置操作5任务总结

知识回顾任务导入知识讲解任务实施任务总结jQuery操作样式的方法是什么？jQuery操作类的方法是什么？jQuery动画方法有哪些？提问

知识回顾任务导入知识讲解任务实施任务总结任务重难点完成购物车删除商品案例完成电梯导航案例重点：jQuery元素操作jQuery尺寸和位置操作

知识回顾任务导入知识讲解任务实施任务总结jQuery元素操作1.jQuery元素操作遍历元素：基本语法$(selector).each(function(index,?domEle)?{});该方法的参数是一个函数。这个函数将会在遍历时调用在函数中，index参数是每个元素的索引号domEle是每个DOM元素的对象（个元素调用一次不是jQuery对象）如果要想使用jQuery方法，需要将这个DOM对象转换成为jQuery对象，即$(domEle)。1.1遍历元素

知识回顾任务导入知识讲解任务实施任务总结jQuery元素操作案例演示：div1/divdiv2/divdiv3/divscriptvar?arr?=?[red,?green,?blue];$(div).each(function?(index,?domEle)?{console.log(index);//查看索引号console.log(domEle);//查看DOM元素$(domEle).css(color,?arr[index]);//对每个元素进行操作});/script遍历元素

知识回顾任务导入知识讲解任务实施任务总结jQuery元素操作$.each()方法：基本语法$.each(Object,function(index,?element)?{});多学一招//遍历数组var?arr?=?[red,?green,?blue];$.each(arr,?function(index,?element)?{console.log(index);//数组中的每个元素的索引console.log(element);//数组中的每个元素的值});//遍历对象varobj={name:?andy,age:?18};$.each(obj,?function(index,?element)?{console.log(index);? //?对象中的每个成员的名console.log(element);? //?对象中的每个成员的值});$.each()遍历数组

知识回顾任务导入知识讲解任务实施任务总结jQuery元素操作$.each()方法：基本语法$.each(Object,function(index,?element)?{});//遍历对象varobj={name:?andy,age:?18};$.each(obj,?function(index,?element)?{console.log(index);?//?对象中的每个成员的名console.log(element);?//?对象中的每个成员的值});$.each()遍历对象

知识回顾任务导入知识讲解任务实施任务总结jQuery元素操作案例分析：将所有选中的商品的购买数量文本框中的值相加，得到总件数。将所有选中的商品的小计值相加，得到总额。当用户更改了复选框的状态时，更新总额。当用户更改了商品数量时，更新总额。【案例】计算购物车商品总件数和总额

知识回顾任务导入知识讲解任务实施任务总结jQuery元素操作案例实现：function?getSum()?{//计算总件数var?count?=?0;varitem=$(.j-checkbox:checked).parents(.cart-item);item.find(.itxt).each(function(i,?ele)?{count?+=?parseInt($(ele).val());});$(.amount-sum?em).text(count);}getSum();getSum()总件数

知识回顾任务导入知识讲解任务实施任务总结j