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-*的用法实例分享的更多相关文章
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- jQuery插件制作之全局函数用法实例
原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...
- jQuery中data()方法用法实例
语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
- Jquery 操作HTML5自定义属性data-*
HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...
- 【转】关于Jquery中ajax方法data参数用法的总结
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Bosto ...
- jQuery 操作 html5 data-* 属性
Html 部分: <a class="nav-item" href="javascript: void(0)" data-id="{{$item ...
- jquery下json数组的操作用法实例
jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
随机推荐
- double hashing 双重哈希
二度哈希(rehashing / double hashing) 1.二度哈希的工作原理如下: 有一个包含多个哈希函数(H1……Hn)的集合.当我们要从哈希表中添加或获取元素时,首先使用哈希函数H1. ...
- 生成元（Digit Generator,ACM/ICPC Seoul 2005,UVa 1583）
#include<cstdio>#include<cstdlib>#include<cstring>using namespace std;int t, n, a, ...
- UITableViewCell上面添加UIWebView
首先创建一个webView对象和 private var webViewcell : UIWebView? 在viewDidLoad里面设置创建webViewcell,设置属性并用kvo监听webVi ...
- notepad++正则表达式替换字符串详解
正则表达式是一个查询的字符串,它包含一般的字符和一些特殊的字符,特殊字符可以扩展查找字符串的能力,正则表达式在查找和替换字符串的作用不可忽视,它 能很好提高工作效率. EditPlus的查找,替换,文 ...
- mybatis笔记（一）
mybatis (一)传值 三种方式 1.直接传值void getMessageList(int userId,String userName);mapper.xml 获取 #{0}代表userId ...
- JVM保证线程安全
线程安全 Java内存模型中,程序(进程)拥有一块内存空间,可以被所有的线程共享,即MainMemory(主内存):而每个线程又有一块独立的内存空间,即WorkingMemory(工作内存).普通情 ...
- “System.BadImageFormatException”类型的未经处理的异常在 PurchaseDevices.Access.dll 中发生 其他信息: 未能加载文件或程序集“System.Data.SQLite, Version=1.0.66.0, Culture=neutral, PublicKeyToken=db937bc2d44ff139”或它的某一个依赖项。试图加载格式不正确
引用sqlite的程序集时,有时会报如下异常: "System.BadImageFormatException"类型的未经处理的异常在 PurchaseDevices.Acces ...
- 【第一篇】Volley的使用之json请求
最近项目写完,有开始新的学习了,volley很久以前就接触了,也看了源码,然而却没有通过文章去记录自己的学习成果. 首先讲下volley的特点: 1,扩展性强.Volley 中大多是基于接口的设计,可 ...
- String类之indexOf--->查找某字对应的位置
以下方法都是java内置类String类的内置方法(不是构造方法哦,就是普通的方法),不需要我们写,直接拿过来用即可. indexOf方法对应Api介绍 lastIndexOf方法对应Api介绍 -- ...
- poj1741_Tree(树的点分治入门题)
题目链接:poj1741_Tree 题意: 给你一颗n个节点的树,每条边有一个值,问有多少点对(u,v),满足u->v的最短路径小于k. 题解: 典型的树的分治,板子题. #include< ...