【HTML&JavaScript】data-* 属性与data( )方法
2015-11-25 16:03
741 查看
定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:
1.属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符 2.属性值可以是任意字符串
注释:用户代理会完全忽略前缀为 “data-” 的自定义属性。
HTML 4.01 与 HTML5 之间的差异
data-* 属性是 HTML5 中的新属性。语法
<element data-*="somevalue">
值 | 描述 |
---|---|
somevalue | 规定属性的值(以字符串)。 |
自定义data-*属性与jquery的data()方法的使用:
使用jQuery的.data()方法来访问这些”data-*” 属性。其中一个方法就是 .data(obj),这个方法是在jQuery1.4.3版本后出现的,它能返回相应的data属性。 举个例子,你可以用下面的写法读取 data-myid属性值:<div id="awesome" data-myid="3e4ae6c4e">Some awesome data</div> //js部分 var myid= jQuery("#awesome").data('myid');
你还可以在”data-*” 属性里使用json语法,例如:
<div id="awesome-json" data-awesome='{"game":"on"}'></div> //你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value var gameStatus= jQuery("#awesome-json").data('awesome').game;
也可以通过.data(key,value)方法直接给”data-*” 属性赋值。
要注意的是,这些”data-*” 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。 尽管”data-*” 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作”data-*” 数据。
相关文章推荐
- JavaScript中eval()函数的使用
- sea.js 学习
- javascript Slip.js实现整屏滑动的手机网页
- 车型数据api 根据车系查询车型数据
- Java与Javascript交互(使用Protobuf协议)
- jsp学习
- javascript巧用eval函数组装表单输入项为json对象的方法
- Js 冒泡事件阻止
- angular js
- javascript之dom编程(3):常用对象2
- javascript之dom编程(2):常用对象1
- Javascript设计模式理论与实战:状态模式
- JS实现键盘监听(包括组合键)
- javascript之dom编程(1):简单用法
- ichartjs
- common.js js中常用方法
- 一款比较好用的JS时间控件-laydate
- 用Javascript评估用户输入密码的强度
- JS模拟select下拉菜单
- js获取图片宽高的方法