jQuery 属性操作

jQuery 在操作与 HTML 元素相关的各种属性上被广泛使用。每个 HTML 元素都可以有各种标准和自定义属性（即属性），这些属性用于定义该 HTML 元素的特性。

jQuery 提供了一种简便的方式来操作（获取和设置）元素的属性。首先让我们试着了解一些关于 HTML 标准和自定义属性的知识。

标准属性

一些常见的属性如下：

className
tagName
id
href
title
rel
src
style

示例

让我们来看一下以下代码片段，用于表示图像元素的 HTML 标记：

<img id="id" src="image.gif" alt="Image" class="class" title="This is an image"/>

在这个元素的标记中，标记的名称是img，而id，src，alt，class和title的标记表示元素的属性，每个属性由名称和值组成。

自定义`data-*`属性

HTML规范允许我们在DOM元素中添加自定义属性，以提供有关元素的附加细节。这些属性名称以 data- 开头。

示例

以下是一个示例，我们使用 data-copyright 这个自定义属性来提供有关图片版权的信息：

<img data-copyright="Tutorials Point" id="imageid" src="image.gif" alt="Image"/>

jQuery获取标准属性

使用jQuery attr() 方法可以获取匹配的HTML元素的任何标准属性的值。我们将使用jQuery选择器来匹配所需的元素，然后应用 attr() 方法来获取元素的属性值。

如果给定的选择器匹配多个元素，则返回值的列表，您可以使用jQuery数组方法进行迭代。

示例

以下是一个使用jQuery程序获取锚点<a>元素的href和title属性的示例：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.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>点击下面的按钮查看结果：</p>

   <p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
   <button>获取属性</button>
</body>
</html>

jQuery – 获取数据属性

jQuery data() 方法用于从匹配的HTML元素中获取任何自定义数据属性的值。我们将使用 jQuery选择器 来匹配所需的元素，然后我们将应用 data() 方法来获取元素的属性值。

示例

以下是一个使用jQuery获取<div>元素的author-name和year属性的程序：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.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>点击下面的按钮查看结果：</p>

   <div id="home" data-author-name="Zara Ali" data-year="2022">
      Just an Example Content
   </div>
   <br>
   <button>获取属性</button>
</body>
</html>

jQuery – 设置标准属性

jQuery attr(name, value) 方法用于设置匹配的 HTML 元素的任何标准属性的值。我们将使用 jQuery 选择器 来匹配所需的元素，然后应用 attr(key, value) 方法来设置元素的属性值。

如果指定的选择器匹配多个元素，则会为所有匹配的元素设置属性值。

示例

下面是一个使用 jQuery 设置锚点 <a> 元素的 title 属性的示例：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("button").click(function(){
          $("#home").attr("title", "New Anchor Title"); /* Let's get and display changed title */ alert( "Changed Title = " +$ ("#home").attr("title"));
      });
   });
</script>
</head>
<body>
   <p>点击下面的按钮以查看结果：</p>

   <p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
   <button>设置属性</button>
   <p>在更改前后，您可以将鼠标悬停在“Home”链接上以验证标题。</p>
</body>
</html>

jQuery – 设置自定义属性

jQuery的 data(name, value) 方法用于设置匹配的HTML元素的任何自定义属性的值。我们将使用 jQuery选择器 匹配所需的元素，然后应用 attr(key, value) 方法来设置元素的属性值。

如果给定的选择器匹配多个元素，则会为所有匹配的元素设置属性的值。

示例

以下是一个使用jQuery设置<div>元素的author-name属性的程序：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("button").click(function(){
          $("#home").data("author-name", "Nuha Ali"); /* 让我们获取并显示更改后的作者名字 */ alert( "Changed Name = " +$ ("#home").data("author-name"));
      });
   });
</script>
</head>
<body>
   <p>点击下面的按钮查看结果：</p>

   <div id="home" data-author-name="Zara Ali" data-year="2022">
      Just an Example Content
   </div>
   <br>
   <button>设置属性</button>
</body>
</html>