HTML5中的data-*属性和jQuery中的.data()方法使用
来源:互联网 发布:医院网络建设方案 编辑:程序博客网 时间:2024/06/05 11:54
HTML5中的data-*属性
我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据,我们自定义的属性名字也千奇百怪,五花八门。我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是前端技术在向着规范化前进。HTML5标准规定,自定义的属性都已data—*开头,这样就区分开了固有属性和自定义属性。HTML代码如下:
通过each打印的结果,我们需要注意:
1,如果data-后面包含了“-”,例如 date-e-name,"-"会去掉,并转换成为骆驼峰式的命名 eName。这是因为JSON Object 的key不能包含”-“。
2,如果data-后面的单词有大写,例如 myName,将会转存成小写 myname。这里就不理解为什么会转换成小写了,JSON Object的key是区分大小写的。求高人指定??
3,如果你想删除一个data-*属性,请使用 delete dataset.cname或者dataset.cname=null;
data-*属性看起来很好,但是不幸的是只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+的浏览器中实现了此标准。如果你的脚步需要兼容各主流浏览器的不同版本建议还是使用原生的getAttribute()或jQuery中的.attr()。
jQuery中的.data()
jQuery中的.data()方法作用:在jQuery对象对应的DOM元素上获取或存放key-value对。我们可以通过html5的data-*属性在元素上存取数据,在jQuery也可以通过data()来实现。data()方法有多个重载,传递一个参数是获取value值,传递两个参数是存储或覆盖已存在的值,传递一个JSON Object是在元素上存储或覆盖已存在的多个key-value对。如果通过data() 在元素上存储key-value,value可以是一个对象,而不是像data-*只能存储一个字符串的value。下面给出一个综合示例:
从上例中我们可以看出,.data()可以获取通过data-*属性存储的值。但是通过.data()修改data-*属性的值不会显示在HTML标记中,我们只是通过.data()在元素存储了一个新值。.removeData()也不能删除通过data-*存储的数据。由于jQuery是一个通用的JS框架,最浏览器兼容性做的非常好,大多数情况,我们应该通过.data()在元素上存取数据(有一个好处是可以存储一个对象)。如果我们必须通过data-*来存取和修改数据,建议使用JS5的dataset属性,这个属性的兼容问题,我们可以通过写jQuery插件来解决。这是我的插件代码,如下:
阅读全文
0 0
- HTML5中的data-*属性和jQuery中的.data()方法使用
- HTML5中的data-*属性和jQuery中的.data()方法使用
- HTML5中的data-*属性和jQuery中的.data()方法使用
- HTML5中的data-*属性
- HTML5中的data-属性
- html5的自定义data-*属性和jquery的data()方法的使用示例-属性-data-方法
- html5的自定义data-*属性和jquery的data()方法的使用
- html5的自定义data-*属性和jquery的data()方法的使用示例
- HTML5中自定义的data-*属性使用和js/jquery的data()方法操作
- jQuery.data()和HTML5之data-属性
- HTML5中的data-*自定义属性
- HTML5中的数据集dataset和自定义属性data-*
- HTML5中的数据集dataset和自定义属性data-*
- html5的自定义data-*属性与jquery的data()方法的使用
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
- HTML5 自定义属性 data-* 和 jQuery.data 详解
- HTML5 自定义属性 data-* 和 jQuery.data 详解
- HTML5 自定义属性 data-* 和 jQuery.data 详解
- 代理模式 和 策略模式 看似相似,有什么不同
- git修改本地ssh key
- tomcat报错org.apache.catalina.core.StandardContext.startInternal Error listenerStart
- Glide4使用说明
- WordPress是一个卓越的并安全的平台
- HTML5中的data-*属性和jQuery中的.data()方法使用
- 查看Linux磁盘容量,空间大小
- 分析诊断工具之一:MYSQL性能查看(多指标)
- LRN ( Local Response Normalization) 局部响应归一化层
- Ubuntu下配置SVN自动发送邮件通知
- Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点?
- Robot Framework: 自定义自己的python库
- Dubbo入门基础与实例讲解
- springboot_Springcloud干货