HTML5自定义数据属性data-*

'人'在江湖，'身'不由己

HTML元素属性可以分为两种类：基本属性和自定义数据属性

基本属性：

id、class等基本属性的主要作用是用来给一组元素添加样式信息的或者用来获取指定元素的。

<div><span id="normal">基本属性作用</span>
</div>

<style type="text/css">#normal{color: red;font-size: 24px;}
</style>

<script type="text/javascript">$('#normal').css({"color":"red","font-size":"24px"})
</script>

自定义数据属性：

所有在元素上以data-开头的属性均为数据属性，（粒如：data-id、data-value、data-distance等）, data-*数据属性是用于存储页面或应用程序的私有自定义数据。
数据属性用于存储一些不需要显示在浏览器的额外信息，但后期可能需要用到的数据。
访问数据属性值：(以data-id为例)
- JavaScript访问
  - document.querySelector(selector).getAttribute(‘data-id’);
  - document.querySelector(selector).dataset.id;
- jQuery访问
  - $(selector).attr("data-xxx ")
  - $(selector).data(‘id’);
  - 注意：使用jQuery时，使用$(selector).data(xxx)来访问这些属性的值，这里的xxx与data属性名有关。粒如：data-id，则xxx为id；data-value，则xxx为value；data-number，则xxx为number

粒如：

<div class="item-input"><select id="product-category"><option data-value="28">招牌系列</option><option data-value="29">果茶系列</option><option data-value="31">原创奶茶</option><option data-value="30">咖啡系列</option></select>
</div>

//获取下拉列表框中被选中option元素的数据属性的值,并保存到productCategory对象里
product.productCategory = {productCategoryId : $('product-category option:checked').data('value')};

数据属性使用规则：

第一：存储在这些属性中的数据应该是字符串类型
第二：数据属性应该只在没有其他合适的HTML元素或属性时使用。例如，使用data-class属性存储元素class属性的值是不恰当的

HTML5自定义数据属性data-*相关推荐

如何使用 HTML5 自定义数据属性
如何使用 HTML5 自定义数据属性在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一 ...
html5游戏怎么修改数值,如何使用HTML5自定义数据属性
在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信 ...
如何使用HTML5自定义数据属性以及原因
为什么要使用自定义数据属性? 很多时候,我们需要存储与不同DOM元素关联的信息.这些信息对于读者而言可能不是必不可少的,但是易于访问将使我们的开发人员的生活更加轻松. 例如,假设您在网页上有一个不同餐 ...
使用HTML5的自定义数据属性的jQuery选择器
本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...
Web开发技巧：使用自定义数据属性创建弹出窗口
2019独角兽企业重金招聘Python工程师标准>>> 在开发web应用时,有时会用JavaScript获取文档之外的信息,某些情况下,我们需要用一些技巧来处理这些额外信息以保证We ...
html5 mp3播放器源码,HTML5自定义mp3播放器源码
audio对象 src兼容.ogg .wav .mp3 width autoplay loop muted静音播放play() var myAudio = new Audio(); myAudio. ...
探索在原生网页中使用自定义数据属性
先说说我为什么有这种"奇怪"的想法. 它基于这样一个场景:我最近闲来无事完善了一个小demo:音乐播放器.在里面有一个功能 -- 点击列表某一项弹出音乐播放弹框.我原先一直是&qu ...
米云影视html5播放器,网页制作HTML5自定义视频播放器源码
video对象兼容性写法您的浏览器不支持,请升级您的浏览器 video 标签 width height autoplay muted poster带有预览图(海报图片)的视频播放器选中video ...
自定义Spring Data JPA存储库
Spring Data是一个非常方便的库. 但是,由于该项目是一个相当新的项目,因此功能不佳. 默认情况下,Spring Data JPA将基于SimpleJpaRepository提供DAO的实现. ...

HTML5自定义数据属性data-*

HTML5自定义数据属性data-*相关推荐

最新文章

热门文章