博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
4.自定义数据《jquery实战》
阅读量:6949 次
发布时间:2019-06-27

本文共 1618 字,大约阅读时间需要 5 分钟。

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() 方法会获取不同的值

console.log(typeof $('#name').attr('data-mandatory')); //stringconsole.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。
data读取器的过程

例子:

      

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

转载地址:http://zokil.baihongyu.com/

你可能感兴趣的文章
控制台读写
查看>>
LVS+keepalived负载均衡实战
查看>>
使用 IntraWeb (17) - 基本控件之 TIWRadioButton、TIWRadioGroup、TIWCheckBox
查看>>
KVM虚拟化搭建及其KVM中LVM扩容
查看>>
管理磁盘和文件系统
查看>>
CSS解决高度自适应问题
查看>>
鼠标css样式:cursor
查看>>
ubuntu12.04——samba中的windows、linux用户名关系
查看>>
ruby on rails 多图上传
查看>>
MySQL 的 LIKE 查詢區分大小寫
查看>>
Unity HoloLens开发配置
查看>>
vim剪贴板小结
查看>>
Thinkpad ACCESS CONNECTIONS异常解决
查看>>
各行业对邮件服务器需求及解决方案
查看>>
linux软件管理与使用
查看>>
qt 使用样式设置渐变色背景
查看>>
ubuntu16.04 安装 操作 redis
查看>>
IIS启动网站出错的几个解决方法
查看>>
mysql对vachar排序的问题
查看>>
ASCII和Unicode编码
查看>>