web前端培训分享之jQuery data()用法

来源：培训无忧网 发布人：星星

2022-01-12 11:03:11|已浏览：179次

web前端的学习中，我们经常会学到关于jQuery的知识，这也是必学项，本期web前端培训教程主要给大家介绍的jQuery data()方法的用法，来看看下面的详细介绍。
data()方法用来在指定的元素上存取数据。数据保存在内存中，并不会修改DOM元素结构;一旦页面刷新，之前存放的数据都将被移除。具体语法如下：$(selector).data("数据名") //获取数据 $(selector).data("数据名", "数据值") //设置数据
下面我们演示通过data()方法实现数据的操作，示例代码如下。

<div>我是div</div>
<script>
$("div").data("uname", "andy"); //设置数据
console.log($("div").data("uname")); //获取数据，输出结果: andy
</script>

上述代码运行后，uname会保存到内存中，不会出现在HTML结构中。在开发者工具中查看元素，如下图所示。
jQuery data()用法

使用data()方法还可以读取HTML5自定义属性data-index，示例代码如下。

<div index="1" data-index="2">我是div</div>
<script>
console.log($("div").data("index")); // 输出结果: 2
</script>

在上述代码中，第3行用来获取data-index属性，属性名中不需要“data-”前缀，并且返回的结果是数字型。

本文由培训无忧网千锋教育专属课程顾问老师整理发布，更多web前端课程信息可关注培训无忧网web前端培训频道或添加老师微信：15033336050

注：尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-14777.html 违者必究！部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们，了解更多相关资讯请关注web前端频道查看更多，了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多：150 3333 6050

相关新闻