转自：http://www.php.cn/js-tutorial-405445.html

在元素中存储数据:data()

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>3.在元素中存储数据:data()</title>

</head>

<body>

<img src="../images/peter.jpg" width="200" alt="php中文网" title="朱老师" id="pic" data-job="php中文网朱老师">

</body>

</html>

data():读取元素中属性名以data-开始的自定义数据,可以省略data-前缀

1

var res = $('#pic').data('job')

如果用之前的attr()方法必须写出完整的属性名

1

var res = $('#pic').attr('data-job')

data()也是一个自带读取器和设置器的方法

1

$('#pic').data('data-course', 'php项目开发课程')

如果是动态设置的自定义属性,省略前缀是获取不到的

1

var res = $('#pic').data('course')

需要加上前缀

1

var res = $('#pic').data('data-course')

data()能获取元素上的原生属性吗?无法读取

1

var res = $('#pic').data('title')

但是支持动态设置title属性,仅限于脚本中使用,原始值并未发生变化

1

var res = $('#pic').data('title','hellow')

现在就可以在脚本中读取了title的值了,尽管这个值与原生的alt值并不相同

1

var res = $('#pic').data('title')

同样,data()也有一个对应的removeData()用来删除自定义或由它创建的属性

1

2

3

var res = $('#pic').removeData('title')  //仅删除临时创建的,原值不受影响

var res = $('#pic').removeData('data-course')  //仅删除临时创建的

var res = $('#pic').data('data-course')  //仅删除临时创建的

原始标签自带的自定义属性中删除不了的

1

2

var res = $('#pic').removeData('data-job')

var res = $('#pic').data('job')

在控制台查看结果

1

console.log(res)

以上就是jquery在元素中存储数据:data()的详细内容，更多请关注php中文网其它相关文章！

jquery在元素中存储数据:data()的更多相关文章

  1. Jquery table元素操作-创建|数据填充|重置|隐藏行

    1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...

  2. C#中存储数据的集合：数组、集合、泛型、字典

    为什么把这4个东西放在一起来说,因为c#中的这4个对象都是用来存储数据的集合……. 首先咱们把这4个对象都声明并实例化一下: //数组 ]; //集合 ArrayList m_AList = new ...

  3. 往redis中存储数据是利用pipeline方法

    在redis中保存数据时,保存和设置有效时间是分开写的话,如果中间出现的异常,这会导致数据永久有效,因此就可以采用pipeline方法. # 创建redis管道对象,可以一次执行多个语句 pipeli ...

  4. Spark向HDFS中存储数据

    程序如下: import org.apache.spark.sql.Row; import org.apache.spark.SparkConf; import org.apache.spark.ap ...

  5. 使用jQuery获取session中存储的list集合

    在网上查找了很多关于jQuery获取session都不可得,如果大家有更好的方式,欢迎留言 这里是使用jQuery发送Ajax请求到后台获取session jsp中没有代码 js代码 <scri ...

  6. 通过jquery,从json中读取数据追加到html中

    1.下载安装jquery   可通过下面的方法引入在线版本的js: <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jque ...

  7. jquery 在ie10中post数据，最终数据丢失的BUG修复

    最近在做项目的时候,发现ie10或者360之类套壳的浏览器(ie10) 在jquery调用post数据的时候,真实的请求并没有上传数据,原因不表,请见 http://stackoverflow.com ...

  8. jquery appaend元素中id绑定事件失效问题

    1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用. 2.解决办法: 举例:如果在一个<div class="titl ...

  9. Android 读取<meta-data>元素中的数据

    众所周知, 每个组件都有<meta-data>元素, 用于接收一些外部数据(eg: appKey), 那其中的值应该怎么读取呢. 1> Application <applica ...

随机推荐

  1. test20190320 全连（fc）

    题意 全连(fc) [题目背景] 还记得若干年前那段互相比较<克罗地亚狂想曲>的分数的日子吗? [题目描述] E.Space 喜欢打音游. 但是他技术不好,总是拿不到全连(Full Com ...

  2. 用C#通过反射实现动态调用WebService 告别Web引用（转载）

    我们都知道,调用WebService可以在工程中对WebService地址进行WEB引用,但是这确实很不方便.我想能够利用配置文件灵活调用WebService.如何实现呢? 用C#通过反射实现动态调用 ...

  3. FastAdmin 插件的 Git 开发流程（简明）

    FastAdmin 插件的 Git 开发流程(简明) cms zip 安装 包安装 删除 addons 里的 cms 使用 mklink 软链接到 cms 插件 Git 仓库 修改 cms 插件 gi ...

  4. MQ的不足

    调用方实时依赖执行结果的业务场景,请使用调用,而不是MQ.MQ是互联网分层架构中的解耦利器,那所有通讯都使用MQ岂不是很好?这是一个严重的误区,调用与被调用的关系,是无法被MQ取代的.比如用户登录场景 ...

  5. 【转】每天一个linux命令（7）：mv命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/10/27/2743022.html mv命令是move的缩写,可以用来移动文件或者将文件改名(move  ...

  6. thrift 知识点

    mac下,thrift 安装 mac下,最简单安装thrift的方法:使用brew安装 brew update brew install thrift 验证安装成功:thrift --help 安装出 ...

  7. SpringCloud初体验：六、利用 Sleuth 和 Zipkin 给微服务加上链路监控追踪查看功能

    首先:装上 Zipkin 服务,收集调用链跟踪数据,体验时装在了本机docker上, 方便快捷 docker run -d -p : openzipkin/zipkin 安装后访问地址也是 9411端 ...

  8. MySQL数据库函数

    一:字符串函数: 1.concat(); concat(S1,S2,S3,......Sn); 把传入参数链接 成一个字符串; 2.insert(); insert(str,x,y,insert); ...

  9. python中的with

    看例 """ 需求:不用数据库连接池,实现数据库链接操作 """ class SQLHelper(object): def open(sel ...

  10. Django QueryDict

    QueryDict默认是不可变的,同过将QueryDict对象的_mutable 属性的值设置成True就可以为其赋值.QueryDict对象的urlencode()方法将QueryDict转换为字符 ...