一.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.以上是我看视频教程总结出来的,哪写错了或没写清楚请指出。