html中data-属性作用,html中的data-*的用法和作用 自定义属性
定义和用法
**data- *** 属性用于存储私有页面后应用的自定义数据。
**data- *** 属性可以在所有的 HTML 元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。
**data- *** 属性由以下两部分组成：
属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串
注意： 自定义属性前缀 "data-" 会被客户端忽略。
例如，定义不同的动物：
- Owl
- Salmon
- Tarantula
用法
data-* 的值的获取和设置
2种方法：
1、传统方法
getAttribute() 获取data-属性值；
setAttribute() 设置data-属性值
2、HTML5新方法
例如 data-href
dataset.href 获取data-href属性值
dataset.href = 'http://imooc.com' 设置data-href属性值
总结：传统方法无兼容性问题，但是不够优雅、方便
HTML5新方法很优雅、方便，但是有兼容性问题，可以在移动端开发或不支持低版本浏览器的项目中>使用
兼容性问题看这儿：http://caniuse.com/#search=dataset
个人理解：用法
之前不是很懂为什么会有这样的功能的出现，知道我发现了个案例：
我想要在渲染出来了个列表数据之后，在最后面的一个button标签绑定一些操作，比如我点击这个button，这一行数据就会删除。
然而，我是循环渲染出来来了10行数据，当我点击第6行的时候，我又怎么知道我点的是第几行？总不能给某个元素写上自己第几行？
那么这时候自定义的数据就有用了，你渲染的时候直接写在html标签里面，不如叫做data-line-num="i"，那么当我点击这个按钮，就判断这个按钮的这个属性等于多少，就知道我要删除i为几的数据了，然后后面把所有数据第i个删了，再重新渲染就好了。
个人案例：
为什么我要了解这个，因为我有那样的需求的时候不知道改怎么做，就去绑定了id为i，然而我自己也知道这是绝对不对的，id这样的全局参数，不好自定义，也容易污染，然后咨询了周围的大牛，才终于理解了这个自定义属性的作用。
html中data-属性作用,html中的data-*的用法和作用 自定义属性相关推荐
- HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
- 防止iOS中私有属性在block中的循环引用
想看答案可以直接瞅瞅底下代码. 对于一般的@property修饰的属性我们可以使用__weak转换一下self来修饰 __weak typeof(self) weakSelf = self;//然后把 ...
- html中display属性含义,css中display是什么意思？
display是CSS中的一个常用属性,可用于规定元素应该生成的框的类型,在网页开发中经常需要用到.下面本篇文章就来给大家介绍一下CSS display属性,希望对大家有所帮助. display属性规 ...
- val什么意思vb中的属性值_vb中的val函数什么意思
展开全部 Val函数,返回包含于字符串内的数字,字符串中是一个适当类型的数值. 1.语法 Val(string),必要的string 参数可以是任e69da5e887aa323131333532363 ...
- val什么意思vb中的属性值_vb中val是什么意思
vb中val是什么意思?随着时代的发展,越来越多的的新词汇出现在我们的生活中,下面就和康网小编一起来了解一下vb中val是什么意思吧. vb中val是什么意思 这是一个把字符串转为数值的函数,将S转为 ...
- val什么意思vb中的属性值_vb中val是什么意思 vb中val有什么意义
vb中val是什么意思?随着时代的发展,越来越多的的新词汇出现在我们的生活中,下面就和美文阅读网小编一起来了解一下vb中val是什么意思吧. vb中val是什么意思 这是一个把字符串转为数值的函数,将 ...
- OC中category（分类）中添加属性
OC中category(分类)中添加属性 因为OC中无法添加成员变量并且添加的属性不会被保存,所以需要重写get和set方法来实现属性的保存. //setter //self表示属性拥有者是当前类, ...
- eazyui ajax传值,jquery easyui ajax data属性传值方式
$.ajax({ url:url, type:'post', data:data, dataType:'json', contentType: "application/x-www-form ...
- Vue中key属性的作用
Vue中key属性的作用 在列表渲染时使用key属性 使用key属性强制替换元素 在列表渲染时使用key属性 相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用 ...
- java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
最新文章
- Go语言构建json和解析json实例
- c# 线程，同步，锁
- j2ee爬坑行之一：web容器
- Fluid 架构创新论文被国际数据库顶会 ICDE 录用
- android简单的自定义按钮,Android 自定义button简单示例
- 装饰工程预结算教程电子书_东北分公司举行工程预结算实战技能培训
- 通俗理解T检验与F检验的区别【转】
- 程序员必须懂得大智若愚，低调做人
- python软件打不开_ubuntu装python3.1.1之后出错，软件中心打不开，不能重装。尝试sudo apt-get -f install报error...
- layout文件夹中activity_main.xml与fragment_main.xml文件的处理记录
- oracle把所有表查询权限赋与另一用户
- MyBatis -- 对表进行增删改查(基于注解的实现)
- linux中oppenoffice的安装
- 状压（广场铺转，拉灯游戏）
- ubuntu修改开机密码
- Unity3d接入googleplay内购详细说明（四）
- 淘淘商城第75讲——添加商品同步到索引库以及消息机制测试
- Linux虚拟机添加新硬盘
- go语言学习笔记——框架与工具
- keras构建卷积神经网络