jquery操作HTML5 的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获取自定义属性(attr和prop)实例介绍
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
- jquery 获取自定义属性(attr和prop)的实现代码
- 使用jQuery获取data-的自定义属性
- jquery自定义属性(类型/属性值)
- jQuery Easyui Tabs扩展根据自定义属性打开页签
- html5的自定义data-*属性和jquery的data()方法的使用示例
- jquery遍历标签中自定义的属性方法
- jQuery实现的一个自定义Placeholder属性插件
- 用jquery获取自定义的标签属性的值简单实例
- jQuery判断自定义属性data-val用法示例
相关文章
jquery 升级到1.4后 jqDrag 拖动 不可用的修改方法2010-02-02
动态创建元素可以通过两种方式1、Dom HTml2、JQuery函数创建3、页面加载的时候最好在页面加载完后执行创建，感兴趣的朋友可以了解下2013-04-04
jQuery是一个非常好用的javascript框架，我尤其喜欢它强大的选择器和链式表达式，使得我们能通过简单的语句实现复杂的功能。它还有一个重要的特点就是它的可扩展性，使得很多人都可以开发他们的插件并且分享出来2011-12-12
这篇文章主要介绍了jQuery bt气泡实现悬停显示及移开隐藏功能的方法,通过页面元素属性的动态变换实现气泡提示框的效果,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了jQuery Validate初步体验(二) 的相关资料,需要的朋友可以参考下2015-12-12
用Radio来实现用户的选择效果，在项目中积累了一些利用JQUERY来操作Radio的方法，这里与大家分享下2014-10-10
这篇文章主要介绍了jQuery soColorPacker 网页拾色器 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了基于Jquery和html5实现炫酷的3D焦点图动画的相关资料，焦点图中的图片利用了CSS3的相关特性实现图片倾斜效果，从而让图片出现3D的视觉效果，感兴趣的小伙伴们可以参考一下2016-03-03
最近在学习jquery，今天抽空用jquery写个checkbox——类似邮箱全选功能，感兴趣的你可以参考下哈，希望可以帮助到你2013-03-03
通过XMLHttpRequest和jQuery实现ajax的几种方式
AJAX大家已经都知道了，是为了实现异步通讯，提高用户体验度，而将很多旧知识（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一个新的知识框架。而，XMLHttpRequest对象则是其中的重重之中,本篇文章主要给大家介绍通过XMLHttpRequest和jQuery实现ajax的几种方式2015-08-08
最新评论