HTML5中的data-*属性和jQuery中的.data()方法使用

原文地址链接：http://blog.csdn.net/fly_zxy/article/details/50687691；

HTML5中的data-*属性

我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据，我们自定义的属性名字也千奇百怪，五花八门。我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是前端技术在向着规范化前进。HTML5标准规定，自定义的属性都已data—*开头，这样就区分开了固有属性和自定义属性。HTML代码如下：

<div id="testDiv" data-cname="张三" data-e-name="zhangsan" data-myName="my name is zs.">测试在元素上存储一个key-value</div>

$(document).ready(function(){
var el = document.getElementById("testDiv");
console.log(el.dataset.cname);//=>张三
el.dataset.cname = "ZS";//设置值为"ZS"
console.log(el.dataset.cname);//=>"ZS"
console.log("jQuery data:", $("#testDiv").data("eName") );
$("#testDiv").data("eName", "abcefg");
console.log("jQuery data:", $("#testDiv").data("eName") );
console.log("遍历testDiv上的自有属性");
$.each(el.dataset, function(key, value){
console.log(key+":"+value);
});
//遍历testDiv上的自有属性
//cname:ZS
//eName:zhangsan
//myname:my name is zs.
<span style="white-space:pre"> </span>
});

在获取自定义属性的值时，使用dataset属性，然后通过自定义属性(这时去掉data-前缀)的名称去获取值。dataset是JS5规范中新增加的属性，用于和data-*配合使用。
通过each打印的结果，我们需要注意：

1，如果data-后面包含了“-”，例如 date-e-name，"-"会去掉，并转换成为骆驼峰式的命名 eName。这是因为JSON Object 的key不能包含”-“。

2，如果data-后面的单词有大写，例如 myName，将会转存成小写 myname。这里就不理解为什么会转换成小写了，JSON Object的key是区分大小写的。求高人指定？？

3，如果你想删除一个data-*属性，请使用 delete dataset.cname或者dataset.cname=null;

data-*属性看起来很好，但是不幸的是只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+的浏览器中实现了此标准。如果你的脚步需要兼容各主流浏览器的不同版本建议还是使用原生的getAttribute()或jQuery中的.attr()。

jQuery中的.data()

jQuery中的.data()方法作用：在jQuery对象对应的DOM元素上获取或存放key-value对。我们可以通过html5的data-*属性在元素上存取数据，在jQuery也可以通过data()来实现。data()方法有多个重载，传递一个参数是获取value值，传递两个参数是存储或覆盖已存在的值，传递一个JSON Object是在元素上存储或覆盖已存在的多个key-value对。如果通过data() 在元素上存储key-value，value可以是一个对象，而不是像data-*只能存储一个字符串的value。下面给出一个综合示例：

<script id="jquery_183" type="text/javascript" class="library" src="//cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="testDiv" data-cname="张三" data-e-name="zhangsan" data-myName="my name is zs.">
测试在元素上存储一个key-value
</div>
</body>
</html>

$(function(){
function printVlaue(){
//通过data()在testDiv元素上存储 {ename:zhangsan} 健/值对。
$("#testDiv").data("ename", "zhangsan");
//修改data()通过 data-* 属性存储的值
$("#testDiv").data("cname", "我是张三");
console.log( "获取通过data()存储在testDiv元素上的ename值:", $("#testDiv").data("ename") );
console.log( "获取通过 data-* 存储在testDiv元素上的cname值:", $("#testDiv").data("cname") );
//$("#testDiv").jQueryremoveAttr("data-"+"abc");
console.log( "获取ename值:", $("#testDiv").data("ename") );
console.log( "获取cname值:", $("#testDiv").data("cname") )
console.log("删除testDiv元素上 ename 和 cname 键/值对。");
$("#testDiv").removeData("ename");
$("#testDiv").removeData("cname");
console.log("输出 eanem 和 canme 对应的值，看是否已经删除");
console.log( $("#testDiv").data("ename") );
console.log( $("#testDiv").data("cname") );
};
$("<button>获取值</button>").appendTo("body").bind("click", printVlaue);;
console.log("debug use.");;
});
/*
获取通过data()存储在testDiv元素上的ename值: zhangsan
获取通过 data-* 存储在testDiv元素上的cname值: 我是张三
获取ename值: zhangsan
获取cname值: 我是张三
删除testDiv元素上 ename 和 cname 键/值对。
输出 eanem 和 canme 对应的值，看是否已经删除
undefined
张三
*/

从上例中我们可以看出，.data()可以获取通过data-*属性存储的值。但是通过.data()修改data-*属性的值不会显示在HTML标记中，我们只是通过.data()在元素存储了一个新值。.removeData()也不能删除通过data-*存储的数据。由于jQuery是一个通用的JS框架,最浏览器兼容性做的非常好，大多数情况，我们应该通过.data()在元素上存取数据(有一个好处是可以存储一个对象)。如果我们必须通过data-*来存取和修改数据,建议使用JS5的dataset属性，这个属性的兼容问题，我们可以通过写jQuery插件来解决。这是我的插件代码，如下：

<script id="jquery_183" type="text/javascript" class="library"
src="//cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="testDiv" data-cname="张三" data-e-nAme="zhangsan" data-myName="my name is zs.">
测试在元素上存储一个key-value
</div>
</body>
</html>

$(document).ready(function(){
function printValue(){
var $testDiv = $("#testDiv").udDataAttr();
console.log("udDataAttr get()=>", $testDiv.get("cname") );
$testDiv.set("cname", "set 张三");
console.log("udDataAttr get()=>", $testDiv.get("cname") );
console.log("打印所有已data-*开头的属性和值=>", $testDiv.dataset());
console.log("udDataAttr get e-name=>", $testDiv.get("e-name") );
//var el = document.getElementById("testDiv");
//console.log("el.dataset.eName=>", el.dataset.eName);
};
$("<button>获取值</button>").appendTo("body").bind("click", printValue);
console.log("debug use.");
});
(function($, window){
//user-defined Attribute
var plugName = "udDataAttr";
$.fn[plugName] = function(){
var $self = $(this),
obj = ($self.length && $self[0].dataset) || null;
return {
get: function(name){
return obj===null? $self.attr("data-"+name) : obj[ this._format(name) ];
}
,set: function(name, value){
if(obj === null){
$self.attr("data-"+name, value);
}else{
obj[ this._format(name) ] = value;
}
return $self;
}
,dataset: function(){
var newObj = {};
if(obj === null){
$.each(obj, function(key, value){
newObj[key] = value;
});
}else{
newObj = $self.data(); //获取所有以data-*开头的属性
}
return newObj;
}
/*
* 将name转换成dataset可识别的格式。
* 例如：e-name 转换成 eName
* 总感觉 _format()的实现不是最优的,求高手给出实现
*/
,_format: function(name){
console.log("_format old name=>",name);
name = name.toLowerCase();
if(name.indexOf('-')>-1){
var array = name.split('-');
for(var i=1,len=array.length; i<len; i++){
var v = array[i];
array[i] = v.substr(0,1).toUpperCase() + v.substr(1,v.length);
name=array.join("");
}
}
console.log("_format() new name=>",name);
return name;
}
};
};
}(jQuery, window));

HTML5中的data-*属性和jQuery中的.data()方法使用的更多相关文章

借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
Mybatis中实体类属性与数据库列表间映射方法介绍
这篇文章主要介绍了Mybatis中实体类属性与数据列表间映射方法介绍,一共四种方法方法,供大家参考. Mybatis不像Hibernate中那么自动化,通过@Co ...
HTML5 中的新属性autocomplete="off"失效的解决方法（兼容firefox，IE，360）
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...
html5的自定义data-＊属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...
js中的原生Ajax和JQuery中的Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,Str ...
Android 中自定义控件和属性(attr.xml,declare-styleable,TypedArray)的方法和使用
一. 在res/values 文件下定义一个attrs.xml 文件.代码如下: <?xml version="1.0" encoding="utf-8" ...
【坑】Spring中抽象父类属性注入，子类调用父类方法使用父类注入属性
运行环境 idea 2017.1.1 spring 3.2.9.RELEASE 需求背景需要实现一个功能,该功能有2个场景A.B,大同小异抽象一个抽象基类Base,实现了基本相同的方法BaseMe ...
body中的onload()函数和jQuery中的document.ready()有什么区别？
1.我们可以在页面中使用多个document.ready(),但只能使用一次onload(). 2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要 ...
js中的写出想jquery中的函数一样调用
1.IIFE: Immediately-Invoked function Expression 函数模块自调用 2.代码实现 <!DOCTYPE html> <html lang=& ...
HTML 5：你必须知道的data属性
原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性译者:dwqs HTML 5的Data属性可 ...

随机推荐

Tomcat的优化
Tomcat的优化配置修改tomcat的config目录下server.xml文件 <Connector port="9021" protocol="HTTP/ ...
POJ 1850 Code
组合数学.... Code Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 7202 Accepted: 3361 Descrip ...
matlab练习程序（碎片）
这个算法是对photoshop中滤镜->像素化->碎片这个功能的学习. PS这个功能好像不带参数,不过我这里有滤波半径r可以进行控制. 因为我是看效果猜算法的,效果肯定有所区别. 我的想法 ...
关于c++风格 code style
Header files should be self-contained. All header files should have #define guards to prevent multip ...
hdu 2955 01背包
http://acm.hdu.edu.cn/showproblem.php?pid=2955 如果认为:1-P是背包的容量,n是物品的个数,sum是所有物品的总价值,条件就是装入背包的物品的体积和不能 ...
windows进程间通讯的方法
版权声明请尊重原创作品.转载请保持文章完整性,并以超链接形式注明原始作者“tingsking18”和主站点地址,方便其他朋友提问和指正. 1.使用共享内存代码如下: void FileMapp ...
《Programming Hive》读书笔记（一）Hadoop和hive环境搭建
<Programming Hive>读书笔记(一)Hadoop和Hive环境搭建先把主要的技术和工具学好,才干更高效地思考和工作. Chapter 1.Int ...
hiho 1015 KMP
input 1<=T<=20 string1 1<=strlen(string1)<=1e4 string2 2<=strlen(string2)<=1e6 out ...
Qt5.6.0+OpenGL 纹理贴图首战告捷
重要的话写在前面~~通过今晚的实验,知道了EBO是不能随便release的~~~一直不要release就可以了,否则vao会失效 Display.h #ifndef DISPLAYWIDGET_H # ...
八年架构师大咖首次揭秘，年薪50W秘籍！
序言我是土生土长的老北京人,你们肯定觉得我很有钱,为啥呢? 因为觉得我是北京户口,其实你们错了,我的房子是靠我自己买的,父母基本上没帮到我什么,当然,我也不需要吧! 我只想说,作为一名程序员,我很自 ...