4.自定义数据《jquery实战》
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实战》的更多相关文章
- jQuery 实战读书笔记之第四章:使用特性、属性和数据
使用属性 /* 每个元素都有一或多个特性,,这些特性的用途是给出相应元素或其内容的附加信息.(出自 JavaScript 高级程序设计) */ /* 特性是固有的 JavaScript 对象 属性指的 ...
- 使用 data-* 属性来嵌入自定义数据
1. HTML 实例 <ul> <li data-animal-type="bird">Owl</li> <li data-animal- ...
- jquery实战---标签页效果
在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...
- jquery实战第一讲---概述及其入门实例
就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒, ...
- JQuery实战---初识JQuery+入门实例
JQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说 ...
- 大数据开发实战:Hive表DDL和DML
1.Hive 表 DDL 1.1.创建表 Hive中创建表的完整语法如下: CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [ (col_nam ...
- 大数据开发实战:MapReduce内部原理实践
下面结合具体的例子详述MapReduce的工作原理和过程. 以统计一个大文件中各个单词的出现次数为例来讲述,假设本文用到输入文件有以下两个: 文件1: big data offline data on ...
- 判断数据库内容,在页面显示自定义数据case when
判断数据库内容,在页面显示自定义数据 case when...then ...else...end 比如:数据库内容是这样: 通过sql语句判断,数据库的name字段,内容是月桂的,显示嫦娥,其他的显 ...
- 王家林的“云计算分布式大数据Hadoop实战高手之路---从零开始”的第十一讲Hadoop图文训练课程:MapReduce的原理机制和流程图剖析
这一讲我们主要剖析MapReduce的原理机制和流程. “云计算分布式大数据Hadoop实战高手之路”之完整发布目录 云计算分布式大数据实战技术Hadoop交流群:312494188,每天都会在群中发 ...
随机推荐
- Spring注解开发简要步骤
1.除spring基本包外还需要下载AOP包 spring-aop-4.2.4.RELEASE.jar 2.导入约束(最后两行) <beans xmlns="http://www.sp ...
- css雪碧(CSS Sprite)和css3过渡效果综合应用
在网页中我们经常可以看到,有些图片在鼠标经过的时候,有一个上下或左右的滑动效果,很实用页很方便,今天正好用到,拿来和大家分享一下,有什么不对或意见欢迎指正. html部分如下,这里本来打算用jq来着, ...
- luogu1328 [NOIp2014]生活大爆炸版石头剪刀布 (模拟)
#include<bits/stdc++.h> #define pa pair<int,int> #define CLR(a,x) memset(a,x,sizeof(a)) ...
- 小贾漫谈——Java反射
一.Class的API 二.测试使用的JavaBean class Admin{ //字段 public String userName; public String pwd; private int ...
- np.random.choice方法
np.random.choice方法 觉得有用的话,欢迎一起讨论相互学习~Follow Me def choice(a, size=None, replace=True, p=None) 表示从a中随 ...
- vue控制台报错
1. TypeError: Cannot read property '_withTask' of undefined 这是因为引用找不到导致的,比如: <button @click='aaa' ...
- 流媒体技术学习笔记之(九)减少VLC 延迟的方法
之前写过一篇关于在Linux平台上编译Android平台上VLC播放器源代码的文章,vlc这款播放器非常优秀而且是开源的,它的核心是开源视频编解码库ffmpeg.而且这款播放器还支持RTSP协议,这个 ...
- 测试浏览器是否支持某个CSS属性
花了几个小时写了个API,为了兼容多种用法和测试花了不少时间,求鞭打.嘲笑和建议. <!DOCTYPE HTML> <html lang="zh-CN"> ...
- AngularJs -- 模 块
在JavaScript中,将函数代码全部定义在全局命名空间中绝对不是什么好主意,这样做会导致冲突从而是调试变得非常困难,浪费宝贵的时间. 上一章介绍数据绑定时,就是写在全局命名空间中定义的函数. 在A ...
- C# 文件Copy
文件Copy有以下几种方法: 1.Copy string sourceFile = @"c:\temp\New Text Document.txt"; string destina ...