使用 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. HttpClient exception:ExceptionType:System.Threading.Tasks.TaskCanceledException: The operation was canceled. ---> System.IO.IOException: Unable to read data from the transport connection: Operation ca

    error msg: System.Threading.Tasks.TaskCanceledException: The operation was canceled. ---> System. ...

  2. mongodb常用的sql语句总结

    本文为博主原创,转载请注明出处: 1 .  查询所有 db.getCollection('CollectionName').find() 2.根据条件查询 db.getCollection('Coll ...

  3. Struts2---动态action以及应用

    为了处理各种逻辑业务,根据execute方法来判断请求哪种业务,然后将请求转发到对应的业务处理上, 通过动态请求action对象中的方法,实现某个单一的业务逻辑处理. 动态action的应用 //创建 ...

  4. 支持向量机(Support Vector Machine):对偶

    前言 学SVM看到对偶问题的时候很难受,因为看不懂,数学知识真的太重要了.后来在B站看到某up主的精彩推导,故总结如下. SVM基本型 由之前最大化间隔的计算可得SVM的基本型为: $\underse ...

  5. docker run -v参数

    挂载目录(直接给例子吧) -v=[]:绑定挂载目录 宿主机绑定: -v<host>:<container>:[rw|ro] 在Docker中新建一个共享的卷: -v /< ...

  6. 如何在开发过程中获取客户端的ip呢?

    在开发工作中,我们常常需要获取客户端的IP.一般获取客户端的IP地址的方法是:request.getRemoteAddr();但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实 ...

  7. Oracle 动态sql

    静态SQL是前置编译绑定,动态SQL是后期执行时才编译绑定. 场景: 动态SQL适用于表名及查询字段名未知的情况.在已知查询字段名及表名的情况下,使用动态SQL(字符串拼接方式)会增加硬解析的开销,在 ...

  8. 使用http服务提供yum源

    1.安装httpd yum -y install httpd systemctl start httpd systemctl enable httpd 2.镜像资源目录拷贝至http的网站根目录 /v ...

  9. python 数据分类赋值

    问题描述:在数据预处理时,往往需要对描述性数据进行分类赋值或对数据进行分级赋值. 首先,会想到用for循环,依次判断赋值: for n in range(len(data1)): print(n) i ...

  10. ionic2使用cordova打包的环境搭建

    1.安装node.js(不用说了) 2.安装JDK(java的开发基础类库) 3.安装SDK(安卓开发集成包) 4.gradle( JAVA界的Weboack ,支撑app的编译,打包的流程) 5.安 ...