jQuery.data用于处理标签数据绑定

使用方法

1.赋值

a.使用js
$(‘’).data(key,value); 一次赋值一个，value可以是任意js数据类型,包括Array 或者 Object
$(‘’).data(obj);一次赋值多个或者更新多个或者新增多个

b.使用HTML标签属性
利用H5 标签的’data-‘属性添加键值对

1	<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

2.取值
$(‘’).data(key);获取key对应的数据值
$(‘’).data(); 一次性获取绑定在$(‘’)上的所有数据对象

3.删除
$(‘’).removeData(key);

注意事项

a. <object>（除非是Flash插件），<applet> 或 <embed>> 三个标签不能使用.data方法

b. 通过”data-“属性建立的标签数据，获取时注意
data-last-value=”43” ==> $(‘div’).data(‘lastValue’)
data-options=’{“name”:”John”}’ ==> $(“div”).data(“options”).name ->John
取到的值会自动转化为js的数据类型

c. $(‘’).data()被赋值到js变量A后，之后对$(‘’)进行数据处理，A的内容会进行同步变动，
如果更改A的内容，$(‘’).data()也会同步更改
但如果$(‘’).data()的值被用到了html里面,HTML里面的值不会变动

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div>
    The values stored were
    <span></span>
    and
    <span></span>
  </div>
<script>
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
//页面输出 The values stored were 16 and pizza!
  var temp = $("div").data();
  console.log(temp);
  $("div").data({ first: 25, last: "pizza!" ,test:{last:'fruit'}});
  // $("span:first").text($("div").data("first"));
  // $("span:last").text($("div").data("test").last); 
  //如果没有以上两句页面不会发生任何变化，添加后
  //页面输出 The values stored were 25 and fruit
  console.log(temp);//temp与$("div").data()保持一致
  console.log($("div").data())
  temp.child = 'Jack';
  console.log($("div").data()) //增加一项{child: "Jack"}
  $("div").removeData("blah");//删除没有的属性不会报错
  $("div").removeData("child");
   console.log(temp);
</script>
</body>
</html>

JQuery.data源码解析