4.4 元素中的存储自定义数据
data([key],[value])
key (String) 存储的数据名.key,value (String,Any)key:存储的数据名value:将要存储的任意数据obj (object) 为集合中的每个元素添加键/值对对象数据
data() 方法语义(1)
使用jQuery方法为集合中的所有元素添加传递的数据。
data([key],[value])
- 不区分驼峰命名法的变量名字大小写,与虚线和横线链接的名字一样对待
$('.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对象。
$.data()
方法存储: $.data(document.getElementById('book'),'price',10);//使用data()这样写$('#book').data('price',10);
data([name]) 方法语义(3)
使用指定的名称来查询存储的数据或者HTML5 data-* 属性。返回 返回查找的数据,没找到返回
data([name])
undefined
data()
方法作为读取器的过程:
data-*
属性。一旦找到 data-*
值,此方法会把这个值存储在jQuery管理的存储区。因此,即使使用 attr()
修改了属性值,任意后续的方法调用也不会再从属性中查找数据值,因为这些数据已经存储在jQuery内存中。弱没有找到,返回 undefined。 例子:
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