HTML5中的data-*属性和jQuery中的.data()方法使用

HTML5中的data-*属性

我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据,我们自定义的属性名字也千奇百怪,五花八门。我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是前端技术在向着规范化前进。HTML5标准规定,自定义的属性都已data—*开头,这样就区分开了固有属性和自定义属性。HTML代码如下:

<div id="testDiv" data-cname="张三" data-e-name="zhangsan" data-myName="my name is zs.">测试在元素上存储一个key-value</div>

js代码

$(document).ready(function(){
var el = document.getElementById("testDiv");

console.log(el.dataset.cname);//=>张三
el.dataset.cname = "ZS";//设置值为"ZS"
console.log(el.dataset.cname);//=>"ZS"

console.log("遍历testDiv上的自有属性");
$.each(el.dataset, function(key, value){
console.log(key+":"+value);
});

//遍历testDiv上的自有属性
//cname:ZS
//eName:zhangsan 
//myname:my name is zs.
<span style="white-space:pre">	</span> 
});

在获取自定义属性的值时,使用dataset属性,然后通过自定义属性(这时去掉data-前缀)的名称去获取值。dataset是JS5规范中新增加的属性,用于和data-*配合使用。
通过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()。

时间: 2024-10-05 04:45:17

HTML5中的data-*属性和jQuery中的.data()方法使用的相关文章

XP系统中,系统属性→计算机名中,网络ID是灰色的不可用状态,还有下面的“更改”按钮点进去,“隶属于”的域和工作组也是灰色不可用

XP系统中,系统属性→计算机名中,网络ID那个按钮是灰色的不可用状态,还有下面的“更改”按钮点进去,“隶属于”的域和工作组也是灰色不可用. 一般提供的解决方法:在运行中键入Msconfig,在服务标签中钩选workstation服务,即可!另,也可在控制面板中选择“管理工具”---“服务”----开启workstation服务即可! 假如没有workstation服务,请在网络中安装microsoft网络客户端! 但是在启用服务的时候却出现问题了:windows 不能在本地计算机中启用 work

DOM中动态创建元素与jQuery中动态创建元素

DOM中动态创建元素与jQuery中动态创建元素 DOM中动态创建元素: 1. document.write("标签的代码")    缺点:页面中原有的元素会被覆盖掉 2. innerHTML 3. document.createElement("标签的名称") jQuery中动态创建元素: 1. $("标签的代码") 2. 对象.html("标签的代码") 原文地址:https://www.cnblogs.com/david

Mybatis中实体类属性与数据库列表间映射方法介绍

           这篇文章主要介绍了Mybatis中实体类属性与数据列表间映射方法介绍,一共四种方法方法,供大家参考.         Mybatis不像Hibernate中那么自动化,通过@Column注解或者直接使用实体类的属性名作为数据列名,而是需要自己指定实体类属性和数据表中列名之间的映射关系,这一点让用惯了Hibernate的人很不习惯,所幸经过探索找到了建立映射关系的几种办法,其中总也有比较简单的. 首先定义一个实体类User,如下: public class User { pr

html5的自定义data-*属性和jquery的data()方法的使用示例

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用. 这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布

js中的原生Ajax和JQuery中的Ajax

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,String url,boolean asynch);        准备请求:             url:            get/post            true/false:            true:异步            false:同步 readyState  

Android 中自定义控件和属性(attr.xml,declare-styleable,TypedArray)的方法和使用

本文转载自http://blog.csdn.net/jincf2011/article/details/6344678 今天我们的教程是根据前面一节扩展进行的,如果你没有看,请点击 Android高手进阶教程(三)查看第三课,这样跟容易方便你的理解! 在xml 文件里定义控件的属性,我们已经习惯了android:attrs="" ,那么我们能不能定义自己的属性能,比如:test:attrs="" 呢?答案是肯定的. 进入主题.大致以下步骤: 一. 在res/valu

js中的写出想jquery中的函数一样调用

1.IIFE: Immediately-Invoked function Expression 函数模块自调用 2.代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <div id="demo">的么的事</div> <

HTML 5:你必须知道的data属性

原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可以让你给元素自定义数据.这篇文章就是思考怎么更好的使用Data属性. 介绍 HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. 随着网站自身的数据越来越多,一些特

jQuery中的css属性对应名称

css中一些样式属性可以直接引用到jquery中,但是有些属性在jquery中与在css中有些区别,下面就是一些常用属性在css与jquery中的名称. jQuery中的css属性对应名称 css jQuery bottom bottom left left right right top top width width min-width minWidth max-width maxWidth height height min-height minHeight max-height maxH

jquery中ajax处理跨域的三大方式

一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问.但ie10以下不支持 只需要在服务端填上响应头: ? 1 2 3 header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受,*/ header("Access-Control-Allow-Methods:GET,POST"); 3.jsonP 原理: ajax本身是不可以跨