jQuery属性操作

jQuery

jQuery属性操作

1. 元素固有属性值 prop()

1.1 介绍

image-20230320185053956

1.2 语法

image-20230320185136674

2.元素自定义属性值 attr()

2.1 介绍

image-20230320185201149

2.2 语法

image-20230320185209248

3. 数据缓存 data()

3.1 介绍

image-20230320185219166

3.2 语法

image-20230320185226187

4. 代码解释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
</head>

<body>
    <a href="https://solar.sunrainzc.cn">423</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="3"></div>
    <span>123</span>
    <script>
        $(function () {
            // 1. 获取属性语法 prop()
            // 所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type

            // 1.1 设置或获取元素固有属性值 prop()
            // prop(''属性'')
            var data = $('a').prop('href');
            console.log(data);

            // 1.2 设置属性语法
            // prop(''属性'', ''属性值'')
            $('a').prop('href','https://www.baidu.com');
            $('input').change(function() {
                console.log($(this).prop('checked'));
            });

            // 2. 设置或获取元素自定义属性值 attr()
            // 用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

            // 2.1 获取属性语法
            // attr(''属性'') // 类似原生 getAttribute()
            console.log($('div').attr('index'));

            // 2.2 设置属性语法
            // attr(''属性'', ''属性值'') // 类似原生 setAttribute()
            $('div').attr('index',2)

            // 改方法也可以获取 H5 自定义属性

            // 3. 数据缓存 data()
            // data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。 

            // 3.1 附加数据语法
            // data(''name'',''value'') // 向被选元素附加数据
            $('span').data('name','andy')

            // 3.2 获取数据语法
            // date(''name'') // 向被选元素获取数据 
            console.log($('span').data('name'));

            // 同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型
            console.log($('div').data('index'));

        })
    </script>
</body>

</html>

5. 购物复选框案例

5.1 思路

image-20230320185359227

5.2 骨架结构

image-20230320185420075

5.3 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<script>
        // js
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        // var all = document.querySelectorAll('.checkall')
        // var inputbox = document.querySelectorAll('.j-checkbox')
        // var checkBg=document.querySelectorAll('.cart-item')
        // for (var i = 0; i < all.length; i++) {
        //     all[i].onclick = function () {
        //         for (var i = 0; i < inputbox.length; i++) {
        //             // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
        //             inputbox[i].checked = this.checked
        //         }

        //         for (var i = 0; i < all.length; i++) {
        //             all[i].checked = this.checked
        //         }

        //         for(var i=0; i < checkBg.length; i++) {
        //             checkBg[i].classList.toggle('check-cart-item')
        //         }
        //     }
        // }

        // // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 
        // // 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        // for (var i = 0; i < inputbox.length; i++) {
        //     inputbox[i].onclick = function () {
        //         // flag 控制全选按钮是否选中
        //         var flag = true;
        //         // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
        //         for (var i = 0; i < inputbox.length; i++) {
        //             if (!inputbox[i].checked) {
        //                 flag = !flag
        //                 // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
        //                 break
        //             }
        //         }
        //         for (var i = 0; i < all.length; i++) {
        //             all[i].checked = flag
        //         }

        //         this.parentNode.parentNode.classList.toggle('check-cart-item')
        //     }
        // }

        // jquery
        $(function () {
            // ① 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
            // ② 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
            // ③ 把全选按钮状态赋值给3小复选框就可以了。
            // ④ 当我们每次点击小的复选框按钮，就来判断：
            // ⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
            // ⑥ :checked 选择器 :checked 查找被选中的表单元素。
            $('.checkall').change(function () {
                $('.j-checkbox,.checkall').prop('checked', $(this).prop('checked'));
                
                // 切换背景
                if ($('.checkall:checked').length === $('.checkall').length) {
                    $('.cart-item').addClass('check-cart-item')
                } else {
                    $('.cart-item').removeClass('check-cart-item')
                }
            })

            $('.j-checkbox').change(function () {
                if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
                    $('.checkall').prop('checked', true);
                } else {
                    $('.checkall').prop('checked', false);
                }
            })

            // 切换背景
            $('.j-checkbox').click(function () {
                $(this).parents('.cart-item').toggleClass('check-cart-item')
            })
        })
</script>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~