html5 元素 data 属性

HTML5规范里增加了一个自定义data属性

这个自定义data属性的用法非常的简单，

就是你可以往HTML标签上添加任意以 "data-"开头的属性，

这些属性在页面上是不显示的，

它不会影响到你的页面布局和风格，

但它却是可读可写的。

如

<a class="btn-service-deploy" 
                        href="javascript:;" 
                    data-id="{{item.id}}"
                    data-display_name="{{item.display_name}}" 
                    data-version="{{item.version}}" 
                    data-screenshot="apps/appfile/download/{{(item.screen_shot)[0].id}}" 
                    data-description="{{item.description}}">部署</a>

怎么来读取这些数据呢？

可以通过读取属性的方式获取，

var display_name  = $('.btn-service-deploy').attr('data-display_name');

但jquery已经内置了方法来操作这些属性。

使用jQuery的.data()方法来访问这些"data-*" 属性。

如

var display_name = $('.btn-service-deploy').data("display_name");

你还可以在"data-*" 属性里使用json语法，

例如，如果你写出下面的html：

<div id="awesome-json" data-awesome='{"game":"on"}'></div>

获取：

var gameStatus= $("#awesome-json").data('awesome').game;

你也可以通过.data(key,value)方法直接给"data-*" 属性赋值.

$item.data('status', status);

补充：

尽管"data-*" 是HTML5才出现的属性，

但jquery是通用的，

所以，

在非HTML5的页面或浏览器里，

你仍然可以使用.data(obj)方法来操作"data-*" 数据。