attr()全面解析

一、attr()概述

在jQuery中，attr()函數是非常常用的函數之一，它用於獲取或設置HTML元素的屬性值，可以操作HTML元素的標準屬性和自定義屬性。

在使用attr()函數時，需要注意以下幾點：

• 只有指定屬性名才能獲取或設置屬性值，如果屬性名不存在，則返回undefined。
• 可以同時設置多個屬性的值，需要將屬性名及屬性值組成一個對象作為參數傳入。

//獲取title屬性的值
title = $("div").attr("title");
//設置title和class屬性的值
$("div").attr({
    "title": "New Title",
    "class": "new-class"
});

二、獲取元素屬性

attr()函數常用於獲取元素的屬性值，例如獲取input元素的value屬性值。

1. 獲取標準屬性

標準的HTML屬性可以使用attr()函數來獲取，例如獲取input元素的value屬性值：

//獲取input元素的value屬性值
var value = $("input").attr("value");

2. 獲取自定義屬性

自定義屬性也可以使用attr()函數來獲取，在HTML標籤中添加data-前綴的自定義屬性：

//獲取div元素的data-id屬性值
var id = $("div").attr("data-id");

3. 獲取HTML屬性

在HTML屬性中涉及到特殊字符和空格，需要使用原生屬性方法getAttribute()來獲取，例如獲取input元素的type屬性值：

//獲取input元素的type屬性值
var type = $("input")[0].getAttribute("type");

三、設置元素屬性

使用attr()函數設置元素的屬性值，可以設置單個或多個屬性的值。

1. 設置單個屬性

可以設置單個HTML元素的屬性值，例如設置input元素的value屬性值：

//設置input元素的value屬性值
$("input").attr("value", "New Value");

2. 設置多個屬性

可以設置多個HTML元素的屬性值，需要按照屬性名及屬性值組成一個對象傳入attr()函數，例如同時設置input元素的value和checked屬性值：

//同時設置input元素的value和checked屬性值
$("input").attr({
    "value": "New Value",
    "checked": true
});

3. 使用函數設置屬性

可以使用函數來設置元素的屬性值，函數的入參為元素的index和原始屬性值，例如使input元素的value屬性值始終為大寫：

//使用函數設置input元素的value屬性值
$("input").attr("value", function(index, oldValue) {
    return oldValue.toUpperCase();
});

四、刪除元素屬性

當不再需要某個HTML元素的屬性時，可以使用removeAttr()函數來刪除該元素的屬性，例如刪除input元素的disabled屬性：

//刪除input元素的disabled屬性
$("input").removeAttr("disabled");

五、總結

attr()函數是jQuery中十分常用的函數之一，可以用於獲取或設置HTML元素的屬性值，包括標準屬性和自定義屬性，也可以進行屬性值的刪除，使用時需要注意不同類型的屬性獲取和設置方法的不同。