HTML5新增属性data-*和js/jquery之间的交互及注意事项


Posted in HTML / CSS onAugust 08, 2017

HTML5新增属性data-*

书写实例

<div data-role="page"
     data-last-value="43"
     data-hidden="true"
     data-options='{"name":"John"}'>
</div>

1. 定义:

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

2. 注意点:

data-* 属性包括两部分:

  • 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

data-*属性和jQuery交互

使用jQuery中的.data()函数取用data-*属性值

console.log($("div").data('lastValue'));  //输出的值为:43
console.log($("div").data('role'));  //输出的值为:page

注意事项

data-**属性名格式驼峰命名改写

data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)

演示:
 

console.log($("div").data('lastValue'));  //输出的值为:43
    $('div').data('lastValue',44);  //设置data-last-value=44
    $('div')[2]  //假设这是文档中的第3个div,我们输出这个dom
    //输出:<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>

别怕,你再输出

console.log($("div").data('lastValue'));  //输出的值为:44

  值只是存储在jQuery内部了

使用jQuery中.attr()函数取用data-*属性值

console.log($('div').attr('data-role')); //输出的值为:page
console.log($('div').attr('data-last-value')); //输出的值为:43

使用jQuery中.attr()函数设置data-*属性值

$('div').attr('data-emp',{'name':'zhangsan','age':23}); //给div添加一个data-emp的属性,属性值为一个json对象

注意:破折号要转化成驼峰命名

总结

以上所述是小编给大家介绍的HTML5新增属性data-*和js/jquery之间的交互,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 #HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 #HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 #HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 #HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 #HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 #HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 #HTML / CSS
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python实现多人聊天室
2020/03/31 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
留守儿童工作方案
2014/06/02 职场文书
学校花圃的标语
2014/06/18 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
国防教育标语
2014/10/08 职场文书
十八大观后感
2015/06/12 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS