4.4 元素中的存储自定义数据

data([key],[value])

在元素上存放数据,返回jQuery对象。

key (String)
存储的数据名. key,value (String,Any)
key:存储的数据名
value:将要存储的任意数据 obj (object)
为集合中的每个元素添加键/值对对象数据

data() 方法语义(1)

data([key],[value])

使用jQuery方法为集合中的所有元素添加传递的数据。

  • 不区分驼峰命名法的变量名字大小写,与虚线和横线链接的名字一样对待

    $('.class').data('lastValue') 等价于 $('.class').data('last-value')
  • attr() 方法保存字符串不同,data() 可以保存数据的类型。

例子,使用 attr()data() 方法会获取不同的值

<input id="name" name="name" data-mandatory="true" />

console.log(typeof $('#name').attr('data-mandatory')); //string
console.log(typeof $('#name').data('mandatory')); //boolean

undefined不会作为一个值对待,但仍返回一个Jquery对象。

data() 方法语义(2)

data(object)

为集合中每个元素添加键-值对对象数据。

jQuery.data()(或等价$.data())属于低级别方法,是DOM元素操作,而不是jQuery对象。

便于理解他们的不同,假设有个ID 为 book 的元素,想使用 $.data() 方法存储:

$.data(document.getElementById('book'),'price',10);
//使用data()这样写
$('#book').data('price',10);

data([name]) 方法语义(3)

data([name])

使用指定的名称来查询存储的数据或者HTML5 data-* 属性。

返回

返回查找的数据,没找到返回 undefined

data()方法作为读取器的过程:

如果没有找到之前存储的数据,会使用给定名字查找HTML元素的 data-* 属性。一旦找到 data-* 值,此方法会把这个值存储在jQuery管理的存储区。因此,即使使用 attr() 修改了属性值,任意后续的方法调用也不会再从属性中查找数据值,因为这些数据已经存储在jQuery内存中。弱没有找到,返回 undefined。

例子:

<input id="level1" type="text" value="I'm a text!" data-custom="foo" />
<script>
console.log($('#level1').data('custom')); //foo
console.log($('#level1').attr('data-custom')); //foo $('#level1').attr('data-custom', 'new value'); //更新属性值,但是没有更新$('#level1').data('custom')的值 console.log($('#level1').data('custom')); //foo
console.log($('#level1').attr('data-custom')); //new value //这里来更新data
$('#level1').data('custom', 'new value'); //更新 $('#level1').data('custom')的值
console.log($('#level1').data('custom')); //这里是 :new value
</script>

removeData() 方法语法

removeData([name|list])
在元素上移除存放的数据,参数可以是数组,也可以是以空格分割的名称。没有参数,表示删除所有值。 [name] String
存储的数据名 [list] Array,String
移除数组或以空格分开的字符串

例子:

删除所有

$('#name').removeData();

删除foo和bar数据,

$('#name').removeData(['foo','bar']);

或者

$('#name').removeData('foo bar');

jQuery.hasData() 方法语法

`jQuery.hasData(element)`
确定元素是否包含相关的数据。 参数
element(Element) 要检查的DOM元素

例子:

$.hasData(document.getElementById('name')); // 返回false,表明此元素没有存储数据
$.data(document.getElementById('name'),'count',10);
$.hasData(document.getElementById('name')); //返回true

4.自定义数据《jquery实战》的更多相关文章

  1. jQuery 实战读书笔记之第四章:使用特性、属性和数据

    使用属性 /* 每个元素都有一或多个特性,,这些特性的用途是给出相应元素或其内容的附加信息.(出自 JavaScript 高级程序设计) */ /* 特性是固有的 JavaScript 对象 属性指的 ...

  2. 使用 data-* 属性来嵌入自定义数据

    1. HTML 实例 <ul> <li data-animal-type="bird">Owl</li> <li data-animal- ...

  3. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  4. jquery实战第一讲---概述及其入门实例

    就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒, ...

  5. JQuery实战---初识JQuery+入门实例

    JQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说 ...

  6. 大数据开发实战:Hive表DDL和DML

    1.Hive 表 DDL 1.1.创建表 Hive中创建表的完整语法如下: CREATE [EXTERNAL] TABLE [IF NOT EXISTS]  table_name [ (col_nam ...

  7. 大数据开发实战:MapReduce内部原理实践

    下面结合具体的例子详述MapReduce的工作原理和过程. 以统计一个大文件中各个单词的出现次数为例来讲述,假设本文用到输入文件有以下两个: 文件1: big data offline data on ...

  8. 判断数据库内容,在页面显示自定义数据case when

    判断数据库内容,在页面显示自定义数据 case when...then ...else...end 比如:数据库内容是这样: 通过sql语句判断,数据库的name字段,内容是月桂的,显示嫦娥,其他的显 ...

  9. 王家林的“云计算分布式大数据Hadoop实战高手之路---从零开始”的第十一讲Hadoop图文训练课程:MapReduce的原理机制和流程图剖析

    这一讲我们主要剖析MapReduce的原理机制和流程. “云计算分布式大数据Hadoop实战高手之路”之完整发布目录 云计算分布式大数据实战技术Hadoop交流群:312494188,每天都会在群中发 ...

随机推荐

  1. BZOJ2442 Usaco2011 Open修剪草坪(动态规划+单调队列)

    显然可以dp.显然可以单调队列优化一下. #include<iostream> #include<cstdio> #include<cmath> #include& ...

  2. P3000 [USACO10DEC]牛的健美操Cow Calisthenics

    题目描述 Farmer John continues his never-ending quest to keep the cows fit by having them exercise on va ...

  3. VS2010 代码突然改变字体 解决办法

    sfsfsddffs dffsfsfsfsf 如上,第一行是突然变成宽体的字体,第二行是恢复后的字体,方法就是: shift+空格键,一起按就会在这两种字体之间变换~

  4. 洛谷乐多赛 yyy loves Maths VI (mode)

    题目描述 他让redbag找众数 他还特意表示,这个众数出现次数超过了一半 一共n个数,而且保证有 n<=2000000 而且每个数<2^31-1 时间限制 1s 空间限制 3.5M(你没 ...

  5. 最小化安装k8s

    最小化安装k8s Nick_4438 关注 2018.07.11 10:40* 字数 670 阅读 0评论 0喜欢 0 1.前言 之前写过一篇二进制手工安装k8s的文章,过程复杂,搞了多日才安装成功. ...

  6. node爬虫入门

    爬虫其实就是模仿浏览器访问页面,然后把页面保存起来备用. 爬虫的方法,直接上代码: function getUrl(url,success,error){ let urlObj = urlParser ...

  7. JAVA-Servlet内容

    Servlet重定向 HttpServletResponse接口的sendRedirect()方法可以用于将响应重定向到另一个资源,资源可能是servlet,jsp或html文件. 它接受相对和绝对U ...

  8. Linux 基础知识(一) shell的&&和|| 简单使用

    shell 在执行某个命令的时候,会返回一个返回值,该返回值保存在 shell 变量 $? 中.当 $? == 0 时,表示执行成功:当 $? == 1 时,表示执行失败.  有时候,下一条命令依赖前 ...

  9. LVS原理详解(3种工作模式及8种调度算法)

    2017年1月12日, 星期四 LVS原理详解(3种工作模式及8种调度算法)   LVS原理详解及部署之二:LVS原理详解(3种工作方式8种调度算法) 作者:woshiliwentong  发布日期: ...

  10. php设计模式之注册树模式

    什么是注册树模式?[全局共享和交换对象] 注册树模式当然也叫注册模式,注册器模式.注册树模式通过将对象实例注册到一棵全局的对象树上,需要的时候从对象树上采摘的模式设计方法.   这让我想起了小时候买糖 ...