jQuery Data 与 Attr 的区别?

htmlweb developmentfront end technology更新于 2024/7/18 7:08:17

jQuery 中的 data() 方法用于从匹配的 HTML 元素中获取任何自定义数据属性的值。

jQuery attr() 方法用于从匹配的 HTML 元素中获取任何标准属性的值。

让我们看看它们的区别 -

.attr() 方法包含 DOM 操作，可以从当前 HTML 中获取数据，如果用于更改属性值，则更改 HTML 代码。
.data() 方法不包含 DOM 操作，从内部缓存中获取数据，如果调用 set 方法，则会更改该数据。
.data() 方法需要前缀"data-"才能工作，而 .attr() 则不需要。
.data() 比 .attr() 更具优势因为变量存储在节点对象中，所以我们可以存储复杂对象，而不仅仅是字符串值。
当我们需要获取/设置与应用程序当前状态相关的数据时，.data() 是更好的数据存储方式。
当处理 DOM 树的变化时，.attr() 调用更佳。

现在让我们看看 jQuery 中的 .$data() 和 $.attr() 是什么。

jQuery 中的 $.data()

jQuery data() 方法用于从匹配的 HTML 元素中获取任何自定义数据属性的值。让我们看一个获取 <div> 元素的 author-name 和 year 属性的示例 -

<!doctype html>
<html>
<head>
   <title>jQuery data()</title>
   <script src="https://www.cainiaomax.com/jquery/jquery-3.6.0.js"></script>
   <script>
      $(document).ready(function() {
         $("button").click(function(){
            alert( "Author = " + $("#home").data("author-name"));
            alert( "Year = " + $("#home").data("year"));
         });
      });
   </script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   <div id="home" data-author-name="Amit" data-year="2022">
      Demo
   </div>
   <br>
   <button>Get Attribute</button>
</body>
</html>

输出

点击获取属性，名称将显示在警报框中 -

现在，点击警报框确定。年份将显示 -

jQuery 中的 $.attr()

jQuery attr() 方法用于从匹配的 HTML 元素中获取任何标准属性的值。

让我们看一个获取锚点 <a> 元素的 href 和 title 属性的示例 -

<!doctype html>
<html>
<head>
<title> jQuery attr() Example</title>
<script src="https://www.cainiaomax.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         alert( "Href = " + $("#home").attr("href"));
         alert( "Title = " + $("#home").attr("title"));
      });
   });
</script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   
   <p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
   <button>Get Attribute</button>
</body>
</html>