技術文章 » jQuery attr()方法獲取和設定屬性

jQuery attr()方法獲取和設定屬性

2020-07-16 10:05:24
屬性操作，指的是使用 jQuery 來操作一個元素的 HTML 屬性。注意，這裡說的屬性操作，指的是 HTML 屬性，而不是 CSS 屬性。

像下面有一個 input 元素的屬性操作，指的就是操作它的 id、type、value 等，其他元素也類似。 
<input id="btn" type="button" value="提交"/>

在 jQuery 中，對於 HTML 屬性的操作共有以下4種。
  • 獲取屬性。
  • 設定屬性。
  • 刪除屬性。
  • prop() 方法。

本節教學先來介紹前 2 種，後兩種下節介紹。

jQuery attr()方法獲取屬性

在 jQuery 中，我們可以使用 attr() 方法來獲取某一個元素的 HTML 屬性值。

語法：

$().attr("屬性名")

獲取某個元素的 HTML 屬性值，一般都是通過屬性名來找到該屬性對應的值。

舉例： 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn_src").click(function () {
                alert($("img").attr("src"));
            });
            $("#btn_alt").click(function () {
                alert($("img").attr("alt"));
            });
        })
    </script>
</head>
<body>
    <img src="img/jquery.png" alt="jquery標誌"/><br />
    <input id="btn_src" type="button" value="獲取src屬性值"/>
    <input id="btn_alt" type="button" value="獲取alt屬性值"/>
</body>
</html>
預覽效果如圖 1 所示。
獲取屬性的效果
圖 1：獲取屬性的效果