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