什么是attribute、property
如果想明白attr()、prop()方法的使用，那么就要先明白什么是attribute和property。
当编写 HTML 源码时，你能在 HTML 元素里定义 attributes。然后，一旦浏览器解析你的代码，该 HTML 元素相应的 DOM 节点就会被创建。该节点是一个对象，因此它就拥有 properties。
所以，我们知道：attributes 是 HTML 元素（标签）的属性，而 properties 是 DOM 对象的属性。
例如，下面这个 HTML 元素：
<!-- 标签中定义的所有属性就是attributes -->
<input id="test" type="text" value="AAA">
一但经过浏览器解析后，会创建为对应的dom对象，这个dom对象就拥有属性propertys，它就包含 id 和 type及 value
如果想访问input标签的value值，可以有很多种方法：
var elem = document.getElementById("test");
elem.getAttribute("value"); // 返回AAA 这种方法只能获取到在写 HTML 源码时所定义value时对应的值
elem.defaultValue; // 返回AAA 写 HTML 源码时所定义value时对应的值
elem.value; // 如果value的值有改变，就获取最新对应的值
$(elem).attr('value'); // 返回AAA 写 HTML 源码时所定义value时对应的值
$(elem).prop('value'); // 如果value的值有改变，就获取最新对应的值
attr()与prop()方法的区别
attr(): 一般用于取默认值(初始值)或自定义的属性值 , 如 id
prop() : 用来取在dom树中实时变化的属性值，如 checked、disabled、selected等...
attr()与prop()方法对比
| 读取属性 | 返回值 | 描述 |
|---|---|---|
| elem.checked | true (Boolean) | 会随着 checkbox 状态作出相应改变 |
| $(elem).prop("checked") | true (Boolean) | 会随着 checkbox 状态作出相应改变 |
| elem.getAttribute("checked") | "checked" (String) | checkbox 的初始状态；并且不会随着 checkbox 的状态而改变。 |
| $(elem).attr("checked") (1.6) | "checked" (String) | checkbox 的初始状态；并且不会随着 checkbox 的状态而改变。 |
| $(elem).attr("checked") (1.6.1+) | "checked" (String) |
|
| $(elem).attr("checked") (1.6之前版本) | true (Boolean) | true (Boolean) 会随着 checkbox 状态作出相应改变。 |
案例
在如下的案例中使用了attr()方法操作checked属性，当checked的勾选状态发生改变时，页面没有做出相应的勾选，只有在第一次点击时有反应，以后的每一次都没有反应，这种情况就是attr()方法只获取html定义时的初始值，并没有对实时改变的checked属性进行映射的原因。
案例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr-prop</title>
</head>
<body>
<input id="test" type="checkbox" checked="checked">
<script src="../jquery-1.11.1.js"></script>
<script>
$(function () {
$('#test').on('click', function (event) {
console.log('attr',$(this).attr('checked'));
console.log('prop',$(this).prop('checked'));
})
})
</script>
</body>
</html>
attr-prop.png
案例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择内容</title>
<style>
#controller {
padding-bottom: 50px;
}
</style>
</head>
<body>
<div id="controller">
<input type="button" value="全选">
<input type="button" value="反选">
<input type="button" value="取消">
</div>
<div id="content">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<script src="../jquery-1.11.1.js"></script>
<script>
$(function () {
$('#controller').get(0).addEventListener('click',function (event) {
event = event || window.event;
switch (event.target.value) {
case '全选':
$('#content').children('input').prop('checked','true');
break;
case '反选':
$('#content input').each(function (i, ele) {
var attrValue = $(ele).prop('checked')? false :true;
$(ele).prop('checked',attrValue);
});
break;
case '取消':
$('#content').children('input').prop('checked',false);
break;
}
});
});
</script>
</body>
</html>
网友评论