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://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>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>

jQuery - 获取数据属性

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

示例

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

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://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>Click the below button to see the result:</p>
   
   <div id="home" data-author-name="Zara Ali" data-year="2022">
      Just an Example Content
   </div>
   <br>
   <button>Get Attribute</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://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>Click the below button to see the result:</p>
   
   <p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
   <button>Set Attribute</button>
   <p>You can hover the Home link to verify the title before and after the change.</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://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("#home").data("author-name", "Nuha Ali");

         /* Let's get and display changed author name */
         alert( "Changed Name = " + $("#home").data("author-name"));
      });
   });
</script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   
   <div id="home" data-author-name="Zara Ali" data-year="2022">
      Just an Example Content
   </div>
   <br>
   <button>Set Attribute</button>
</body>
</html>

jQuery HTML/CSS 参考

您可以在以下页面获取操作HTML和CSS内容的所有jQuery方法的完整参考：jQuery HTML/CSS 参考。

打印页面