主要是遍历，创建，增加与删除元素
目录
1 遍历 each()
1.1 用法1
1.2 用法2
2 购物车总件数与总额案例
3 创建元素
4 添加元素
4.1 内部添加
4.1.1 放在最后面 element.append()
4.1.2 放在最前面 element.prepend()
4.2 外部添加
4.2.1 放在元素后面 element.after()
4.2.2 放在元素前面 element.before()
5 删除元素
5.1 删除元素自身 element.remove()
5.2 删除元素所有子节点 element.empty()
6 购物车删除商品案例
6.1 删除一行商品
6.2 删除选中的商品
6.3 清空所有商品
7 购物车选中改变背景案例
1 遍历 each()
隐式迭代只能对同一种类的元素进行相同的操作，使用each可以进行不同的操作
1.1 用法1
- index是元素的索引号
- domEle是DOM元素
我们先简单用一下each()
- index与dom的名称可以自定
我们现在像给这三个盒子的背景颜色依次设置为红黄蓝，我们就可以这样做
1.2 用法2
用法2就是把需要遍历的对象放在each内
要达成设置不同背景颜色的功能可以这样写
与方法1的区别是，你可以遍历JS中的变量了
遍历JS变量dom就会变为遍历的值了
如果用方法1的话会报这个错误
方法二也可以遍历对象
第一个参数是键，第二个参数是值
2 购物车总件数与总额案例
在最下方加上一行计算总数量与总额
我下面只写一下添加部分
CSS
html
JS
如果你的单价有小数的情况，浮点数相加有时会出很多位数，一般我们会将加和后的结果保留两位小数(一般不会错，没测过)
3 创建元素
引号里是要创建的html标签，创建完了不添加在页面上是没有效果的，我们放在添加元素内一起展示
4 添加元素
4.1 内部添加
4.1.1 放在最后面 element.append()
相当于原生JS的appendChild()，会添加到指定元素内部的最后面(最后一个子元素)
4.1.2 放在最前面 element.prepend()
4.2 外部添加
4.2.1 放在元素后面 element.after()
4.2.2 放在元素前面 element.before()
5 删除元素
5.1 删除元素自身 element.remove()
remove()不加参数，使用remove()会删除引用者自身
5.2 删除元素所有子节点 element.empty()
子节点也包括内容节点，除了把子元素删了，section里面自己的文字也没了
我们想达到删除元素子节点也可以用element.html('')来代替
效果相同
6 购物车删除商品案例
6.1 删除一行商品
加一列删除
点击删除后这一行就没了
CSS没动
HTML
JS
我们发现有一些bug，一个是删除后如果删除的行有数据，总计上不会删掉
我们需要将改行的数据清零，然后再进行统计
这样再删除总计就是对的了
第二个bug是全选，点击了其余checkbox，全选按钮不会自动被勾选
这个时候要在每次点击checkbox的时候重新获取checkbox的个数
这样就自动勾选了
6.2 删除选中的商品
选择前两行，然后点击删除选中的商品
点击后前两行没了
html
JS
6.3 清空所有商品
html
JS
7 购物车选中改变背景案例
单独选能变
全选也能变
CSS,html没动
JS
可以使用prop判断checked属性，是true为选上了，是false为没选上，也可以像我上面那样直接使用反选
