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 相关文章推荐
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
JS实现一个简单的日历
Feb 22 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
PHP中用hash实现的数组
2011/07/17 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
详解Python的Django框架中的中间件
2015/07/24 Python
简述Python2与Python3的不同点
2018/01/21 Python
python制作图片缩略图
2019/04/30 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
django 中QuerySet特性功能详解
2019/07/25 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
高中美术教学反思
2014/01/19 职场文书
通信工程专业求职信
2014/06/04 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
病房管理制度范本
2015/08/06 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS