HTML5自定义data-* data(obj)属性和jquery的data()方法的使用


Posted in HTML / CSS onDecember 13, 2012

可能大家在使用jquery mobile时,经常会看到data-role、data-theme等的使用,比如:通过如下代码即可实现页眉的效果:

复制代码
代码如下:

<div data-role="header">
<h1>我是标题</h1>
</div>

通过手机浏览,效果如下:

HTML5自定义data-* data(obj)属性和jquery的data()方法的使用HTML5自定义data-* data(obj)属性和jquery的data()方法的使用

为什么写一个data-role="header"就能实现底部为黑色、文字居中显示的效果呢?

本文提供一种最简单的实现办法,让大家对这些用法有个直观的了解。

我们写一个html页面,自定义一个data-chb="header"的属性,希望具备这个属性的div区域背景颜色为黑色,文字为白色,居中显示;不具备data-chb自定义属性的div按照默认方式显示,html代码如下:

复制代码
代码如下:

<body>
<div data-chb="header">
<h1>我是使用了data-chb自定义属性的div</h1>
</div>
<br/>
<div>
我没有使用data-chb自定义属性,该怎么展现就怎么展现;
</div>
</body>

要想实现"背景颜色为黑色,文字为白色,居中显示"的显示效果,我们定义如下的css:
复制代码
代码如下:

<style>
.ui_header {
background-color: black;
text-align: center;
color:white;
border:1px solid #000;
}
</style>

然后我们通过如下js方法实现在页面加载时,动态添加css定义,改变具备data-chb属性的div的显示样式:
复制代码
代码如下:

<script type="text/javascript">
window.onload=function(){
var elems = document.getElementsByTagName("div");
if(elems!=null&&elems.length>0){
var length = elems.length;
//遍历所有DIV控件
for(var i=0;i<length;i++){
var elem = elems[i];
//获取该控件的自定义属性
var customAttr = elem.dataset.chb;
//也可以通过如下方式获得自定义属性
//var customAttr = elem.dataset["chb"];
//如果是我们预先定义好的header值,表示需要处理
if(customAttr=="header"){
//添加样式
elem.setAttribute("class","ui_header");
}
}
}
}
</script>

最后页面显示效果如下:

HTML5自定义data-* data(obj)属性和jquery的data()方法的使用

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。

你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
下面的一个代码片段是一个有效的HTML5标记

复制代码
代码如下:

<div id="awesome"
data-myid="3e4ae6c4e">Some awesome data</div>

可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性。
举个例子,你可以用下面的写法读取 data-myid属性值:
复制代码
代码如下:

var myid= jQuery("#awesome").data('myid');

console.log(myid);你还可以在"data-*" 属性里使用json语法,例如,如果你写出下面的html:
复制代码
代码如下:

<div id="awesome-json" data-awesome='{"game":"on"}'></div>

你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value:
复制代码
代码如下:

var gameStatus= jQuery("#awesome-json").data('awesome').game;

console.log(gameStatus);你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是,这些"data-*" 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。
译者补充:尽管"data-*" 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作"data-*" 数据。
HTML / CSS 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 #HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 #HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 #HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 #HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 #HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 #HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 #HTML / CSS
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
一些常用的php简单命令代码集锦
2007/09/24 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python装饰器用法实例总结
2018/02/07 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python shutil模块用法实例分析
2019/10/02 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
客户代表实习人员自我鉴定
2013/09/27 职场文书
计算机大学生的自我评价
2013/10/15 职场文书
学生自我鉴定
2013/12/18 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
雷锋观后感
2015/06/10 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
Python中的套接字编程是什么?
2021/06/21 Python
Nginx反向代理、重定向
2022/04/13 Servers
Redis批量生成数据的实现
2022/06/05 Redis