jQuery中的attr()与data()方法的区别

时间 2019-12-05

原文原文链接

在开发的过程当中，咱们能够在html标签中加入自定义属性 data-xx 来存放咱们须要的数据，若是咱们想动态的添加data-xx属性，在jQuery中有两种方法可使用.data()，但他们又存在区别，若是使用不慎，还可能会形成意想不到的bug。javascript

<html>
<head>
  <meta charset="utf-8">
  <title>测试</title>
  </style>
</head>
<body>
  <div data-id="1234" id="app"></div>

  <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
  <script>
    var getAttr1 = $("#app").attr("data-id");
    var getData1 = $("#app").data("id");
    console.log(getAttr1); //1234
    console.log(getData1); //1234
    /*attr()设置*/
    $("#app").attr("data-id", "5678");
    var getAttr2 = $("#app").attr("data-id");
    var getData2 = $("#app").data("id");
    console.log(getAttr2); //5678
    console.log(getData2); //1234
    /*data()设置  注意要想出如下效果，先要注释掉上边attr()方法的代码*/
    $("#app").data("id","5678");
    var getAttr3 = $("#app").attr("data-id");
    var getData3 = $("#app").data("id");
    console.log(getAttr3); //1234
    console.log(getData3); //5678
  </script>

</body>
</html>
复制代码

注意要想出效果，先要注释掉上边attr()方法的代码 出现上述问题的代码是由于attr()与data()方法存在原理上的区别：css

一、attr()方法原理是改变DOM元素的值。

attr()方法直接改变DOM元素上的属性值:html

/*data()设置*/
  $('#app').attr('data-id', '5678');
  var getAttr2 = $('#app').attr('data-id');
  var getData2 = $('#app').data('id');
  console.log(getAttr2); //5678
  console.log(getData2); //1234
复制代码

二、data()方法原理是jquery对象的值。

data()方法不会直接改变DOM元素上的属性值，咱们观察元素发现：java

/*data()设置*/
$('#app').data('id','5678');
var getAttr3 = $('#app').attr('data-id');
var getData3 = $('#app').data('id');
console.log(getAttr3); //1234
console.log(getData3); //5678
复制代码

jQuery中的attr()与data()方法的区别

一、attr()方法原理是改变DOM元素的值。

二、data()方法原理是jquery对象的值。

因此data()方法因为对象属性值保存在内存中，所以可能和视图里的属性值不一致的状况。

总结：

一、attr()与data()方法不能混用，即不能经过attr()设置属性，再经过data()方法取值。或者不能经过data()设置属性，再经过attr()方法取值。

二、从性能的角度来讲，建议使用data()来进行set和get操做，由于它修改的 Jquey对象的属性值，不会引发额外的DOM操做。