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 相关文章推荐
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
css3新特性的应用示例分析
Mar 16 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
解析MySql与Java的时间类型
2013/06/22 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
sails框架的学习指南
2014/12/22 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
详解JavaScript作用域 闭包
2020/07/29 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Django的session中对于用户验证的支持
2015/07/23 Python
在python中实现对list求和及求积
2018/11/14 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
python mysql断开重连的实现方法
2019/07/26 Python
使用python模拟高斯分布例子
2019/12/09 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
洗发露广告词
2014/03/14 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
导师工作推荐信
2015/03/27 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书