問題引入
昨天接到了一個活，里面有一個小需求，在寫的過程中遇到了一個小問題。雖然這個問題并不是很復雜的東西，但卻是一個比較細節的問題。相信不少新手前端會遇到。下面我先描述一下我這個遇到的這個需求。
需求很簡單的，一個非常簡單的復選框的使用。你需要實現下面三個邏輯：
勾選“全國”，東區、南區、西區、北區都會被選中
取消勾選“全國”，東區、南區、西區、北區都會被取消選中
** 如果四個區域都被選中，則“全國”會被勾選，若四個區域有一個未被勾選則“全選”不會被勾選**
在處理這個需求的時候我首先想到當然回事jQuery中的attr()方法啦！attr("checked",true)這樣一下就可以實現對復選框的控制，但是我在判斷的時候卻出現了兩個問題：
當復選框被勾選之后，用attr("checked")來獲取其狀態時卻返回undefined
當你還未對復選框進行任何勾選操作時，attr("checked",true)或者attr("checked",false)是有效的，但是進行完勾選操作之后，attr("checked",true)或者attr("checked",false)失效了
這兩個問題讓我非常疑惑不解。在我查閱資料之后，發現了其中原因，今天我們就扯一下jQuery中attr()和prop()的區別，來解釋一下上面兩個問題出現的原因，另外這也是新手前端容易忽略的問題。
工欲善其事，必先利其器，先談談attribute與property的區別
要想弄清楚jQuery中attr()和prop()的區別，首先我們得弄明白attribute與property的區別。當我們弄清楚這兩個屬性之后，再過來理解jQuery中attr()和prop()的區別就會很輕松。attribute與property這兩個屬性對于剛入行前端的同學們來說，是非常容易混淆的。這邊我自己總結一下，大概有有以下四點：
1.Dom節點自帶的屬性既是attribute也是property，修改attribute或者property都可以使屬性變化
2.attribute和property自定義的屬性，相互之間是不能訪問的
3.attribute只支持string類型，而property是可以支持string、number以及boolean的
4.attribute的自定義屬性可以在innerHTML中查看的，而property的自定義屬性卻是不可以在innerHTML中查看的
看完上面這幾點總結，我相信還是有很多同學們并不能理解。所以我寫一些小案例，供同學們去體會attribute與property的區別。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute與Property的區別</title>
</head>
<body>
復選框<input type="checkbox" id="testCheckBox"/>
</body>
</html>
<script>
var oCheckbox=document.getElementById("testCheckBox");
// 設置Attribute
oCheckbox.setAttribute("value","boxValue");
console.log(oCheckbox.value);//boxValue
// 設置Property
oCheckbox.name="boxName";
console.log(oCheckbox.getAttribute("name"));//boxName
// 自定義Attribute
oCheckbox.setAttribute("myValue","myBoxValue");
console.log(oCheckbox.myValue);//undefined
// 自定義Property
oCheckbox.myName="myBoxName";
console.log(oCheckbox.getAttribute("myName"));//null
// 設置Property(number類型)
oCheckbox.num=1;
console.log(typeof(oCheckbox.num));//number
// 設置Property(boolean類型)
oCheckbox.isPost=true;
console.log(typeof(oCheckbox.isPost));//boolean
// attribute支持類型
oCheckbox.setAttribute("attrValue",1);
console.log(typeof(oCheckbox.getAttribute("attrValue")));//string
oCheckbox.setAttribute("isChecked",true);
console.log(typeof(oCheckbox.getAttribute("isChecked")));//string
</script>
在這里溫馨提示提示一下，當我們設置class這個屬性時，再用oCheckBox.class獲取的時候，控制提示undefined。在property里面是className而不是class，這就跟document.getElementsByClassName()很類似。細心小伙伴們會發現一個當我用property設置自帶的屬性的時候，返回的類型是string，跟前面第三點不符啊！這里我們就要說回第一點自帶屬性既是attribute也是property，而attribute卻只支持string類型，當我們用property設置自帶屬性的時候，會自動將其轉換成string類型以滿足attribute只支持string類型的要求，所以我們自帶的屬性只能是string類型了。
揭起attr()和prop()的面紗
說完attribute和property之后，接下來我們就要說一下jQuery中的attr()和prop()了。前面提到我們提到了兩個困惑的地方，我們來逐一解釋其中原由。
1、 當復選框被勾選之后，用attr("checked")來獲取其狀態時卻返回undefined
這里我們注意的是，用attr()獲取的屬性，必須是你在DOM節點上可以看見的屬性，看不見則會返回undefined。這里我們可以驗證一下，當你使用attr("checked",true)之后，你會發現與之相對應的DOM節點會添加一個checked="checked"這么一條屬性，你再用attr("checked")去獲取它的checked屬性的時候便會返回“checked”字符串，這也就驗證了這句話。
用attr()獲取的屬性，必須是你在DOM節點上可以看見的屬性，看不見則會返回undefined。
針對DOM節點上自己定義的屬性的，prop()是不能獲取的，而attr()是可以的，如果是標簽自帶的那便都能獲取。原因就在于我們前面總結attribute和property時，所提到的Dom節點自帶的屬性既是attribute也是property。
2 、當你還未對復選框進行任何勾選操作時，attr("checked",true)或者attr("checked",false)是有效的，但是進行完勾選操作之后，attr("checked",true)或者attr("checked",false)失效了
在這里我們需要弄清楚的一件事是attr("checked",true)和attr("checked",false)其實設置的不是checked屬性，而是defaultChecked屬性。而我們勾選和取消勾選這兩個操作才是改變checked屬性 ，這個相當于執行了prop("checked",true)或者prop("checked",false)這兩條語句。當我們未修改checked屬性時,復選框的勾選情況就是被defaultChecked這個屬性所控制，在我們修改了checked屬性之后，復選框的勾選情況將由checked屬性接管，defaultChecked這個屬性便失效了，除非你再刷新一次頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
全國<input id="allArea" type="checkbox"/>
</body>
</html>
//記得引入jQuery
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
console.log($("#allArea").get(0).defaultChecked);//false
console.log($("#allArea").prop("defaultChecked"));//false
$("#allArea").attr("checked",true);
console.log($("#allArea").get(0).defaultChecked);//true
console.log($("#allArea").prop("defaultChecked"));//true
</script>
結語
我們文章開頭拋出的兩個問題已經得到解決了，這里我們我們總結一下attr()和prop()使用場景。
在設置disabled、selected、checked等這些Boolean類型自帶屬性時，我們需要用prop()方法；其他字符串類型自帶屬性時，我們使用attr()方法即可;DOM節點可見的自定義屬性我們也使用attr()方法。
