data-*数据的获取和设置

在jquery中，使用data()方法可以方便的获取和设置data-*属性。

.data(key, value) :设置一个已存在的data-key属性或添加一个新的data-key属性
.data( key ) ：获取指定的data-key属性的值
.data( obj ) ：使用带有名称/值对的对象向被选元素添加数据，可以一次添加多个data-*属性。
.data() ：不带参数将以 JavaScript 对象的形式获取所有数据
.removeData(key) ： 移除指定的data-key属性
.removeData() ：如果没有定义key，将从被选元素中删除所有已存储的数据。

<div data-my='{"name":"xia"}' data-age="28">test</div>
$('$test').data('my').name; //xia

如果数据(data)属性是一个对象(以“{”开始)或数组(以'['开始)，可以用jQuery.parseJSON 将其解析成字符串;它必须遵循有效的JSON的语法 ，包括带双引号的属性名称。如果该值不能解析为一个JavaScript值，它将被保留为字符串。

如果想将取出的属性值直接当作字符串的话，请使用 attr() 方法。

data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。

调用 .data() 时如果不带参数，将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中，因为一旦这个新对象被提取出来，之后对元素进行的 .data(obj) 操作，将不会再影响这个对象。另外，直接操作这个对象会比每次调用 .data() 来设置或获取值要快一些。

$('$test').data().my.name; //xia

在原生的javascript中也可以获取和操作data-*属性：

1、可以使用标准的DOM方法，即getAttribute()方法来获取指定的data-key属性的值和setAttribute()设置data-key属性
2、使用dataset属性来获取和设置data-key属性
    document.getElementById('test').dataset.age; //28
    document.getElementById('test').dataset.age=27; //设置一个data-*属性值

如果属性名称中还包含连字符(-)，需要转成驼峰命名方式并去掉连字符，如果有一个属性为data-this-is-my="xia"，那么获取该值时用document.getElementById('test').dataset.thisIsMy;