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.tw/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.tw/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.tw/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.tw/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 參考。

列印頁面