一.jQuery中attr与prop使用上遇到的问题
- 准备两组测试，每组有2个复选框与1个全选按钮，分别给按钮绑定点击事件，然后分别使用jQuery的attr和prop方法使复选框被选中。测试发现，prop方法没遇到问题，可attr只能使复选框勾上生效一次。以下是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="">
<input type="checkbox" name="items1" value="prop1" />prop测试1
<input type="checkbox" name="items1" value="prop2" />prop测试2
<input type="button" id="p" value="prop全选" />
<hr>
<input type="checkbox" name="items2" value="attr1" />attr测试1
<input type="checkbox" name="items2" value="attr2" />attr测试2
<input type="button" id="a" value="attr全选" />
<hr >
</form>
<script type="text/javascript">
$(function(){
//第一次点击全选按钮后，所有复选框均被勾上；然后手动取消全选框,再次点击全选,所有复选框再次被勾上
$("#p").click(function(){
$(":checkbox[name=items1]").prop("checked",true)
})
//第一次点击全选按钮后,所有复选框均被勾上，同时对应html元素上多了一个属性checked="checked";然后手动取消全选框,再次点击全选,复选框竟然没有被勾上;
$("#a").click(function(){
$(":checkbox[name=items2]").attr("checked",true)
})
})
</script>
</html>
- 测试结果：使用prop方法时，第一次点击全选按钮后，所有复选框均被勾上。然后手动取消全选框,再次点击全选,所有复选框再次被勾上；而使用attr方法时，第一次点击全选按钮后,所有复选框均被勾上，同时对应html元素上多了一个属性checked=“checked”;然后手动取消全选框,再次点击全选,复选框竟然没有被勾上;
二.html中checked等布尔值属性的坑
- 上面的测试结果发现，使用attr方法本质是给html元素加上了checked="checked"属性。然后又对checked属性进行了测试。直接添加多个复选框，给每个复选框添加不同的checked属性值。
<input type="checkbox" checked/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="true"/>
<input type="checkbox" checked="false"/>
<input type="checkbox" checked=false/>
<input type="checkbox" checked=""/>
<input type="checkbox" checked=0/>
<input type="checkbox" checked=undefined/>
<input type="checkbox" />
- 测试结果：无论给checked什么属性值（或是只写一个checked），其结果都是复选框会被选中。只有不给复选框添加checked属性，复选框才不会被选中。其他布尔值属性，例如autofocus,selected也是同理。
三.attribute与property区别。
property
- property定义：js原生对象的直接属性，我们统称为property。
- property详解：通过js代码获取的对象（例如：var input=document.getElementByid("#p")），此input对象中的属性称为property（例如此对象中的：alt,className,checked,以及attributes等等）。简而言之，属性就是property。
attribute
- attribute定义：html标签的自定义与预定义属性，我们统称为attribute。
- attribute详解：在以下标签中，
<input type="button" id="p" value="prop全选" test="自定义属性" />
预定义（标签自带的）属性有:type,id,value,name等（虽然name没有写在标签上，但此属性标签本来就有），自定义（标签没有，自己定义的）属性有：test。
property与attribute的关系
-
attribute既是html中的属性，也是js对象的属性。
我们可以看到input对象中有个attributes属性，而这个属性中包含的type,id,value，test就是attribute。 -
每一个预定义的attribute都会有一个property与之对应
上述图中type,id,value,checked为元素预定义属性，所以在input对象
中也有相对应的属性。而test为自定义属性，所以input对象中没有此属性。
-
当attribute和property不同步时，浏览器认谁
在修改布尔值属性时，有可能导致attribute与property不同步，此时浏览器以property的值为准。 -
非布尔值属性中，attribute和property同步
改变预定义attibute的值例如value,input对象中对应的value会跟着改变。 -
布尔值属性中，修改attribute，property可能不同步。修改property，attribute不同步
第一次修改attribute的值时，property会同步。property一旦改变，修改attribute，property的值不变。如果直接修改property属性，attribute不同步。
attr()与prop()的区别
区别一：attr()会修改标签上的属性(attribute)，也可以给标签增添自定义属性，而prop()只修改dom对象的属性（property）。
区别二：修改布尔值属性（例如checked,selected,autofocus）时，attr()可能会失效。
区别三：attr()一般修改自定义属性，prop()一般修改布尔值属性
PS.以上是我看视频教程总结出来的，哪写错了或没写清楚请指出。
3887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
