.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-*的用法实例分享的更多相关文章

  1. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  2. jQuery插件制作之全局函数用法实例

    原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...

  3. jQuery中data()方法用法实例

    语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...

  4. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  5. Jquery 操作HTML5自定义属性data-*

    HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...

  6. 【转】关于Jquery中ajax方法data参数用法的总结

    $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Bosto ...

  7. jQuery 操作 html5 data-* 属性

    Html 部分: <a class="nav-item" href="javascript: void(0)" data-id="{{$item ...

  8. jquery下json数组的操作用法实例

    jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...

  9. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

随机推荐

  1. C#变量修饰符

    访问修饰符 关键字包括:internal,public,protected和private,用于设置变量的访问级别.  public  变量可以做为它所属的类型的一个字段,可以在任何地方访问它.  i ...

  2. android源码查看所有分支切换分支

    cd .repo/manifests git branch -a repo init -b android-4.1.2_r1 repo sync

  3. Strusts2--课程笔记9

    防止表单重复提交: 用户可能由于各种原因,对表单进行重复提交.Struts2中使用令牌机制防止表单自动提交.以下引用自北京动力节点: 前端表单提交代码: <%@ page language=&q ...

  4. SNS

    SNS,专指社交网络服务.也指社交现有已成熟普及的信息载体,如短信SMS服务.SNS的另一种常用解释:全称Social Network Site,即“社交网站”或“社交网”.SNS也指Social N ...

  5. 关于Java泛型的新解

    ////////////////////////////////////////////////////////////////////////////////为了方便您的观看,请在web版式视图在观 ...

  6. 第一章 flume架构介绍

    1.flume概念介绍 1.1 常见的分布式日志收集系统                             Scribe是facebook开源的日志收集系统,在facebook内部已经得到大量的 ...

  7. Linux服务器操作系统

    Linux服务器操作系统 今日大纲 ●    服务器操作系统的系列.Linux的主流产品.虚拟机软件 ●    安装linux ●    linux基本命令 ●    用户管理及权限(多用户) ●   ...

  8. Android底部导航栏——FrameLayout + RadioGroup

    原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...

  9. c# 使用 HttpWebRequest模拟登陆

    c# 使用 HttpWebRequest模拟登陆(附带验证码) 分类: C# .net2010-06-04 00:50 35647人阅读 评论(43) 收藏 举报 c#exceptionstreams ...

  10. Redis断线重连编码注意事项

    应用在Redis重启.网络闪断并恢复正常后,应用必须能够自恢复,下面以Java语言的jedis客户端为例说明: 1.作为发布者 Jedis对象不能作为单例,网络闪断后该Jedis对象无法自恢复.应该每 ...