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


Posted in Javascript onAugust 17, 2014

阅读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>

Javascript 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
js实现目录定位正文示例
Nov 14 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
js判断浏览器是否支持html5
Aug 17 #Javascript
一段非常简单的js判断浏览器的内核
Aug 17 #Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 #Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 #Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 #Javascript
Node.js中的事件驱动编程详解
Aug 16 #Javascript
Node.js文件操作详解
Aug 16 #Javascript
You might like
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
PHP读取大文件的几种方法介绍
2016/10/27 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python线程详解
2015/06/24 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Python如何实现动态数组
2019/11/02 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
python编写俄罗斯方块
2020/03/13 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
车间主管岗位职责
2013/11/14 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
导购员的岗位职责
2014/02/08 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
酒店管理求职信
2014/06/09 职场文书
群众路线领导对照材料
2014/08/23 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
检讨书怎么写
2015/05/07 职场文书
mysql 索引合并的使用
2021/08/30 MySQL