Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
Address: https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4

table of Contents

jQuery element operation

Iterate over elements

Case: Shopping Cart Case Module-Calculating Total and Total

Create element

Add element

Internally added

External addition

Delete element

Case: Shopping Cart Case Module-Delete Product Module

Case: Shopping cart case module-add background to selected product

jQuery element operation

Mainly traverse, create, add, delete element operations.

Iterate over elements

jQuery implicit iteration is to do the same operation on the same type of element. If you want to perform different operations on the same type of element, you need to use traversal.
Syntax 1:

$("div").each(function (index, domEle) { xxx; }）

The each() method iterates through each matched element. Mainly use DOM processing. each each
The callback function inside has 2 parameters: index is the index number of each element; demEle is each DOM element object, not a jquery object
- So if you want to use the jquery method, you need to convert this dom element to a jquery object $(domEle)
Syntax 2:

$.each(object，function (index, element) { xxx; }）

The $.each() method can be used to traverse any object. Mainly used for data processing, such as arrays, objects
The function inside has 2 parameters: index is the index number of each element; element traverses the content

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
    <script src="jquery.min.js"></script>
</head>

<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);
             2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
             $.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 属性值
            })
        })
    </script>
</body>

</html>

Case: Shopping Cart Case Module-Calculating Total and Total

analysis

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

// 5. 计算总计和总额模块
getSum();

function getSum() {
    var count = 0; // 计算总件数 
    var money = 0; // 计算总价钱
    $(".itxt").each(function(i, ele) {
        count += parseInt($(ele).val());
    });
    $(".amount-sum em").text(count);
    $(".p-sum").each(function(i, ele) {
        money += parseFloat($(ele).text().substr(1));
    });
    $(".price-sum em").text("￥" + money.toFixed(2));
}

Create element

$(''<li></li>'');
Dynamically created a

Add element

Internally added

element.append(''内容'')
Put the content at the end of the matched element , similar to native appendChild.
element.prepend(''内容'')
Put the content at the front of the matched element .

External addition

element.after(''内容'') // 把内容放入目标元素后面
element.before(''内容'') // 把内容放入目标元素前面
① Add elements inside, after generation, they are parent-child relationship.

②Add external elements. After they are generated, they are brothers.

Delete element

element.remove() // 删除匹配的元素（本身）

element.empty() // 删除匹配的元素集合中所有的子节点

element.html('''') // 清空匹配的元素内容

①remove Delete the element itself.
②empt() and html('''') are equivalent, both can delete the content in the element, but html can also set the content.

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
            // 2. 添加元素

            // (1) 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面

            // (2) 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

        })
    </script>
</body>

Case: Shopping Cart Case Module-Delete Product Module

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

// 删除商品模块
// (1) 商品后面的删除按钮
$(".p-action a").click(function() {
    // 删除的是当前的商品 
    $(this).parents(".cart-item").remove();
    getSum();
});
// (2) 删除选中的商品
$(".remove-batch").click(function() {
    // 删除的是小的复选框选中的商品
    $(".j-checkbox:checked").parents(".cart-item").remove();
    getSum();
});
// (3) 清空购物车 删除全部商品
$(".clear-all").click(function() {
    $(".cart-item").remove();
    getSum();
})

Case: Shopping cart case module-add background to selected product

analysis

① 核心思路：选中的商品添加背景，不选中移除背景即可
② 全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
③ 小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景
④ 这个背景，可以通过类名修改，添加类和删除类

// 1. 全选 全不选功能模块
// 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
// 事件可以使用change
$(".checkall").change(function() {
    // console.log($(this).prop("checked"));
    $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
    if ($(this).prop("checked")) {
        // 让所有的商品添加 check-cart-item 类名
        $(".cart-item").addClass("check-cart-item");
    } else {
        // check-cart-item 移除
        $(".cart-item").removeClass("check-cart-item");
    }
});
// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
$(".j-checkbox").change(function() {
    // if(被选中的小的复选框的个数 === 3) {
    //     就要选中全选按钮
    // } else {
    //     不要选中全选按钮
    // }
    // console.log($(".j-checkbox:checked").length);
    // $(".j-checkbox").length 这个是所有的小复选框的个数
    if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
        $(".checkall").prop("checked", true);
    } else {
        $(".checkall").prop("checked", false);
    }
    if ($(this).prop("checked")) {
        // 让当前的商品添加 check-cart-item 类名
        $(this).parents(".cart-item").addClass("check-cart-item");
    } else {
        // check-cart-item 移除
        $(this).parents(".cart-item").removeClass("check-cart-item");
    }
});

(JavaScript learning record): jQuery element operation

jQuery element operation

Iterate over elements

Case: Shopping Cart Case Module-Calculating Total and Total

Create element

Add element

Internally added

External addition

Delete element

Case: Shopping Cart Case Module-Delete Product Module

Case: Shopping cart case module-add background to selected product

Guess you like