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 代码体验 

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body><!-- HTML结构 --><div index="2" data-index="4"></div><a href="122"></a><!-- js 代码 --><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 代码体验 

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body><!-- HTML结构 --><div index="2" data-index="4"></div><span></span><!-- js 代码 --><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 选择器,可以用于查找被选中的表单元素

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/44720.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【统计模型】某地区土壤所含可给态磷回归分析

目录 某地区土壤所含可给态磷回归分析 一、研究目的 二、数据来源和相关说明 三、描述性分析 3.1 样本描述 3.2 数据可视化 四、数据建模 4.1 回归模型A 4.2 回归模型B 4.3 回归模型B模型诊断 4.4 回归模型C 五、结论及建议 5.1 结论 5.2 建议 六、代码 某地区土…

【MySQL 第18章_MySQL8其它新特性】

第18章_MySQL8其它新特性 1. MySQL8新特性概述 1.1 MySQL8.0 新增特性 1. 更简便的NoSQL支持2.更好的索引3. 更完善的JSON支持4. 安全和账户管理5. InnoDB的变化6. 数据字典7. 原子数据定义语句8. 资源管理9. 字符集支持10. 优化器增强11. 公用表表达式12. 窗口函数13. 正则表…

第18章_MySQL8其它新特性(窗口函数、公用表表达式)

第18章_MySQL8其它新特性 第18章_MySQL8其它新特性1. MySQL8新特性概述1.1 MySQL8.0 新增特性1.2 MySQL8.0移除的旧特性 2. 新特性1&#xff1a;窗口函数2.1 使用窗口函数前后对比2.2 窗口函数分类2.3 语法结构2.4 分类讲解1. 序号函数2. 分布函数3. 前后函数4. 首尾函数5. 其他…

淘宝代购系统、海外代购系统、代购小程序、APP的开发以及源码PHP前端源码

以下是部分演示站&#xff0c;需了解更多代码展示请移步http://console.open.onebound.cn/console/?iAndy https://china-taobao.com/ 俄罗斯市场 ; https://www.cssbuy.com 全球市场; https://www.yeslogistics.com.my/ 新马市场; https://www.engtb.com/ 新加坡马来西亚…

18_MySQL8其它新特性

1. MySQL8新特性概述 MySQL从5.7版本直接跳跃发布了8.0版本&#xff0c;可见这是一个令人兴奋的里程碑版本。MySQL 8版本在功能上做了显著的改进与增强&#xff0c;开发者对MySQL的源代码进行了重构&#xff0c;最突出的一点是多MySQL Optimizer优化器进行了改进。不仅在速度上…

电商平台如何高效快速获取信息?

随着互联网的发展&#xff0c;电商跨境电商给我们的购物带来了巨大的便利和变化。 比如电商平台中&#xff0c;经常要做的就是如何获取某个平台畅销产品。这里举例&#xff0c;淘宝畅销榜的信息获取。 请求地址 公共参数 请求参数 请求参数&#xff1a;q 参数说明&#xf…

MySQL 面试常问问题及答案总结

1、事务的特性ACID 原子性&#xff08;Atomicity&#xff09; 事务被视为不可分割的最小单元&#xff0c;事务的所有操作要么全部提交成功&#xff0c;要么全部失败回滚。 回滚可以用回滚日志&#xff08;Undo Log&#xff09;来实现&#xff0c;回滚日志记录着事务所执行的…

酷藏品:5月27日国内主流平台数字藏品NFT发售日报

“酷宇宙”汇总每日国内主流平台数字藏品发售的相关信息&#xff0c;仅作为数字藏品爱好者交流使用&#xff0c;并不构成任何投资及金融方面的参考。 请大家严格遵守国家相关法律法规&#xff0c;保护好自己的财产&#xff0c;远离风险&#xff0c;远离非法投资&#xff01; …

5月23日国内主流平台数字藏品NFT发售日报

“酷宇宙”汇总每日国内主流平台数字藏品发售的相关信息&#xff0c;仅作为数字藏品爱好者交流使用&#xff0c;并不构成任何投资及金融方面的参考&#xff0c;如需交流请点击&#xff1a;联系方式 请大家严格遵守国家相关法律法规&#xff0c;保护好自己的财产&#xff0c;远…

tmall API接口关键字获取商品数据

作为一名技术爱好者&#xff0c;我们总会遇到各种各样的技术问题&#xff0c;需要寻找合适的技术解决方案。而在互联网时代&#xff0c;我们可以快速通过搜索引擎获取丰富的技术资源和解决方案。然而&#xff0c;在不同的技术分享中&#xff0c;我们常常会遇到质量参差不齐的文…

【MySQL】数据备份(导出数据 / 导入数据)

&#x1f3af;导出数据 1、使用 SELECT ... INTO OUTFILE 语句导出数据 SELECT...INTO OUTFILE 是 MySQL 用于导出数据的语句&#xff0c;它允许将查询结果保存到指定的文件中。 该语句的基本语法如下&#xff1a; SELECT column1, column2, ... INTO OUTFILE file_path …

MySQL基础篇-第18章_MySQL8其它新特性

第18章_MySQL8其它新特性 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 1. MySQL8新特性概述 MySQL从5.7版本直接跳跃发布了8.0版本&#xff0c;可见这是一个令人兴奋的里程碑版本。MySQL 8版…

通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败。错误:“Connection refused: connect.......

第一步&#xff1a;打开 SQL Server 配置管理器 第二步&#xff1a;点击SqlServer网络配置&#xff0c;点击 TCP/IP&#xff0c;右键属性&#xff0c;点击启用。 确定IP是1433 第三步&#xff1a;启动 MSSQLSERVER服务。 第四步&#xff1a;如果MSSQLSERVER在这个服务是运行状…

NumPy入门讲座(4):常用函数

文章目录 1. 特殊值2. 函数命名空间3. 数学函数4. 统计函数1. 特殊值 NumPy有两个很有趣的特殊值,np.nan 和 np.inf,nan 是 not a number 的简写,意为不是数字,inf 是 infinity 的简写,意为无穷大。咱们先来看看它们的本尊真身。 >>> a = np.array(

先正达将在科创板上会:拟募资650亿元,预计全年收入超2100亿元

3月15日&#xff0c;先正达集团股份有限公司&#xff08;下称“先正达”&#xff09;在上海证券交易所递交招股书&#xff08;上会稿&#xff09;。这意味着&#xff0c;先正达将于近期上会&#xff0c;接受科创板上市委员会的现场审议。据贝多财经了解&#xff0c;先正达于202…

科学计算基础软件包NumPy入门讲座(5):常用函数

文章目录 1. 特殊值2. 函数命名空间3. 数学函数4. 统计函数5. 插值函数6. 多项式拟合函数7. 自定义广播函数7.1&#xff0e;使用np.frompyfunc定义广播函数7.2 使用np.vectorize定义广播函数 1. 特殊值 NumPy有两个很有趣的特殊值&#xff0c;np.nan 和 np.inf。nan 是 not a …

chatgpt解决建表维度处理逻辑

需求 现有店铺汇总表&#xff1a;小时日月三种维度划分&#xff0c;内涵客流数据销售数据。 需要根据数据计算出服务区南北区每个小时&#xff0c;日&#xff0c;月&#xff0c;年四种维度的客单价客单转换率&#xff0c;服务区每个店铺的每个小时&#xff0c;日&#xff0c;月…

AI论文“高引用转化率”排名出炉:OpenAI第一,旷视第二,谷歌位居第九

丰色 发自 凹非寺量子位 | 公众号 QbitAI 哪些机构或国家&#xff08;地区&#xff09;发表的AI研究是最具影响力的&#xff1f; 为了弄清这个问题&#xff0c;美国Zeta Alpha平台统计了2020-2022三年之间全世界引用次数前100的AI论文&#xff0c;得出了一些很有意思的结果。 比…

GPT-4 vs 文心一言:让子弹飞一会儿

百度的文心一言刚发布&#xff0c;网上就出现很多群嘲的文章。   笔者不是百度的粉丝&#xff0c;对百度搜索结果的过度营销很反感&#xff0c;但看了GPT-4发布会和文心一言发布会&#xff0c;且了解了文心一言的发布前后事情&#xff0c;有几点真让人不吐不快&#xff01;…

2019年新版新媒体运营学习路线,附完整视频+工具+运营经验

一、2019版新媒体运营学习路线图——每阶段市场价值和可解决的问题 二、2019版新媒体运营学习路线图——学习大纲和每阶段知识点 三、新媒体运营学习路线图——视频篇&#xff1a; 1、第一阶段&#xff1a;构建营销思维视频资源 第1阶段&#xff1a;新媒体运营之如何构建运营思…