善用HTML5″data”自定义属性

制作一些和后台交互非常多的网站的时候,经常需要后台语言输出一些数据到html里,最方便的莫过于在html标签里放进某个属性,来保存这个标签所需要的部分信息,以便调用。比如

<li indexNum="01" lang="cn">围城</li>
<li indexNum="02" lang="en">冰与火之歌</li>

例子中,这两本书为了保存书的序号和语言,使用了两个非法的Attribute:“indexNum”和“lang”。
如果在validator.w3.org中进行合法性检测会显示“Attribute indexNum not allowed on element li at this point.”

推荐用HTML5的新属性data,以上的语句就可以变为

<li data-indexNum="01" data-lang="cn">围城</li>
<li data-indexNum="02" data-lang="en">冰与火之歌</li>

想访问的话,可以用传统的访问属性的方法,也可以用Jquery的.data()方法:

$("li:first").data("indexNum")=="01" //true
$("li:first").data()  //这里将获得一个JSON格式的对象,可以进行对象内的属性修改

具体还是参考官方文档吧:http://api.jquery.com/data/

发表评论

邮箱地址不会被公开。