html5的data-*属性

最新推荐文章于 2022-03-13 10:38:45 发布
最新推荐文章于 2022-03-13 10:38:45 发布
阅读量396 收藏 3
点赞数 1
分类专栏： html5 文章标签： html5 data
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18416057/article/details/52933367
版权

今天我说一下html5的一个data-*属性，我也是一个同事说有这么一个东西（本人不太研究前端的大笑）


这个也不难，看一下w3School的定义

简单的说就是一个可以再标签上放数据的属性，有点像一个map，*就是你的key，数据就是你的value


标签上写法

js取法


结果

key不区分大小写，存的时候都是以小写存的。比方data-Code  你取的时候要用code去取要不然取不出来的！！！（自己做的过程中的出来的）

成功！！！！！

有什么不对的地方请提出

梦想的精英
关注
专栏目录
使用HTML5自定义data属性进行编程
ByteWhisper的博客
09-21 273
要在HTML元素上添加自定义data属性，我们可以使用"data-"前缀，后跟任意自定义名称。这个自定义名称可以是任何合法的HTML属性名称，但必须以字母开头，并且只能包含字母、数字、连字符和下划线。下面是一个示例，展示如何在一个元素上添加自定义data属性：
HTML5中自定义数据属性data-*属性(3)jq如何操作data-*
最新发布
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
11-13 608
属性(3)jq如何操作data-在 jQuery 中，可以使用data()方法来获取data-*属性的值。这个方法可以读取或设置 HTML 元素上的data-*属性。如果想获取data-*在上面的代码中，需要将selector替换为你要获取data-*属性的 HTML 元素的选择器，而应该被替换为你想要获取的data-*属性的名称。例如，如果有一个像这样的 HTML 元素：
HTML5自定义属性之data-*
weixin_30387799的博客
08-25 392
HTML5增加了一项新功能是自定义数据属性，也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。 <input type="button" value="按钮" data-index="10" data-index-color="r...
HTML5中的data-
qq_45715615的博客
03-13 2509
data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。 data-* 属性包括两部分： 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符 属性值可以是任意字符串 注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。 ...
html5 data属性的使用
whaxrl的专栏
07-30 774
 HTML5规范里增加了一个自定义data属性，这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的.   一、html5中data-*属性的定义 1、data-* 属性用于存储页面或应用程序的自定义数据。 2、data-* 属性赋予我们在所有
H5里面的data属性介绍
wuxy720
03-31 6814
新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用，以及包括jQuery在内的四种存取方式。 HTML5 Datas
详解HTML5 data-* 自定义属性
12-30
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-...
HTML5新增属性data-*和js/jquery之间的交互及注意事项
09-27
HTML5的data-*属性是为了解决网页或应用程序中存储私有自定义数据的需求而引入的新特性。这个属性允许开发者在HTML元素上嵌入自定义的数据，而不影响标准的语义。data-*属性的命名规则非常简单：以"data-"开头，后面...
HTML5的自定义属性data-*详细介绍和JS操作实例
09-28
HTML5的自定义属性`data-*`是一个强大的特性，它允许开发者在HTML元素中存储额外的数据，这些数据通常不会显示在页面上，但可以被JavaScript轻松访问和操作。这一特性极大地扩展了HTML5的灵活性，特别是在处理数据...
html5的自定义data-*属性与jquery的data()方法的使用
09-28
HTML5中的data-*属性是W3C组织为了满足开发者在HTML元素上存储私有自定义数据的需求而引入的。这种属性允许我们在标准的HTML标签内嵌入自定义数据，而不违反HTML的语义性和有效性。它们特别有用，因为它们提供了数据...
使用 HTML5 data 属性
iChangebaobao的博客
05-06 503
一个 data 属性，本质就是：一个用于保存数据的自定义属性。它们总是以 data- 作为前缀，后面跟随着描述性的（只允许小写字母和连接字符-hyphens）。 一个元素可以有任意数量的 data 属性。 <li data-id="1234" data-email="123456789@qq.com" data-age="22">Calvin</li> 使用 data...
HTML5中的data-*属性
丁哒哒的博客
04-06 6847
HTML5中的data属性
JS组件系列——使用HTML标签的data属性初始化JS组件
weixin_34072857的博客
01-26 143
前言：最近使用bootstrap组件的时候发现一个易用性问题，很多简单的组件初始化都需要在JS里面写很多的初始化代码，比如一个简单的select标签，因为仅仅只是需要从后台获取数据填充到option里面，可是从后台取数据就需要js的初始化，所以导致页面初始化的时候js的初始化代码里面出现很多重复的代码，看着很闹心。于是想起bootstrap table里面的data属性来，如果能够直接在html里...
data-*的用法
weixin_33939380的博客
01-17 475
我从后台获取2份合同，一份需要点击下载，另一份无需下载，但是因为是遍历出来的所以就不方便写两个点击事件，但是通过data-* 就可以写一个点击事件实现多个不同的事件。 我这边通过一个简单的demo记录一下data的用法 同时记录下data在w3c的地址 http://www.w3school.com.cn/tags/att_global_data.asp 此demo通过给data-1="1"一...
HTML5 data-* 自定义属性
xif3681的博客
09-13 732
参考文章： http://www.cnblogs.com/dolphinX/p/3348458.html
html5中data-*自定义属性
jasnet_u的博客
10-04 2256
  data-* 属性是HTML5中的新属性 &lt;ul&gt;    &lt;li id="a" data-animal-type="鸟类"&gt;喜鹊&lt;/li&gt;    &lt;li id="b" data-animal-type="鱼类"&gt;金枪鱼&lt;/li&gt;     &lt;li id="c&qu
关于data-*，html5的新特性之一
liyidong2014的博客
09-21 374
几乎所有编程语言都会有自定义属性这种功能，而html5里的data-*则可以解决自定义属性混乱无管理的现状。 两种设置方式：1、直接在html元素标签上书写       click it! data-num就是一种自定义属性。 2、javascript实现自定义属性 html5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合 var try
html5新特性data-属性
weixin_34184561的博客
06-23 267
1.HTML5自定义属性及基础 html5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相应的id: <a href="javascript:;" data-id="2312">测试</a> 这里的data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用css属性选择器进行样式设置.数量不受限制...
利用data-*属性简化Bootstrap组件初始化
首先，作者回顾了jQuery的`data()`方法，这是一种HTML5特性，允许在HTML元素上附加自定义的数据，这些数据可以被jQuery轻松地读取和操作。`data-*`属性的规则是：所有属性名称以"data-"开头，由短横线分隔。例如，要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值