使用 data-* 属性来嵌入自定义数据:

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

浏览器支持

所有主流浏览器都支持 data-* 属性。


定义和用法

data-* 属性用于存储私有页面后应用的自定义数据。

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。

data-* 属性由以下两部分组成:

  1. 属性名不要包含大写字母,在 data- 后必须至少有一个字符。
  2. 该属性可以是任何字符串

注意: 自定义属性前缀 "data-" 会被客户端忽略。

HTML中data-* 属性的更多相关文章

  1. bootstrapValidator验证的remote中data属性里获取select一直是默认值

    budgetEditionNo:{ message:'版本号输入不正确' , validators:{ notEmpty:{ message:'版本号不能为空,请填写' } , remote:{ ur ...

  2. Ajax请求($.ajax()为例)中data属性传参数的形式

    首先定义一个form表单: <form id="login" > <input name="user" type="text&quo ...

  3. jquery ajax中data属性详解

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...

  4. jquery easyui ajax data属性传值方式

    $.ajax({   url:url,   type:'post',   data:data,   dataType:'json',   contentType: "application/ ...

  5. spring data mongodb中,如果对象中的属性不想加入到数据库字段中

    spring data mongodb中,如果对象中的属性不想加入到数据库字段中,可加@Transient注解,声明为透明属性 spring data mongodb 官网帮助文档 http://ww ...

  6. [Oracle维护工程师手记]Data Guard Broker中改属性是否需要两侧分别执行?

    Data Guard Broker中改属性是否需要两侧分别执行? Data Guard Broker有一些属性,可以通过 show configuration 看到.我有时会想,这些个属性,是否是分别 ...

  7. jquery中data()和js中dataset属性的区别

    INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...

  8. 揭秘DOM中data和nodeValue属性同步改变那些事

    问题引发:最近在整理DOM系列的一些知识点,发现在DOM的某些接口API中,存在一些我想不通的现象.就随便举个例子吧:DOM文档模型中的文本节点,可以通过nodeValue或data属性访问文本节点的 ...

  9. Vue2自定义指令改变DOM值后未刷新data中绑定属性的值

    标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...

  10. ajax取到数据后如何拿到data.data中的属性值

    今天遇到的ajax取到数据后如何拿到data.data中的属性值的问题 比如拿到了数据 我要取出data中的name 题外话:当然取名最好别取什么奇怪的xiaobi

随机推荐

  1. 编码原则 之 Stable Dependencies

    The Stable Dependencies Principle states that “The dependencies between software packages should be ...

  2. php rsa

    <?php $res=openssl_pkey_new(); // Get private key $ok = openssl_pkey_export($res, $privkey); // G ...

  3. ASP.NET MVC WebAPI Put和Delete请求出现405(Method not allowed)错误

    解决办法: 在站点根目录下的web.config设置如下(主要参考添加项): <system.webServer> <modules> <remove name=&quo ...

  4. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  5. mysql 基本sql使用总结-电商项目

    一.增加 1. 设置插入数据后自动返回主键 主键返回策略只适用于单个对象的插入: 主键返回策略: (1) 单独参数 直接用set方法 (2)  map 对象名.id (3) 多参数列表 对象名.id( ...

  6. vue项目知识点总结

    一.vue中如何获取select被选中的id和对应的值. <!-- 下拉框 --> <div v-show="moreStore" class="sel ...

  7. DB9针和DB25针串口的引脚定义

    <设备监控技术详解>第3章串口设备监控,本章着力介绍串口交换机和串口联网方式.本节为大家介绍标准25针串口的引脚定义. 作者:李瑞民来源:机械工业出版社 3.3 串口线的制作和转换 串口的 ...

  8. springboot缓存注解——@CacheEvict

    @CacheEvict:缓存清除 可以通过key指定清除的数据 如果不写默认参数的值 allEntries = true (是否删除该缓存名中所有数据,默认为false) beforeInvocati ...

  9. Centos7 防火墙frewalld规则设置

    配置firewalld-cmd 查看版本: firewall-cmd --version 查看帮助: firewall-cmd --help 显示状态: firewall-cmd --state 查看 ...

  10. ZJOI2019Day2AFO记

    题目读下来感觉,,,怎么看上去模型都这么简单全是套路题的样子.先想了下T3应该会50,是个计算几何,50够了..于是先写了40(10分等下再来写)这样就花掉了一个小时.....过去看T1,直接高斯消元 ...