[TOC] # 6\. jQuery元素操作 主要是遍历、创建、添加、删除元素操作。 ## 6.1遍历元素 jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。 语法1: ~~~ $ ( "div" ).each(function (index,domEle) { xxx; } ) ~~~ 1.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个 2.里面的回调函数有2个参数:index是每个元素的**索引号**; demEle是每个DOM元素对象，不是jquery对象 3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)  语法2 : ~~~ $.each (object , function (index, element) { xxx; } ) ~~~ 1.$.each（）方法可用于遍历任何对象。主要用于数据处理,比如数组,对象 2.里面的函数有2个参数: index 是每个元素的索引号; element遍历内容   ## 6.2创建元素 语法︰ ~~~ $("<li></li>"); ~~~  动态的创建了一个`<li>` ## 6.3添加元素 ### 1.内部添加 （①内部添加元素,生成之后,它们是父子关系。） ~~~ element.append("内容") ~~~  把内容放入匹配元素内部最后面，类似原生appendChild。 ~~~ element.prepend("内容") ~~~ 把内容放入匹配元素内部最前面。 ### 2.外部添加 （②外部添加元素,生成之后,他们是兄弟关系。） ~~~ element.after("内容") ~~~  //把内容放入目标元素后面 ~~~ element.before("内容') ~~~ // 把内容放入目标元素前面 ## 6.4删除元素 ~~~ element.remove() //删除匹配的元素（本身) element.empty() //删除匹配的元素集合中所有的子节点 element.htmI("")//清空匹配的元素内容 ~~~ ~~~ // 3.删除元素 $("ul").remove(); 可以删除匹配的元素自杀 $("ul"). empty(); //可以删除匹配的元素里面的子节点孩子 $("ul").html(""); //可以删除匹配的元素里面的子节点孩子 ~~~ # 案例: 购物车案例模块**计算总计和总额** ~~~ ①核心思路:把所有文本框里面的值相加就是总计数量。总额同理 ②文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个变量,相加唧可 ③点击+号-号,会改变总计和总额,如果用户修改了文本框里面的值同样会改变总计和总额 ④因此可以封装-个函数求总计和总额的 ,以上2个操作调用这个函数即可。 ⑤注意1 :总计是文本框里面的值相加用val()总额是普通元素的内容用text() ⑥要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加 ~~~ ## 代码实验 （封装一个函数计算）  然后+ — 就调用一遍  +  —  # 案例:购物车案例模块**删除商品模块**  ~~~ ①核心思路:把商品remove()删除元素即可 ②有三个地方需要删除: 1. 商品后面的删除按钮2.删除选中的商品3.清理购物车 ③商品后面的删除按钮:一定是删除当前的商品 ,所以从$(this)出发 ④删除选中的商品:先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品 ~~~   ## 代码实验  # 案例:购物车案例模块选中商品**添加背景**  ~~~ ①核心思路:选中的商品添加背景,不选中移除背景即可 ②全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景 ③小的复选框点击:如果是选中状态,则当前商品添加背景,否则移除背景 ④这个背景,可以通过类名修改,添加类和删除类 ~~~  ## 代码实验 1.全选  2.单选