attr()是jQuery中用於獲取或設置HTML元素屬性值的核心方法。它簡化了原生JavaScript中getAttribute()和setAttribute()的操作，讓屬性操作變得簡單高效。

獲取屬性值的基本用法

語法：

$(selector).attr(attributeName)

説明：

  • selector：jQuery選擇器，用於選取需要操作的元素
  • attributeName：要獲取的屬性名稱
  • 該方法只返回第一個匹配元素的屬性值

代碼例子

示例1：獲取元素的title屬性值

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>attr()方法示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .highlight { background-color: yellow; }
  </style>
</head>
<body>
  <p title="你最喜歡的水果是。">你最喜歡的水果是？</p>
  <ul>
    <li title="蘋果汁">蘋果</li>
    <li title="橘子汁" value="123">橘子</li>
    <li title="菠蘿汁">菠蘿</li>
  </ul>
  
  <button id="btnGetTitle">獲取第一個li的title</button>
  <button id="btnGetValue">獲取第二個li的value</button>
  
  <script>
    $(document).ready(function() {
      // 獲取第一個li的title屬性值
      $("#btnGetTitle").click(function() {
        var title = $("ul li").attr("title");
        alert("第一個li的title值: " + title);
      });
      
      // 獲取第二個li的value屬性值
      $("#btnGetValue").click(function() {
        var value = $("ul li:eq(1)").attr("value");
        alert("第二個li的value值: " + value);
      });
    });
  </script>
</body>
</html>

運行結果：

  • 點擊"獲取第一個li的title"按鈕，彈出"蘋果汁"
  • 點擊"獲取第二個li的value"按鈕，彈出"123"

示例2：獲取class屬性值

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>獲取class屬性值</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="main-content active">這是一個示例div</div>
  <button id="btnGetClass">獲取div的class值</button>
  
  <script>
    $(document).ready(function() {
      $("#btnGetClass").click(function() {
        var classValue = $("div").attr("class");
        alert("div的class屬性值: " + classValue);
      });
    });
  </script>
</body>
</html>

運行結果：彈出"main-content active"

示例3：獲取元素的其他屬性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>獲取其他屬性值</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <img src="example.jpg" alt="示例圖片" width="200" height="150">
  <button id="btnGetSrc">獲取圖片的src</button>
  <button id="btnGetAlt">獲取圖片的alt</button>
  
  <script>
    $(document).ready(function() {
      $("#btnGetSrc").click(function() {
        var src = $("img").attr("src");
        alert("圖片的src屬性值: " + src);
      });
      
      $("#btnGetAlt").click(function() {
        var alt = $("img").attr("alt");
        alert("圖片的alt屬性值: " + alt);
      });
    });
  </script>
</body>
</html>

運行結果：

  • 點擊"獲取圖片的src"按鈕，彈出"example.jpg"
  • 點擊"獲取圖片的alt"按鈕，彈出"示例圖片"

注意事項

  1. 只獲取第一個匹配元素：attr()方法只返回第一個匹配元素的屬性值，如果要獲取所有匹配元素的屬性，需要使用循環。
  2. 未定義屬性返回undefined：如果元素沒有指定的屬性，attr()會返回undefined。
  3. class屬性的處理：獲取class屬性時，可以直接使用attr("class")，而不是attr("className")。雖然在設置class屬性時，可以使用attr("class", "newClass")或attr("className", "newClass")。
  4. 與prop()的區別：對於表單元素的布爾屬性（如checked、selected、disabled等），建議使用prop()方法，而不是attr()。

實際應用示例

// 檢查一個複選框是否被選中
var isChecked = $("#myCheckbox").attr("checked");
// 但更推薦使用prop()方法
var isChecked = $("#myCheckbox").prop("checked");

// 獲取鏈接的href
var href = $("a").attr("href");

// 獲取輸入框的value
var inputValue = $("input[type='text']").attr("value");
// 但更推薦使用val()方法
var inputValue = $("input[type='text']").val();