人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。
你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以"data-"
开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
下面的一个代码片段是一个有效的HTML5标记:
<div id="awesome"
data-myid="3e4ae6c4e">Some awesome data</div>
可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*"
属性。其中一个方法就是 .data(obj)
,这个方法是在jQuery1.4.3版本后出现的,它能返回相应的data属性。
举个例子,你可以用下面的写法读取data-myid
属性值:
var myid= jQuery("#awesome").data('myid');
console.log(myid);
你还可以在"data-*"
属性里使用json语法,例如,如果你写出下面的html:
<div id="awesome-json" data-awesome='{"game":"on"}'></div>
你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value:
var gameStatus= jQuery("#awesome-json").data('awesome').game;
console.log(gameStatus);
你也可以通过.data(key,value)
方法直接给"data-*"
属性赋值。一个重要的你要注意的事情是,这些"data-*"
属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。
译者补充:尽管"data-*"
是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)
方法来操作"data-*"
数据。
分享到:
相关推荐
在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情,下面为大家介绍下HTML5的自定义data-* 属性和jquery的data()方法的使用,感兴趣的朋友不要错过
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题,而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-...
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据,这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情
可能大家在使用jquery mobile时,经常会看到data-role、data-theme等的使用,比如:通过如下代码即可实现页眉的效果: 复制代码代码如下:<div data-role=”header”> 我是标题</h1></div> 通过手机浏览,效果如下: ...
如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险
评分 jQuery评级插件。 快速开始 提供几个快速入门选项: 。 ... 使用 npm install jquery.rateit ...快速,渐进增强,触摸支持,可自定义(只需交换图像或更改某些CSS),不引人注目JavaScript(使用HTML5 data- *属性
阅读HTML5的详细规范后你会发现,这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 “data-“开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。...
本文实例讲述了jQuery判断自定义属性data-val用法。分享给大家供大家参考,具体如下: jquery判断自定义属性data-val 1.css .active { color: red; } 2.html <li data-val=1>1 <li data-val=2>2 <li data-...
本文给大家分享的是使用jQuery制作的组件,实现获取data-自定义属性,并附上使用方法,非常的实用,有需要的小伙伴可以参考下
使用一些自定义data-*属性,您可以定制通过浏览器或基于JavaScript的表单或整个字段的验证提供给用户的错误消息: data-validation-error-empty属性在表单上使用时,它为所有为空的无效字段规定了全局默认消息。 当...
Jquery的属性和内容操作; jQuery中的属性操作方法;prop()方法:prop()方法用来设置或获取元素固有属性值。 prop()方法获取属性值语法: $(selector).prop("属性名")。 prop()方法设置属性值语法: $(selector).prop...
大家可能会经常看到一些HTML里都带有data属性,这些都是HTML5的自定义属性,可以做很多事情,直接调用JS十分方便,虽然是HTML5的属性,但好在jQuery通用的,所以基本在所有浏览器里都是可以正常使用的,包括低版本的...
jQuery-data主要是用来存储数据,帮助普通对象或者jQuery对象来存储数据,其实如果单纯的储存dom的单一的属性,用attr自定义属性足够了;如果存储多个键值对建议用jQuery-data; 例如: 图片的懒加载好多插件就用到了...
该插件允许使用 HTML 标签属性定义 Google Analitics 事件数据。可能的 HTML 元素属性名称解释例子data-ga-click-event-category 必需的视频数据-ga-点击-事件-动作可选的玩数据点击事件标签可选的Rick astley - ...
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。