jQuery常用API--属性操作

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

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

1.1 获取属性语法

element.prop('属性')

1.2 设置属性语法

element.prop('属性’, '属性值')

1.3 代码体验

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body><!-- HTML结构 --><a href="https://www.baidu.com">跳转至百度</a><!-- js 代码 --><script>// 1. element.prop('属性')  获取当前属性的属性值console.log($('a').prop('href')); // https://www.baidu.com/// 2. element.prop('属性','属性值')  设置当前属性的属性值$('a').prop('title', '开心就好'); // 设置鼠标移入出现的文字说明</script>
</body>

由于给<a>标签设置了固有属性title的值，所以鼠标移入后会出现下图效果：

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

用户自己给元素添加的属性，称之为自定义属性。比如给div 添加index ="2"

2.1 获取属性语法

element.attr("属性") // 类似原生JS 中的 getAttribute()

2.2 设置属性语法

element.attr("属性", "属性值") // 类似原生JS 中的 setAttribute()

2.3 代码体验

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body><div index="2" data-index="4"></div><a href="122"></a><script>// 注意：prop()无法获取到自定义属性的值console.log($('div').prop('index')); // undefined// 1. element.attr('属性')  获取当前自定义属性的属性值console.log($('div').attr('index')); // 2// 2. element.attr('属性','属性值')  设置当前自定义属性的属性值$('div').attr('index', '8');// 3. attr()方法可以获取固有属性console.log($('a').attr('href')); // 122// 4. attr() 方法也可以获取H5自定义属性 data-xxxconsole.log($('div').attr('data-index'));  // 4</script>
</body>
在利用attr("属性", "属性值") 重新设置了index的值后，可以在调试器中看到下图效果：

注意：自定义属性的值无法使用prop()获取，而要使用attr(). 但是attr()不仅可以获取自定义属性，也可以获取固有属性，但是我们一般获取固有属性还是使用prop()。attr()还可以获取H5自定义属性，即data-xxx的属性值。

3. 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改DOM元素结构（也就是说存放的数据，在DOM树上是看不见的），而且一旦页面刷新，之前存放的数据都将被移除。

3.1 附加数据语法

element.data("name" , "value") // 给元素附加数据

3.2 获取数据语法

element.data("name") // 从元素中获取数据

3.3 代码体验

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body><div index="2" data-index="4"></div><span></span><script>// 1. 缓存数据到span元素中$('span').data("uname", "cindy");// 2. 获取缓存数据console.log($('span').data("uname"));// 3. 这个方法还可以获取H5自定义属性，而且不需要写data-，并且得到的是数字型console.log($('div').data('index'));  // 获得data-index的值--4</script>
</body>
注意：

① data()是给指定元素缓存数据，但是不修改DOM元素结构；

② data()方法还可以获取H5自定义属性data-index的值，并且不需要写data- , 且得到的结果是数字型，使用attr()方法得到的 data-index的值是字符串型

4.案例-购物车全选功能

需求：

① 勾上全选则所有商品信息前的复选框勾上，取消全选，所有商品信息前的复选框也相应的取消选中；

② 如果所有商品信息前的复选框都勾上了，则全选按钮勾上，否则全选按钮不勾上

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- css样式 -->
<style>* {margin: 0;padding: 0;}.flex {display: flex;}.container {width: 1200px;margin: 100px auto;font-size: 14px;}/* 顶部title样式 */.title {padding: 0 10px;margin-bottom: 15px;height: 50px;line-height: 50px;background-color: #f0f3f0;border: 1px solid #ccc;}.title .commodity {margin: 0 450px 0 100px;}.title .num {margin: 0 126px;}.title .operate {margin-left: 93px;}/* 商品详情样式 */ .item {padding: 20px 10px 50px;margin-top: -2px;color: #333;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;}.product {width: 370px;margin: 0 200px 0 30px;}.product img {float: left;vertical-align: top;padding: 5px;margin: 0 10px;border: 1px solid #ccc;}.count {margin: 0 80px;}.count div {width: 20px;height: 20px;text-align: center;border: 1px solid #ccc;}.count input {width: 50px;height: 20px;text-align: center;outline: none;border: none;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}.total {margin-right: 80px;}.delete a {color: #333;text-decoration: none;}.delete a:hover {color: #369;text-decoration: underline;}/* 底部结算样式 */.bottom {padding-left: 10px;margin-top: 15px;height: 50px;line-height: 50px;border: 1px solid #ccc;}.bottom .left {float: left;}.bottom .right {float: right;}.bottom .checked {margin: 0 30px 0 50px;}.right .check_num {color: #F15343;padding: 0 5px;}.right strong {color: #F15343;font-size: 18px;}.right .btn {margin-left: 8px;width: 100px;height: 50px;border: none;color: #fff;font-size: 18px;background-color: #F15343;}
</style><!-- HTML结构 --><div class="container"><!-- 顶部菜单信息 --><div class="title"><input type="checkbox" name="" class="checkAll"> 全选<span class="commodity">商品</span><span>单价</span><span class="num">数量</span><span>小计</span><span class="operate">操作</span></div><!-- 商品详细信息 --><div class="item flex"><input type="checkbox" class="product_check"><div class="product"><img src="./img/p1.jpg" alt=""><span>【5本32.9元】经典儿童文学彩图青少年版八十天环游地球中学生语文教学大纲</span></div><div class="price">￥12.60元</div><div class="count flex"><div>-</div><input type="text" value="1"><div>+</div></div><div class="total">￥12.60元</div><div class="delete"><a href="javascript:;">删除</a></div></div><div class="item flex"><input type="checkbox" class="product_check"><div class="product"><img src="./img/p2.jpg" alt=""><span>【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童</span></div><div class="price">￥25.90元</div><div class="count flex"><div>-</div><input type="text" value="1"><div>+</div></div><div class="total">￥25.90元</div><div class="delete"><a href="javascript:;">删除</a></div></div><div class="item flex"><input type="checkbox" class="product_check"><div class="product"><img src="./img/p3.jpg" alt=""><span>唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</span></div><div class="price">￥29.90元</div><div class="count flex"><div>-</div><input type="text" value="1"><div>+</div></div><div class="total">￥29.90元</div><div class="delete"><a href="javascript:;">删除</a></div></div><!-- 底部结算信息 --><div class="bottom"><div class="left"><input type="checkbox" name="" class="checkAll"> 全选<span class="checked">删除选中的商品</span><span class="clear">清理购物车</span></div><div class="right"><span>已经选<span class="check_num">1</span>件商品</span><span>总价：<strong>￥12.60</strong></span><button class="btn">去结算</button></div></div></div><!-- js 代码 --><script>$(function() {// 1. 全选  全不选功能模块// 就是把全选按钮（checked）的状态赋值给 三个商品复选框（.product_check）就可以了// 可以使用change事件$(".checkAll").change(function() {// (1) 获取全选按钮的选中状态checked的值let flag = $(this).prop("checked");// (2) 把全选按钮checked的值，赋值给三个商品复选框以及另一个全选按钮的属性checked$(".product_check,.checkAll").prop("checked", flag);});// 2. 商品复选框的选中状态反过来影响全选按钮// (1) 给每个商品复选框绑定一个change事件$(".product_check").change(function() {// (2) 如果被选中的商品复选框个数等于商品复选框个数，则选中全选按钮，否则不选中if ($(".product_check:checked").length === $(".product_check").length) {$(".checkAll").prop("checked", true);} else {$(".checkAll").prop("checked", false);}})})</script>
</body>

案例分析：

① 全选功能思路：里面3个商品信息复选框按钮的选中状态，是与全选按钮保持一致的

② 因为选中状态checked 是复选框的固有属性，所以需要利用prop() 方法来获取和设置

③ 把全选按钮选中状态值赋值给3个商品复选框就可以了；

④ 反过来实现全选按钮选中状态思路：当我们每次点击商品信息复选框时，就进行判断：

⑤ 如果商品信息复选框被选中的个数等于3（也就是商品复选框本身个数）时，就把全选按钮选上，否则不选上

⑥ :checked 选择器，可以用于查找被选中的表单元素