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就行了(如果这种做法比前面个要麻烦点 毕竟还要对他 ...
随机推荐
- JavaScript核心编程(代码片段)
var a = function () { function someSetup() { var setup = 'done'; } function actualWork() { alert('Wo ...
- python爬虫代码
原创python爬虫代码 主要用到urllib2.BeautifulSoup模块 #encoding=utf-8 import re import requests import urllib2 im ...
- JNI开发示例
安装:eclipse(http://www.eclipse.org/).CDT(C/C++ Development Tooling).ADT(Android Development Tools) ht ...
- sqlserver内存释放心得
SQL Server 2008 或者R2的默认内存分配是2147483647MB, 差不多算是无穷大,对于系统内存的管理策略是有多少占多少.SQLserver会把所有处理过的SQL操作缓存在内存里,这 ...
- 转:电子取证中AVI文件的文件雕复
电子取证中AVI文件的文件雕复 收藏本文 分享 1引言在电子取证工作中,恢复数字设备中被删除的数据是极为重要的工作之一,恢复数据又分依赖系统元信息的传统数据恢复技术和不依赖系统元信息的文件雕刻.文件雕 ...
- AYUI4.X即将发布
AYUI里程碑故事: AYUI 1.x系列: 面向源码的方式开发,客户只有源码才能开发,客户端对接ayui,很不方便,相比上个版本,提供了一些元老控件,文件夹结构比较零散 AYUI 2.x系列: ...
- Linux--Ubuntu12.04下安装JDK
前言 在Ubuntu中安装JDK的方法非常的多,网上现在介绍的很多方法,都不是很清楚,对于初学者,很多都不太明白如何安装.本篇博客就Ubuntu下安装JDK进行详细的讲解,这里使用的Ubuntu版本为 ...
- Codeforces Round #382 (Div. 2)C. Tennis Championship 动态规划
C. Tennis Championship 题目链接 http://codeforces.com/contest/735/problem/C 题面 Famous Brazil city Rio de ...
- ubuntu 休眠之后网络间接失败 can not connect to network after suspend (wake up)
ubuntu for laptop系统在系统休眠后wakeup 之后,网络连接失败, 有线网络无法连接, 无线wifi无法连接, 只能重启后才能恢复, 此时可以采用以下方法处理: 1. 在/etc/p ...
- System.Diagnostics.Debug和System.Diagnostics.Trace 【转】
在 .net 类库中有一个 system.diagnostics 命名空间,该命名空间提供了一些与系统进程.事件日志.和性能计数器进行交互的类库.当中包括了两个对开发人员而言十分有用的类——debug ...