持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

1. 元素操作

1.1 遍历对象

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1:

each()方法遍历匹配的每一个元素。主要用DOM处理。
里面的回调函数有2个参数: index是每个元素的索引号; demEle是每个DOM元素对象，不是jquery对象
所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)

注意：each相当于原生的for循环。用于遍历每一个元素。

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // $("div").css("color", "red");
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            // 1. each() 方法遍历元素 
            var arr = ["red", "green", "blue"];
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(index);
                // console.log(i);
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                // console.log(domEle);
                // domEle.css("color"); dom对象没有css方法
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
	</script>
<body>

语法2:

$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
里面的函数有2个参数: index是每个元素的索引号; element遍历内容

 $.each($("div"), function(i, ele) {
       console.log(i);
       console.log(ele);

   });
 $.each(arr, function(i, ele) {
       console.log(i);
       console.log(ele);
   })
 $.each({
       name: "andy",
       age: 18
       }, function(i, ele) {
       console.log(i); // 输出的是 name age 属性名
       console.log(ele); // 输出的是 andy  18 属性值
          })
   })

1.2 购物车总计金额

核心思路:把所有文本框里面的值相加就是总计数量。总额同理
文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可
点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额
因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可。
注意1∶总计是文本框里面的值相加用valO总额是普通元素的内容用text()
要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加

1.3 创建、添加和删除元素

1.3.1 创建

动态的创建了一个li

1.3.2 添加

内部添加

把内容放入匹配元素内部最后面，类似原生appendChild。

pre指的是在内容最前放添加。

外部添加

内部添加元素，生成之后，它们是父子关系。
外部添加元素，生成之后，他们是兄弟关系。

1.3.3 删除

2. 清理购物车模块案例分享

核心思路∶把商品remove()删除元素即可
有三个地方需要删除︰1.商品后面的删除按钮⒉删除选中的商品3.清理购物车
商品后面的删除按钮:一定是删除当前的商品，所以从$(this)出发
删除选中的商品︰先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品

JQuery中的元素操作及相关案例