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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
javascript 写类方式之三
Jul 05 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
学习jQuey中的return false
Dec 18 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
javascript的BOM
May 03 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
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 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php删除数组元素示例分享
2014/02/17 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
js导出txt示例代码
2014/01/14 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
js实现缓动动画
2020/11/25 Javascript
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python引用模块和查找模块路径
2016/03/17 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
电气专业推荐信范文
2013/11/18 职场文书
小学生考试获奖感言
2014/01/30 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
设备管理实施方案
2014/05/31 职场文书
安全横幅标语
2014/06/09 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书