问题引入
昨天接到了一个活，里面有一个小需求，在写的过程中遇到了一个小问题。虽然这个问题并不是很复杂的东西，但却是一个比较细节的问题。相信不少新手前端会遇到。下面我先描述一下我这个遇到的这个需求。
需求很简单的，一个非常简单的复选框的使用。你需要实现下面三个逻辑：
-
勾选“全国”，东区、南区、西区、北区都会被选中
-
取消勾选“全国”，东区、南区、西区、北区都会被取消选中
-
** 如果四个区域都被选中，则“全国”会被勾选，若四个区域有一个未被勾选则“全选”不会被勾选**
在处理这个需求的时候我首先想到当然回事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()方法。
网友评论