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 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
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
php&amp;java(三)
2006/10/09 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
vue表单自定义校验规则介绍
2018/08/28 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
2014年健康教育实施方案
2014/02/17 职场文书
知识竞赛主持词
2014/03/26 职场文书
降消项目实施方案
2014/03/30 职场文书
学校交通安全责任书
2014/08/25 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
Python中的tkinter库简单案例详解
2022/01/22 Python