2019-9-4更新：
Angular官方文檔中的解釋
詳解 HTML attribute 和 DOM property，作者：justjavac
- 特性attributes的範圍更大，包括標籤的標準屬性和自定義加入的非標準的屬性。
- 當瀏覽器解析網頁時，將 HTML 特性映射爲了 DOM 屬性
- 可以從DOM 對象添加屬性
- 當 HTML 特性映射爲 DOM 屬性時，只映射標準屬性，訪問非標準屬性將得到 undefined。
DOM 對象也提供了操作特性的 API，可以從attributes獲取非標準的屬性。 - 特性永遠都是字符串或 null
- data- 開頭的屬性
- input.value 的同步是單向的，只是 attribute --> property
attr——映射到prop
HTML標籤的屬性——初始狀態
checked 是個布爾值，只要存在該屬性即爲true
checked=”checked”或checked=其它任意數據類型（false、空字符串）， 賦的只是字面量，不改變本身的屬性值true
prop——不會影響attr
DOM元素的特性——實時狀態
<input>標籤裏有checked， prop的值即爲true
通過在瀏覽器點選，改變checked作爲prop的值，不會改變checked作爲attr的值
以下爲示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr and prop</title>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
</head>
<body>
<fieldset class="sports1">
<h2>你愛好的運動是？</h2>
<!--checked的“=”右邊即使設爲空，甚至false，這只是字面量，本身的值還是true，被選中，checked的property屬性爲true-->
<input type="checkbox" checked = "checked" name="items" value="足球" />
<label for="football">足球</label>
<input type="checkbox" checked = "任意字面量" name="items" value="籃球" />
<label for="basketball">籃球</label>
<input type="checkbox" name="items" value="羽毛球" />
<label for="badminton">羽毛球 </label>
<input type="checkbox" name="items" value="乒乓球" />
<label for="pingpang">乒乓球</label>
<br />
<input type="button" id="checkedAll" value="全 選" />
<input type="button" id="checkedNo" value="全不選" />
<input type="button" id="checkedRev" value="反 選" />
<input type="submit" id="send" value="提 交" />
</fieldset>
<script>
$(function() {
$items = $(".sports1 :checkbox");
$("#checkedAll").click(function() {
//attr相當於設置初始狀態，如果初始沒有出現checked,這裏給checked的boolean屬性設置爲true，相當於給所有input加了checked屬性且boolean值爲true, 此時checked的property值也爲true
//$items.attr("checked", true);
$items.prop("checked", true);
});
$("#checkedNo").click(function() {
// attr相當於設置初始狀態，這裏給checked的布爾屬性設置爲false，相當於移除了每個input裏的checked屬性，checked的property特性相應地變爲false;
// 但是如果狀態被選中過，checked的property特性變爲了true,checked的布爾屬性設置設爲false並不會改變checked的property特性爲true，所以狀態還是選中的。
// $items.attr("checked", false);
$items.prop("checked", false);
});
$("#checkedRev").click(function() {
$items.each(function() {
//這裏也是property特性
this.checked = !this.checked;
});
});
});
</script>
</body>
</html>