核心概念：元素屬性 vs DOM 屬性

HTML 標籤寫的叫元素屬性 (Attribute)；瀏覽器解析成 DOM 節點後的屬性叫DOM 屬性 (Property)。兩者同步但不等價：

• <img src="a.jpg"> → elem.getAttribute("src") 回傳 "a.jpg"；elem.src 回傳絕對路徑 "https://domain/a.jpg"。
• class (元素) → className (DOM)；for → htmlFor；checked (布林屬性) 在 HTML5 中有無即真假，DOM 屬性為 true/false。

原則：操作表單狀態 (checked, selected, disabled, value) 用 DOM 屬性；操作自訂屬性、ARIA、data-* 用元素屬性。

操作 DOM 屬性 (原生 + jQuery 遍歷)

jQuery 無直接封裝 DOM 屬性方法，利用 .each() 遍歷取得原生元素：

$("img").each(function() {
  // this 是原生 DOM 元素
  console.log(this.src);        // 絕對路徑
  console.log(this.className);  // 類名字串
  this.disabled = true;         // 直接修改 DOM 屬性
});

操作元素屬性：.attr() / .removeAttr() / .prop()

.attr() —— 處理元素屬性 (Attribute)

簽名	說明	回傳值
.attr(name)	取得第一個元素的屬性值	String / undefined
.attr(name, value)	設定所有匹配元素的屬性	jQuery (鏈式)
.attr(object)	批量設定 {name: value, ...}	jQuery
.attr(name, fn)	函數回傳值設定屬性 (this 為元素)	jQuery

// 範例
$("#img").attr("src", "new.jpg");
$("a").attr({ target: "_blank", rel: "noopener" });
$("img").attr("title", function() { return this.alt; });

.prop() —— 處理 DOM 屬性 (Property) [jQuery 1.6+]

必須用 .prop() 的屬性：checked, selected, disabled, readonly, value, tabIndex, selectedIndex, multiple, readyState 等布林/數值屬性。

// 正確
$("input[type=checkbox]").prop("checked", true);
$("option").prop("selected", true);

// 錯誤 (1.6+ 會警告或無效)
$("input").attr("checked", "checked"); // 僅設定元素屬性，不改變勾選狀態

.removeAttr() / .removeProp()

.removeAttr("disabled") 移除元素屬性，對應 DOM 屬性變為 false。.removeProp() 僅刪除 jQuery 內部儲存的屬性，**極少使用**，且不可刪除原生屬性 (會報錯)。

.data() —— HTML5 data-* 屬性專用

讀寫 data-* 自動轉型 (JSON、數字、布林)，並快取在 jQuery 內部，不修改 DOM：

<div id="user" data-id="101" data-role='{"admin":true}' data-active="true"></div>

$("#user").data("id");        // 101 (Number)
$("#user").data("role");      // {admin: true} (Object)
$("#user").data("active");    // true (Boolean)

$("#user").data("newKey", "val"); // 只存在 jQuery 快取，不寫入 DOM
$("#user").attr("data-new-key");  // undefined

CSS 樣式操作完全指南

1. 類別操作 (推薦優先使用類別)

方法	說明
.addClass(className)	新增類別 (支援多個、函數回傳)
.removeClass(className)	移除類別 (不傳參數移除所有)
.toggleClass(className, state)	切換類別，可傳布林強制開關
.hasClass(className)	檢查是否包含類別

// 進階用法
$("li").toggleClass("active", index % 2 === 0); // 依索引決定
$("div").addClass(function(i) { return "item-" + i; }); // 動態類名

2. 行內樣式 .css()

簽名	說明
.css(propertyName)	取得第一個元素**計算後樣式** (含單位 px)
.css(propertyName, value)	設定行內樣式 (數字自動加 px)
.css({prop: val, ...})	批量設定 (駝峰或連字號皆可)
.css(props, fn)	函數回傳值設定

// 取得計算值
var width = $("#box").css("width"); // "300px"
var color = $("#box").css("color"); // "rgb(255, 0, 0)"

// 設定 (自動加 px)
$("#box").css({ left: 100, top: 50, "font-size": "16px" });
$("#box").css("margin-left", "+=20px"); // 相對調整 (1.6+)

// 讀取多個屬性 (1.9+)
var dims = $("#box").css(["width", "height", "margin-top"]); // {width: "300px", ...}

3. 尺寸與座標 (無單位數值，單位 px)

方法	說明	包含內容
.width() / .height()	內容區寬高	content
.innerWidth() / .innerHeight()	+ padding	content + padding
.outerWidth() / .outerHeight()	+ padding + border	content + padding + border
.outerWidth(true) / .outerHeight(true)	+ margin	完整盒模型
.offset()	相對文檔座標 {top, left}	可設定
.position()	相對 offsetParent 座標	唯讀
.scrollTop() / .scrollLeft()	捲軸位置	可設定

實戰模式：表單狀態同步與樣式切換

// 1. 表單全選/反選
$("#checkAll").click(function() {
  $(":checkbox[name='items']").prop("checked", this.checked);
});

// 2. 依據驗證結果切換錯誤樣式
function validate($input) {
  var valid = $input.val().length > 0;
  $input.toggleClass("error", !valid)
        .attr("aria-invalid", !valid);
  return valid;
}

// 3. 動態計算定位 (彈出層、Tooltip)
function showAt($trigger, $popup) {
  var pos = $trigger.offset();
  $popup.css({
    top: pos.top + $trigger.outerHeight(),
    left: pos.left
  }).show();
}

避坑提醒

1. attr vs prop：表單狀態、布林屬性、value 一律用 .prop()。
2. .css() 取值單位：永遠回傳帶單位的計算值 (px, rgb, deg)，不可直接運算，需 parseFloat()。
3. 隱藏元素尺寸為 0：需暫時 css({visibility:"hidden", display:"block"}) 量測。
4. .data() 快取不同步 DOM：.attr("data-x", "new") 不會更新 .data("x")，反之亦然。

清晰區分 Attribute/Property、善用類別而非行內樣式、熟練尺寸座標 API，是寫出穩健 UI 代碼的關鍵。