HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

 

      HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。

你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。

下面的一个代码片段是一个有效的HTML5标记:

  <div id="awesome"data-myid="3e4ae6c4e">Some awesome data</div>

可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性。

举个例子,你可以用下面的写法读取 data-myid属性值:

 var myid= jQuery("#awesome").data('myid');
console.log(myid);

你还可以在"data-*" 属性里使用json语法,例如,如果你写出下面的html:

<div id="awesome-json" data-awesome='{"game":"on"}'></div>

你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value:

var gameStatus= jQuery("#awesome-json").data('awesome').game;
console.log(gameStatus);

你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是,这些"data-*" 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。

译者补充:尽管"data-*" 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作"data-*" 数据。

转载于:https://www.cnblogs.com/juancreate2014/p/3529098.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/260886.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java。接口和抽象类区别

接口和抽象类区别 a.抽象类里可以有非抽象方法 接口里只能有抽象方法 b.接口是抽象类的变体&#xff0c;再接口中所有方法都是抽象的转载于:https://www.cnblogs.com/zhaozhaozhang/p/5759714.html

MNIST 手写数字识别,我是如何做到886个可训练参数,识别率达到98.2%? (参数、模型压缩), Keras实现,模型优化

一 项目展示 下面可以看到验证集可以到了0.9823了&#xff0c;实际上&#xff0c;在下面的另外一个训练&#xff0c;可以得到0.9839&#xff0c;我保守的写了0.982 二 项目参数展示 我们先来看看LeNet 5 的结构与参数&#xff0c;参数有61&#xff0c;706个。 这个是我用…

javascript 计算两个坐标的距离 米_土方全面应用计算

各种土方量的计算方法汇总8.2.1 DTM法土方计算由DTM模型来计算土方量是根据实地测定的地面点坐标(X&#xff0c;Y&#xff0c;Z)和设计高程&#xff0c;通过生成三角网来计算每一个三棱锥的填挖方量&#xff0c;最后累计得到指定范围内填方和挖方的土方量&#xff0c;并绘出填…

VS2008 AJAX控件介绍

1 Accordion 2 AccordionPane 实现多面板&#xff0c;每次都只显示一个&#xff0c;其他收藏起来&#xff0c;可以设置显示隐藏的时间和渐变效果哦 3 AlwaysVisibleControlExtender 这个东西是将VerticalSide的值设置好后无论页面的滚动条滚动&#xff0c;这个目标控件一直都显…

py文件转exe时包含paramiko模块出错解决方法

问题描述&#xff1a;python代码中包含paramiko模块的远程登录ssh&#xff0c;在用pyInstaller转为exe时报错&#xff0c; 报错提示为“No handlers could be found for logger "paramiko.transport" 出错位置&#xff1a; ssh paramiko.SSHClient() ssh.set_missin…

unity 阳光插件_网络广告,阳光创信保驾护航

网络广告 就找阳光创信。网络营销的技术基础主要是以计算机网络技术为代表的信息技术。计算机网络是现代通信技术与计算机技术相结合的产物&#xff0c;它把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络&#xff0c;从而使众多的计算机…

第2章 Python 数字图像处理(DIP) --数字图像基础1 - 视觉感知要素 - 亮度适应与辨别

数字图像基础1视觉感知要素亮度适应与辨别import sys import numpy as np import cv2 import matplotlib import matplotlib.pyplot as plt import PIL from PIL import Imageprint(f"Python version: {sys.version}") print(f"Numpy version: {np.__version__…

快速幂与快速乘法

List 快速幂与快速乘法 ListKnowledge快速幂 原理code快速乘法 原理codeKnowledge 快速幂 原理 a^b%p 采用二进制得思想&#xff0c;将b转化为二进制数。 b c02^0c12^1c22^2c32^3……cn2^n a^b a^(a12^0)a^(c12^1)……a^(cn2^n) 所以我们可以在log(b)的时间内求出a^(2^0)…

Java程序设计 图形用户界面 小巫版简易计算器

/** 作者&#xff1a;wwj 时间&#xff1a;2012/4/13 功能&#xff1a;实现一个计算器应用程序实验要求&#xff1a;编写一个模拟计算器的应用程序&#xff0c;使用面板和网格布局&#xff0c; 添加一个文本框&#xff0c;10个数字按钮&#xff08;0~9&#xff09;&#xff0c;…

phpcms文件结构

主要目录部分 /admin 管理后台目录 -- /skin/ 后台样式 -- /templates/ 后台样式模板/api api接口 /corpandresize 在线图片处理 -- /css/ csss样式 -- /images/ 图片 -- /js/ 引用js文件 -- /tmp/ 临时文件/data 数据缓存…

第1章 Python 数字图像处理(DIP) --绪论

Python 数字图像处理 关于本专栏 此专栏为 Python 数字图像处理&#xff08;DIP&#xff09;&#xff08;冈萨雷斯版&#xff09;&#xff0c;专栏里文章的内容都是来自书里&#xff0c;全部手打&#xff0c;非OCR&#xff0c;因为很多公式&#xff0c;都是用LaTex输入&#xf…

phython在file同时写入两个_轻松支撑百万级数据点写入 京东智联云时序数据库HoraeDB架构解密...

本文将通过对时序数据的基本概念、应用场景以及京东智联云时序数据库HoraeDB的介绍&#xff0c;为大家揭秘HoraeDB的核心技术架构和解决方案。首先我们来了解下时序数据库的基本概念。时序数据库全称时间序列数据库&#xff0c;主要用于处理带时间标签的数据&#xff0c;带时间…

飞雪迎春

转载于:https://www.cnblogs.com/ysx4221/p/3537810.html

高可用集群技术之corosync应用详解(一)

Corosync概述:Corosync是集群管理套件的一部分&#xff0c;它在传递信息的时候可以通过一个简单的配置文件来定义信息传递的方式和协议等。它是一个新兴的软件&#xff0c;2008年推出&#xff0c;但其实它并不是一个真正意义上的新软件&#xff0c;在2002年的时候有一个项目Ope…

一天总结

这几天忙着弄毕业设计和论文&#xff0c;有好几天都没总结了&#xff01;学习进度也慢了下来&#xff01;接下几天把毕业答辩弄好后&#xff01;把精力放在数据库和编程熟练度上&#xff01;还有很多要学习的多看书多敲代码&#xff01;最重要的是要多思考&#xff0c;要有自己…

电脑dns_win10系统dns错误如何解决「系统天地」

最近有位win10系统用户在使用电脑的过程当中&#xff0c;碰到了dns错误的情况&#xff0c;用户不知道如何解决&#xff0c;为此非常苦恼&#xff0c;那么win10系统dns错误如何解决呢?下面为大家分享win10电脑dns错误的解决方法。第一步&#xff1a;使用 ipconfig /flushdns 命…

第2章 Python 数字图像处理(DIP) --数字图像基础5 -- 算术运算、集合、几何变换、傅里叶变换等

目录数字图像处理所有的基本数字工具介绍算术运算集合运算和逻辑运算空间运算向量与矩阵运算图像变换图像和随机变量数字图像处理所有的基本数字工具介绍 算术运算 # 相加 img_ori cv2.imread("DIP_Figures/DIP3E_Original_Images_CH02/Fig0226(galaxy_pair_original).…

单例模式之文件缓存器

2012年4月18日 天气阴 天气灰蒙蒙的&#xff0c;对于我们这种要为毕业做准备的人来说&#xff0c;这天气舒服&#xff0c;凉爽 中午睡了一个时后 打开电脑 突然感觉 眼睛不适应电脑屏幕的亮度&#xff0c;就是最近眼睛看电脑太久了 不工作 了 呵呵 看来该休息一下…

linux目录详解

转自 http://www.cnblogs.com/Daniel-G/archive/2012/10/06/2712932.html详解Linux目录&#xff08;目录树详细解释&#xff09;给大家一篇关于Linux目录 方面的详细说明&#xff0c;好好读一下&#xff01;Linux目录详解(RHEL5.4)linux有四种基本文件系统类型&#xff1a;--普…

Windows安装cnpm报错 The operation was rejected by your operating system.

Windows在安装cnpm时出现如下错误 npm ERR! The operation was rejected by your operating system. npm ERR! Its possible that the file was already in use (by a text editor or antivirus), npm ERR! or that you lack permissions to access it. npm ERR! npm ERR! If y…