jquery操作HTML5 的data-*的用法实例分享

.mm{width:256px; height:200px;}

.mm[data-name='张含韵']{background:url(http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;}

.mm[data-name='undefined']{background:url(http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg) no-repeat;}

HTML代码：

<div class="mm" data-name="张含韵"></div>

<div class="mm" data-name="undefined"></div>

从jQuery 1.4.3起， HTML 5 data- 属性将自动被引用到jQuery的数据对象中。也就是说虽然 data-* 是在html5 中的元素, 但是如果使用 jquery 1.4.3库以上的.还是可以在非HTML5的页面或浏览器里, 仍然可以使用.data(obj)方法来操作"data-*" 数据.

阅读HTML5的详细规范后你会发现，这个自定义data属性的用法非常的简单，就是你可以往HTML标签上添加任意以 "data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。

jquery 里已经内置这个方法. 通过 $(‘#content‘).data(‘list'); 就能获取数据. 这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery操作HTML5 的data-*的用法</title>
</head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
    //读取data-*的值
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });

    //设置data-*的值
    $("li").eq(0).data('name','bryant');
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });

    //删除data-*的值   这里使用的是removeAttr，测试官方的removeData是不起作用的
    $("li").eq(0).removeAttr('data-name');
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });
})
</script>
<body>
<ul>
    <li data-name="kobe">科比</li>
    <li data-name="gasol">加索尔</li>
    <li data-name="nash">纳什</li>
    <li data-name="fisher">费舍尔</li>
</ul>
</body>
</html>

秒客网

jquery操作HTML5 的data-*的用法实例分享

HTML代码：

相关文章