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-*" 数据。