我们先来看下HTML 5 增加的一项新功能是
自定义数据属性-- data-* 自定义属性
http://www.css88.com/archives/4715
<div id="user" data-uid="123456" data-uname="html5" data-date-of-birth>码头</div>
一)使用attribute方法能够存取 data-* 自定义属性的值:
所有的现代浏览器中都能正常工作,但它不是HTML 5 的自定义 data-*属性被使用目的。
// 使用getAttribute获取 data- 属性
var user = document . getElementById ( 'user' ) ;
var userName = plant . getAttribute ( 'data-uname' ) ; // 'html5'
var userId = plant . getAttribute ( 'data-uid' ) ; // '123456'
// 使用setAttribute设置 data- 属性
user . setAttribute ( 'data-site' , 'http://www.css88.com' ) ;
二)dataset属性存取data-*自定义属性的值:
通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值,dataset 属性是HTML5 JavaScript API的一部分,用来返回一个所有选择元素 data- 属性的DOMStringMap对象。
兼容性:Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器
1)不是使用完整的属性名,要
去掉data- 前缀
2)属性名如果包含了连字符,连字符将被去掉,并转换为
驼峰式的命名,例如:data-date-of-birth ---》dateOfBirth
var el = document.querySelector('#user');
console.log(el.uid); // 'user'
console.log(el.dataset);//一个DOMStringMap
console.log(el.dataset.uid); // '123456'
console.log(el.dataset.uname); // 'html5'
console.log(el.dataset.dateOfBirth); // ''
el.dataset.dateOfBirth = '2015-03-26'; // 设置data-date-of-birth的值.
console.log('someDataAttr' in el.dataset);//false
el.dataset.someDataAttr = 'mydata';
console.log('someDataAttr' in el.dataset);//true
接下来我们看看jQuery中的data()
作用:在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
语法:.data( key, value )
value为新的数据值,可以是任意的Javascript数据类型,除了undefined。
语法:.data( obj )
一个用于更新数据的 键/值对。
<div>
The values stored were
<span></span>
and
<span></span>
</div>
//输出:The values stored were 16 and pizza!
<script>
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script>
分析的很详细:
http://zhangyaochun.iteye.com/blog/1746676
分享到:
相关推荐
jQuery.fn.dataset = function(attr, val) { // 获取数据集 if (arguments.length == 0) { var dataset = {}; jQuery(this).eq(0).each(function() { var attrs = this.attributes; for (var i = 0, l = attrs...
我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dataset</title> <meta charset="utf-8"> </head> <body> ...
今天 谢亮 兄弟和我讨论一个东西的时候,谈到了性能,他用的是 attr 操作自定义属性 data-uid,我说用 data 好,因为是 dataset 实现,然后他去翻了下 jQuery 源码和我说,没有发现这个东西,我就纳闷了。...
最近被jquery折磨了一番,倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集,将dataSet转换成json并返回给客户端,客户端用jquery getJson方法解析出来并显示在页面上。...
ConvertJson List转成Json|对象转成Json|集合转成Json|DataSet转成Json|DataTable转成Json|DataReader转成Json等 9.Mime MediaTypes MimeEntity MimeHeaders MimeReader QuotedPrintableEncoding 10.PDF 转化类 PDF...
5.执行MySql和Oracle滴混合事务,执行多条SQL语句,实现数据库事务。 6.执行带一个存储过程参数的的SQL语句。 7.执行带一个存储过程参数的的SQL语句。 8.向数据库里插入图像格式的字段(和上面情况类似的另一种实例) ...
0.83.5.820 +---------------------------------------------------------------------------------------- - 0000796: DBGrid: Render bug when Column color is clWindow and project is created with 0.82 - ...
jquery实现ajax无刷新评论需要用的技术:(本次试验用的是“jquery-1.4.2.js”版本的jquery) $.post(“一般处理程序路径”,{以字典的形式传递参数},function(data,status){“““}); jquery中的基本选择器操作; ...
用法从网络加载CSV数据集: 要求在HXL之前加载Papa Parse CSV库(在lib /中捆绑了一个副本,并具有许可): hxl.load('http://example.org/dataset.csv', function (dataset) { console.log('Dataset has ' + ...
DataToExcel ExcelHelper ExportExcel GridViewExport 14.分词辅助类 SegList 15.汉字转拼音 EcanConvertToCh PinYin 16.配置文件操作类 ConfigHelper 17.日历 CNDate 18.上传下载 DownLoadHelper FileDown FileUp ...
第一步:运行ServerData.java 启动服务器,然后服务器处于等待状态 第二步:运行LoginData.java 启动(客户端)登陆界面 输入用户名 ip为本机localhost 第三步:在登陆后的界面文本框输入文本,然后发送 可以同时启动...
后来在一个不起眼的小站找到一个帖子,某个人的一个建议提醒了我。 我原来的代码是这样写的: 错误代码 代码如下:... public DataSet getDataFromATable(string tablename) { DataSet ds = new DataSet(); using (SqlCo
第一步:运行ServerData.java 启动服务器,然后服务器处于等待状态 第二步:运行LoginData.java 启动(客户端)登陆界面 输入用户名 ip为本机localhost 第三步:在登陆后的界面文本框输入文本,然后发送 可以同时启动...
比如我们需要从数据库查询出一张表格,然后将表格传输给前台,但是dataset是不能直接传输的,我们需要将dataset数据转换为json数据,这样可以方便前台js解析数据,下面我来写一下转换的格式 {Name:表的名称,Rows:[{...
该项目使用的是asp.net开发环境,中间使用了c#后台编码,html前台显示,css前台排版,javascript前台脚本,jQuery以及jQuery-UI的使用,ajax的局部页面刷新技术,sqlserver数据库的数据存储以及查询更新。...
该项目使用的是asp.net开发环境,中间使用了c#后台编码,html前台显示,css前台排版,javascript前台脚本,jQuery以及jQuery-UI的使用,ajax的局部页面刷新技术,sqlserver数据库的数据存储以及查询更新。...
2013.6.5更新内容: 新增了图片浏览模块,用户评论,浏览 数据库改变的操作,增加了排序功能,修改了Chrome,IE10 css不兼容问题,该项目是在IE10,Chrome浏览器调试的额,如果显示不规范,请适当的更换浏览器,...
2013.6.5更新内容: 新增了图片浏览模块,用户评论,浏览 数据库改变的操作,增加了排序功能,修改了Chrome,IE10 css不兼容问题,该项目是在IE10,Chrome浏览器调试的额,如果显示不规范,请适当的更换浏览器,...