jQuery常用API（四）——jQuery属性操作

2021-12-03 00:06:31

4.jQuery属性操作

4.1 设置或获取元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type

1. 获取属性语法

prop("属性")

2. 设置属性语法

prop(n|p|k,v|f)

prop("属性",“属性值”)

 1 <body>
 2     <input type="checkbox" name="" id="" checked>
 3     <script>
 4         //获取复选框更改后的checked值
 5         $(function () {
 6             $("input").change(function () {
 7                 console.log($(this).prop("checked"));
 8 
 9             })
10         })
11 
12     </script>
13 
14 </body>

4.2 设置或获取元素自定义属性值attr()

attr(name|pro|key,val|fn)

如：<div index="1"></div>的index即为用户自定义属性，不能通过prop获取

1.获取属性语法

attr("属性")

2.设置属性语法

attr("属性","属性值")

4.3 数据缓存data()

data([key],[value])

数据缓存data（）这个里面的数据是存放在元素的内存里面

 1 <span></span>
 2     <script>
 3         $(function () {
 4             $("span").data("uname", "andy");
 5             //使用,相当于给元素存入一个变量
 6             console.log($("span").data("uname"));
 7 
 8         })
 9 
10     </script>

也可以获取H5自定义属性如：data-index，返回是数字型

$("div").attr("data-index")
$("div").data("index")//此处注意区别，不用写data-

4.4购物车案例（全选）

全选思路：里面三个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走。
checked为复选框固有属性，利用prop获取和设置该属性。
把全选按钮状态赋值给3小复选框就行了。
每次点击小的复选框，就判断：
如果小复选框被选中个数等于3就应该把全选按钮选上，否则不选。
:checked选择器 :checked查找被选中的表单元素

先引入jquery再引入js

car.js:

 $(function () {
            $(".checkall").change(function () {
                $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
            });

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

参考文章