帝王谷资源网

HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
网页制作 2024/12/27 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

可能大家在使用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-*" 数据。

标签：
data属性,html5,data
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接