jQuery-data方法

HTML:

<ul>
  <li data-person='{"name":"zhangsan1"}'>zhangsan1</li>

</ul>
  <button onclick="changePerson()">click me to change</button>

JS:

var $el = $("li:first");
  var p = $el.data("person");
  console.log($el.data("person").name);
  console.log($el.attr("data-person"));
  p.name="zhang san   new";
  console.log($el.data("person").name);
  console.log($el.attr("data-person"));

点击button，console的结果：

"zhangsan1"
"{\"name\":\"zhangsan1\"}"
"zhang san   new"
"{\"name\":\"zhangsan1\"}"

data方法获取dom上埋的数据，埋得数据是对象和数组，那么通过data方法，获取的也是数组和对象，而在js中array和object都是引用类型，那么当把data方法的返回值赋值给其他变量，其他变量对内容的修改都会影响到原dom对象上的存储的数据，

特别注意的一点就是，jquery是在内存中开辟了一片空间，缓存了jquery对象（ELEMENT_NODE 和 DOCUMENT_NODE）节点上的数据（jquery的data原理详情戳这里），

data-属性和data方法没有很多联系，只有在我们通过data方法取$el上的某个key对应的值，然后jquery发现在其内存中，该节点的data中没有该key，那么就会通过dataAttr去dom节点上取一次该key对应的值，然后缓存起来，以后我们取的都是这个值。同理data方法set一个值的时候，也只是在jquery对象上缓存了这个值，并没有改变dom节点上，data-属性的值。从上面我们通过attr方法获取埋入的值就可以看出