jQuery数据篇-底层数据方法

jQuery.data( element, key, value )

存储与指定元素关联的任何数据，并且返回设置的值。
jQuery.data(element,key,value)
element
类型是元素。
和该数据关联的DOM元素。
key
类型是字符串。
被设置的数据的字符串命名。
value
类型是对象。
新的数据值。

Note：这是一个比较底层的方法，一个更方便的方法是.data()也是可以的。

jQuery.data()方法允许我们在DOM元素上附加任何类型的data数据，在避免循环引用的方式下是安全的，才不会引起内存泄漏。jQuery保证使用当jQuery方法移除DOM元素的时候，data也会被移除，并且也包括当用户离开了页面的时候。

我们为一个简单元素设置一些不同的值然后获取他们：

jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');

Note：这个方法现在还不提供在XML文档上设置data的跨平台支持，因为IE现在不支持通过可设置和获取布尔值（expando）的属性来附加数据。

jQuery.data( element, key )

返回通过jQuery.data(element,name,value)方法设置的被命名的data的值，或者该元素存储的所有data
jQuery.data(element,key)
jQuery.data(element)
element
类型是元素。
查询数据的DOM元素
key
类型是字符串。
数据存储的名字。

Note：这个是底层的方法，更方便的.data()方法是建议使用的。

关于HTML5的data-*属性：这个底层的方法不能够获取data-*属性除非.data()方法已经获取了他们。

这个jQuery.data()方法允许我们在DOM元素上附加任何类型的data数据，在避免循环引用的方式下是安全的，才不会引起内存泄漏。
我们可以在简单元素上一次获取一个值，或者一组值：

alert(jQuery.data( document.body, 'foo' ));//foo
alert(jQuery.data( document.body ));//all data

上面的是alert 那些被设置在body元素上的data值。如果该元素上没有设置值，一个空串会被返回。

调用.jQuery.data(element)方法时，获取所有元素上关联的作为Javascript对象的值。注意，jQuery自己使用这个方法用来内部存储数据，比如event handlers,因此不要以为它只是用来存储你自己代码中的数据（意思是说也用来处理jQuery底层的数据）。

jQuery.hasData( element )

判断该element元素是否存在关联的data数据
jQuery.hasData(element)
element
类型是元素。
检查数据的DOM元素。

这个jQuery.hasData()方法用来提供一种方式来判断一个元素现在是否存在被jQuery.data()设置过的值。如果一个元素没有被关联data（没有data对象或者data对象为空），这个方法返回false;不然就返回true.

这个jQuery.hasData(element)的主要的亮点在于他不会创建和关联一个data对象到指定元素上，如果现在不存的话。以次相反的是，jQuery.data(element)经常给调用者返回一个data对象，如果现在不存在data对象，他就会创建一个。

注意：jQuery的事件处理系统使用jQuery data的API来存储event handlers。因此，在一个元素上绑定一个事件时，使用 .on(), .bind(), .live(), .delegate()方法，或者其中的事件方法之一，也是在一个元素上关联一个data对象。

jQuery.removeData( element [, name] )

移除先前存储的数据
jQuery.removeData(element[,name])
element
类型是元素。
移除数据的DOM元素。
name
类型是字符串。
移除的那个数据的字符串名字。

Note：这是一个底层的方法，你可以使用.removeData()方法代替。 jQuery.removeData()方法允许我们移除被jQuery.data()设置的值。当调用关键字的名字时，jQuery.removeData()删除那个指定的值；当没有使用参数时，所有的值都会被删除。

<script>//存储然后获取div元素的值
var div = $("div")[0];
    jQuery.data(div, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(div, "test").first);
    $("span:last").text(jQuery.data(div, "test").last);
</script>

<script>//获取元素被以"blah"命名存储的data
$("button").click(function(e) {
  var value, div = $("div")[0];

  switch ($("button").index(this)) {
    case 0 :
      value = jQuery.data(div, "blah");
      break;
    case 1 :
      jQuery.data(div, "blah", "hello");
      value = "Stored!";
      break;
    case 2 :
      jQuery.data(div, "blah", 86);
      value = "Stored!";
      break;
    case 3 :
      jQuery.removeData(div, "blah");
      value = "Removed!";
      break;
  }

  $("span").text("" + value);
});
</script>

<script>//为元素设置data并查看hashData的结果
var $p = jQuery("p"), p = $p[0];
$p.append(jQuery.hasData(p)+" "); /* false */
$.data(p, "testing", 123);
$p.append(jQuery.hasData(p)+" "); /* true*/

$.removeData(p, "testing");
$p.append(jQuery.hasData(p)+" "); /* false */
$p.on('click', function() {});
$p.append(jQuery.hasData(p)+" "); /* true */

$p.off('click');
$p.append(jQuery.hasData(p)+" "); /* false */
</script>

<script>//为两个名字设置data，然后移除其中之一
var div = $("div")[0];
$("span:eq(0)").text("" + $("div").data("test1"));
jQuery.data(div, "test1", "VALUE-1");
jQuery.data(div, "test2", "VALUE-2");
$("span:eq(1)").text("" + jQuery.data(div, "test1"));
jQuery.removeData(div, "test1");
$("span:eq(2)").text("" + jQuery.data(div, "test1"));
$("span:eq(3)").text("" + jQuery.data(div, "test2"));
</script>