目录
如果只想知道attr()和prop()方法该如何用的话请直接滑到最底部的结论!
首先你得知道他们的全称
attr : attribute
prop : property
1.什么是attribute,什么是property
html标签的预定义和自定义属性我们统称为attribute
就比如:
<input type="checkbox" checked="checked" abc="abc"/>
type,checked 都是预定义属性,而abc是我们自己定义的属性,也就是自定义属性
js原生对象的直接属性,我们统称为property就比如:
<script type="text/javascript"> var abc={ name:"abc", height:175, weight:140 } </script>
name,height,weight这些都是property
2.什么是布尔值属性,什么是非布尔值属性
property的属性值为布尔类型的 我们统称为布尔值属性
property的属性值为非布尔类型的 我们统称为非布尔值属性
3.attribute和property的同步关系
1.为非布尔值属性:两者实时同步
2.为布尔值属性:
property永远都不会同步attribute
在没有动过property的情况下, attribute会同步property
在动过property的情况下,attribute不会同步property
4.用户操作的是property
5.浏览器认的是property
前面都没看懂没关系,看这个例子:
结构:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选择爱好</title>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="checkbox.js"></script>
</head>
<body>
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkedAll_2"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="CheckedAll" value="全 选"/>
</form>
</body>
</html>
JS:
$(function(){
$("#CheckedAll").click(function(){
$(":checkbox[name=items]").attr("checked", true);
$("#checkedAll_2").attr("checked", true);
});
});
页面效果:
JS文件中用的是attr方法来操作属性,现在我们点击全选,变成这样
我们取消勾选 篮球 这一项,变成这样
我们再次点击全选,你会发现,全选根本全选不上!!!篮球这一项还是没选中。
为什么呢?
1.当我们点击全选,所有选项全部勾选,改变的是所有属性的attribute,在没有动过property的情况下(就是用户还没有点复选框),
attribute会同步property
2.当我们点击复选框,取消了篮球这一选项,其实改变的是属性的property
3.当我们再次全选按钮时,因为第2步已经改变了property,参照:在动过property的情况下,attribute不会同步property。所以篮球这一选项选不上
如果上面你还没看懂的话,没关系,记住一个结论:
当我们要操作一个属性时,如果这个属性时布尔值属性,那么我们用prop();
当我们要操作一个属性时,如果这个属性时非布尔值属性,那么我们用attr();