- html 5中可以通过“data-”前缀给DOM结点绑定数据,然后可以通过客户端脚本访问这些数据。尤其注意的是这种用法完全向前兼容,并且支持所有浏览器。
- 比如下面的例子:
- <div data-name="jxq" data-email="jxqlovejava@gmail.com">jxqlovejava</div>
- jQuery中的data()函数:
- jQuery与时俱进,通过data()函数完美的支持了HTML 5的这个新特性。
- 给DOM结点设置data属性的方法:
- 1、$("#employee").data("name", "jxq");
- $("#employee").data("dept", "dev");
- 2、$("#employee").data("name", "dept").data("jxq", "dev");
- 3、$("#employee").data({ "name": "jxq", "dept": "dev" });
- 访问DOM结点的data属性:
- console.log($("#employee").data("name"));
- 如果data属性值是一个JSON字符串,比如下面:
- <div data-employee='{"name":"jxq", "dept":"dev"}' id="employee">jxq</div>
- 那么还可以像下面这样访问:
- console.log($("#employee").data("employee").name);
- 删除DOM结点的data属性:
- $("#employee").removeData("name");
- //该片段来自于http://www.codesnippet.cn/detail/081020136281.html
来源: http://www.codesnippet.cn/detail/081020136281.html