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 相关文章推荐
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
微信小程序如何获取地址
Dec 24 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
通过html表格发电子邮件
2006/10/09 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
apache php模块整合操作指南
2012/11/16 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
python线程的几种创建方式详解
2019/08/29 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
《恐龙》教学反思
2014/04/27 职场文书
单位绩效考核方案
2014/05/11 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技