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 attribute manipulation

Set or get the intrinsic property value of the element prop()

Set or get element custom attribute value attr()

Data cache data()

Case: Shopping Cart Case Module-Select All

jQuery attribute manipulation

Set or get the intrinsic property value of the element prop()

The so-called elements inherent attributes that element comes with its own properties , such as element inside the href, such as elements inside type.

Get attribute syntax
prop(''属性'')
Set attribute syntax
prop(''属性'', ''属性值'')

Set or get element custom attribute value attr()

The attributes that users add to elements are called custom attributes . For example, add index = "1" to the div.

Get attribute syntax
attr(''属性'') // 类似原生 getAttribute()
Set attribute syntax
attr(''属性'', ''属性值'') // 类似原生 setAttribute()
This method can also get H5 custom attributes

Data cache data()

data () method may access data on the specified elements , and does not modify the DOM element structure . Once the page is refreshed, all previously stored data will be removed.
Additional data syntax

data(''name'',''value'') // 向被选元素附加数据

Get data syntax

date(''name'') // 向被选元素获取数据

At the same time, you can also read the HTML5 custom attribute data-index, and the result is a number

<!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>
    <script src="jquery.min.js"></script>
</head>

<body>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>

</html>

Case: Shopping Cart Case Module-Select All

analysis

① 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
② 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
③ 把全选按钮状态赋值给3小复选框就可以了。
④ 当我们每次点击小的复选框按钮，就来判断：
⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
⑥ :checked 选择器 :checked 查找被选中的表单元素。

// 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);
    }

(JavaScript learning record): jQuery attribute operation

jQuery attribute manipulation

Set or get the intrinsic property value of the element prop()

Set or get element custom attribute value attr()

Data cache data()

Case: Shopping Cart Case Module-Select All

Guess you like