prop&attr
2018-05-26 本文已影响20人
强某某
checkbox
<input type="checkbox" checked='checked'>
说明：多选框中的checked属性除非不写，不然不论赋什么值，还是不写值，都代表选中。
attribute
html的预定义属性和自定义属性
input标签：针对的html
所以如上：checked是input标签的attribute
property
js原生对象的直接属性
每一个预定义的attribute都会有一个property与之对应
input节点：针对的是js
所以如上：checked是input节点的property
布尔值属性和非布尔值属性
<body>
<input type="checkbox" checked='checked' name='zq'>
</body>
</html>
<script>
//此时checked属性就是布尔值属性
//name属性就是非布尔值属性
// 布尔值属性：property的属性值是布尔值类型
// 非布尔值属性：property的属性值是非布尔值类型
//非布尔值属性：不论什么情况property和attribute都会同步
//布尔值属性：1.改变property不会同步修改attribute
//2.在没有动过property时，attribute会同步property,一旦动过property
//attribute不会同步property
var zq=document.querySelector('input[type=checkbox]');
//修改attribute
zq.setAttribute("name","zq1");
//修改property
zq.name='zq2';
//浏览器只认property,用户操作的是property
</script>
属性使用attr还是prop的区分图
prop&attr.png
能使用attribute尽量使用attribute，性能高。
基本案例：
此时只有在第一次点击全选才有效，如果一旦第一次点击操作过property则全选无效，例如此时的水果三个全部手动选中，都是操作property，则在点击全选无效。如果在html全部给水果加上checked属性就相当于操作了property，此时即使第一次点击全选也无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>H5</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" >苹果
<input type="checkbox" >栗子
<input type="checkbox" >香蕉
<input type="button" id="CheckAll" value="全选">
</body>
</html>
<script>
$(function(){
$("#CheckAll").click(function(){
$(":checkbox[type=checkbox]").attr("checked",true);
})
})
</script>
对比案例：
checked属性是布尔值属性，如果使用操作property则一直有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>H5</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" >苹果
<input type="checkbox" >栗子
<input type="checkbox" >香蕉
<input type="button" id="CheckAll" value="全选">
</body>
</html>
<script>
$(function(){
$("#CheckAll").click(function(){
$(":checkbox[type=checkbox]").prop("checked",true);
})
})
</script>
