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