html5 自定义数据属性 ,也就是 data-* 自定义属性---笔记。
html5 自定义数据属性 ,也就是 data-* 自定义属性。
例如
<div data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
可以有三种方法访问和修改data:
1.使用getAttribute setAttribute 方法 例如 div.getAttribute("data-last-value")
2.使用dataset属性
返回一个集合
div.dataset --> DOMStringMap { options:"{\"name\":\"John\"}", hidden:"true", lastValue:"43"}
可以访问,添加,删除
div.dataset.hidden div.dataset.newAttr = "123" delete div.dataset.hidden
3.使用jquery的data方法
.data( key, value )
.data( key, value )
.data( obj ) --> 设置多个键值对
.data( key )
.data( key )
.data() -->返回一个集合
jQuery比较特殊的是,它会将返回值字符串自动转换为对应的数据类型。
比如上面的 $("div").data() --> {options : {"name":"John"}, hidden: true, lastValue: 43 }
注意:对于dataset属性和jQuery的data方法: data- 属性名如果包含了连字符,例如:data-last-value ,连字符将被去掉,并转换为驼峰式的命名,前面的属性名转换后应该是:lastValue 。
html5 自定义数据属性 ,也就是 data-* 自定义属性---笔记。的更多相关文章
- 如何使用HTML5自定义数据属性
在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信 ...
- Html5 自定义数据属性
html5 可以为元素添加自定义属性,但是要添加前缀data-.(下面这个例子中的自定义属性的命名,其实是不规范的,不应该包含大写字符,例如:data-myName 应改命名为:data-myname ...
- 【翻译】详解HTML5 自定义 Data 属性
原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...
- HTML5中的数据集dataset和自定义属性data-*
在html5中可为所有元素添加一种自定义的属性,这种属性的前缀以data-开头,比如:data-name,目的是为元素提供与页面渲染无关,但与dom元素强相关的属性.添加完自定义属性后我们可以通过元素 ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- html5 file upload and form data by ajax
html5 file upload and form data by ajax 最近接了一个小活,在短时间内实现一个活动报名页面,其中遇到了文件上传. 我预期的效果是一次ajax post请求,然后在 ...
- Django关于设置自定义404和安装debug-toolbar的笔记
Django关于设置自定义404和安装debug-toolbar的笔记 关于设置404 先做好404页面,然后在views.py文件中做好映射,最后是在urls.py做好路由,而这个urls.py必须 ...
- HTML5自定义select标签样式的方法
HTML5自定义select标签样式的方法 -webkit-appearance: none; 这个东西可以隐藏箭头 不过手机端就直接 设置透明度为0就行了(如果这种做法比前面个要麻烦点 毕竟还要对他 ...
随机推荐
- linux开发神器--Tmux
在Linux上工作的朋友,可能会常常遇到这种情况: 痛点1: 在公司用putty连着Linux开发机,程序正跑着,不知不觉到了下班的时候,要和老婆/女朋友约会了,但是程序还没跑完,并且进度有点紧,还得 ...
- Linux/Unix 怎样找出并删除某一时间点的文件(转)
在Linux/Unix系统中,我们的应用每天会产生日志文件,每天也会备份应用程序和数据库,日志文件和备份文件长时间积累会占用大量的存储空间,而有些日志和备份文件是不需要长时间保留的,一般保留7天内的文 ...
- PoolMon 使用
PoolMon 显示 PoolMon 在命令窗口中显示有关池内存分配的数据列.使用箭头键.PAGE UP 和 PAGE DOWN 键在数据间滚动. 注意 若要查看全部 PoolMon 显示,则 ...
- iOS:Tools:快速注释Doxygen
Xcode5有个新特性就是自己定义的函数也会被检测集成到代码提示里面,也就是在Quick Help有提示.如 /** * @brief 设置id * * @param id 要设置的id */ +(v ...
- CCNA实验2.VLAN
一. 二.配置主VTP上的信息 sw2上配置为domain server,sw1上配置为domain client,sw2上增加vlan并命名和添加描述 conf t vtp domain corp ...
- burp suite 使用教程详解(外文翻译转)
Burp Suite是Web应用程序测试的最佳工具之一,其多种功能可以帮我们执行各种任务.请求的拦截和修改,扫描web应用程序漏洞,以暴力破解登陆表单,执行会话令牌等多种的随机性检查.本文将做一个Bu ...
- RDD分区2GB限制
本文目的 最近使用spark处理较大的数据时,遇到了分区2G限制的问题(ken).找到了解决方法,并且在网上收集了一些资料,记录在这里,作为备忘. 问题现象 遇到这个问题时,spark日志 ...
- Javascript 严格模式
简介 严格模式是一种将更好的错误检查引入代码中的方法. 在使用严格模式时,你无法使用隐式声明的变量.将值赋给只读属性或将属性添加到不可扩展的对象等. 声明严格模式 可以通过在文件.程序或函数的开头添加 ...
- npm install -g 全局安装总是出现permission权限问题的解决方案
npm install -g 全局安装总是出现permission权限问题的解决方案 开始使用node的时候,在使用npm安装global packages时,习惯性地使用npm install -g ...
- mysql性能瓶颈分析、性能指标、指标搜集方法与性能分析调优工具
本文主要讲解mysql的性能瓶颈分析.性能指标.性能指标信息的搜集工具与方法.分析调优工具的使用. 文章尚未完成. 性能瓶颈: 慢.写速度比读速度慢很多 主要的性能指标: 访问频度, 并发连接量, ...