一、概述

某些情況下，attr() 與 prop() 取到的結果是一致的，都可以獲取到屬性的值。直到踩了一些坑才意識到，應該按照規範使用才能避免不必要的麻煩.

儘管在web程式設計都被翻譯成“屬性”，但是兩者是有所區別的，否則也不會有attr()和prop()兩個函式的出現。

如果你有到官網檢視，你可能會說，這**什麼鬼，完全一頭霧水。

下面是在jQuery翻譯文件中找到的還算“比較清楚”的描述：

Attributes vs. Properties

attributes和properties之間的差異在特定情況下是很重要。jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值時，會返回 property 的值，這就導致了結果的不一致。從 jQuery 1.6 開始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

1.1attribute

此屬性在web程式設計中，一般是標籤中的屬性，例如的id屬性，它僅僅是一個描述，就好比說張三長的很帥，具有兩隻眼睛一個鼻子一樣。attribute屬性值只能夠是字串。

1.2property

一般指的物件中的屬性，也就是使用點號(.)訪問的屬性，它明確的指向記憶體中的一個記憶體地址中存放的內容。它是真正程式設計中所說的屬性。property屬性值可以是各種型別的。

1.3兩者關係(relation)

javascript是用來操作DOM，DOM物件不但具有HTML特性也繼承了Object物件的特性。從上面的介紹中，我們可以知道，Object是使用Property的，而attribute屬性則是HTML使用，雖然這兩種屬性被繼承到同一個物件身上，但是並不衝突，有些HTML元素內建的屬性會被對映到property，例如id和class，不過由於class是ECMAScript中的保留字，所以被對映到className這個property上。

二、演示

在Document中定義兩個標籤：

<input type=​"checkbox" id=​"checked" checked=​"checked"  data-name="langkye">​
<input type=​"checkbox" id=​"no-checked"  data-name="langkye">​

• 通過操作不同的屬性，比較兩者區別

  1. checked

$("#checked")[0];  // <input type=​"checkbox" checked=​"checked" id=​"check" class=​"laytable-cell-checkbox" data-name="langkye">​
$("#no-checked")[0];  // <input type=​"checkbox" id=​"no-check" class=​"laytable-cell-checkbox" data-name="langkye">​
 

$("#check").prop("checked");  // true

$("#checked").attr("checked");  // "checked"

/* --------------------------------------- */

$("#no-checked").prop("checked");  // undefined

$("#no-checked").attr("checked");  // false

2. id

$("#check").prop("id");  // "check"

$("#check").attr("id");  // "check"

3. 自定義屬性

$("#no-check").attr("data-name");  // "langkye"

$("#no-check").prop("data-name");  // undefined

• 從上面的結果看出：

  對於W3C組織給HTML預設的屬性，使用prop()來進行操作

  對於我們自定義的屬性，使用attr()來進行操作