7.jQuery元素操作

主要是遍历，创建，增加与删除元素

目录

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为没选上，也可以像我上面那样直接使用反选