jQuery中使用data()方法读取HTML5自定义属性data-*实例


Posted in Javascript onApril 11, 2014

主要的方法如下:

.data( key, value )
.data( obj )
.data( key )
.data()

从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。
例如HTML:
<div data-role = "page" data-last-value = "43" data-hidden = "true" data-options = '{"name":"John"}' > </div>

下面的 jQuery代码都是返回 true 的:
$ ( "div" ) . data ( "role" ) === "page" ;
$ ( "div" ) . data ( "lastValue" ) === 43 ;
$ ( "div" ) . data ( "hidden" ) === true ;
$ ( "div" ) . data ( "options" ) . name === "John" ;

和html5的api不同的是,jQuery会尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),数组(arrays)和空(null))。如果这样做不会改变数值的表示,那么该值将转换为一个数字(number)。例如,“1E02”和“100.000”是等同于数字(数字值100),但将转换它们会改变他们的表示,所以他们被保留为字符串。字符串值“100”被转换为数字100。

如果数据(data)属性是一个对象(以“{”开始)或数组(以'[‘开始),可以用jQuery.parseJSON 将其解析成字符串;它必须遵循 有效的JSON的语法 ,包括带双引号的属性名称。如果该值不能解析为一个JavaScript值,它将被保留为字符串。

如果想将取出的属性值直接当作字符串的话,请使用 attr() 方法。
data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。
调用 .data() 时如果不带参数,将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中,因为一旦这个新对象被提取出来,之后对元素进行的 .data(obj) 操作,将不会再影响这个对象。另外,直接操作这个对象会比每次调用 .data() 来设置或获取值要快一些。

Javascript 相关文章推荐
查看大图功能代码jquery版
Nov 05 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 #Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 #Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 #Javascript
js获取视频时长代码
Apr 10 #Javascript
js转化毫秒为时间格式代码
Apr 10 #Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 #Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 #Javascript
You might like
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
angular分页指令操作
2017/01/09 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Python3远程监控程序的实现方法
2019/07/15 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
南京某公司笔试题
2013/01/27 面试题
公司年终奖分配方案
2014/06/16 职场文书
生活部的活动方案
2014/08/19 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
测量员岗位职责
2015/02/14 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Python中tqdm的使用和例子
2022/09/23 Python