主要是遍历,创建,增加与删除元素
目录
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为没选上,也可以像我上面那样直接使用反选