www.tjhcxt.com 葡京娱乐场
当前位置: 葡京娱乐场 > 网页设计 > HTML5+CSS3 > > >文章

HTML 5的Data属性以及jQuery对其支持

时间:2013-02-07 15:23点击: 次 【

HTML 5的Data属性以及jQuery对其支持

http://www.codeguru.com/csharp/csharp/jquery-support-for-html5-data-attributes.htm

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");
------分隔线----------------------------
-