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

最新推荐文章于 2022-07-09 19:14:56 发布

weixin_33866037

最新推荐文章于 2022-07-09 19:14:56 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cebb9ea6fb9a07eec59a922

博客介绍了在jQuery中动态添加data-xx属性的两种方法attr()和data()。attr()方法改变DOM元素的值，data()方法改变jQuery对象的值，其属性值存于内存，可能与视图属性值不一致。强调二者不能混用，从性能考虑，建议用data()进行set和get操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发的过程中，我们可以在html标签中加入自定义属性 data-xx 来存放我们需要的数据，如果我们想动态的添加data-xx属性，在jQuery中有两种方法可以使用 .attr()与 .data()，但他们又存在区别，如果使用不慎，还可能会造成意想不到的bug。

<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()方法存在原理上的区别：

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

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

/*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
复制代码

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

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

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