前端中的attr和prop的區別
阿新 • • 發佈：2018-09-22
對象 mpat asc 例子 utf device box ctype 布爾值 1.什麽是attribute,什麽事property
html標簽的預定義和自定義屬性我們統稱為attribute
js原生對象的直接屬性，我們統稱為property
2.什麽是布爾值屬性，什麽是非布爾值屬性 property的屬性值為布爾類型的，我們統稱為布爾值屬性 property的屬性為非布爾類型的，我們統稱為非布爾值屬性。
3.attribute和property的同步關系。 非布爾值屬性：實時同步 非布爾值屬性: property永遠都不會同步attribute
在沒有動過property的情況下，attribute會同步property. 在動過property的情況下，attribute不會同步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>Document</title>
<script src="script/jquery-1.11.2.min.js"></script>
</head>
<body>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<input type="button" value="全選" id="check-all"></input>
<script>
$(function(){
//attr這樣只有第一次才有效
// $("#check-all").click(function(){
// $(":checkbox[name=‘items‘]").attr("checked",true);
// });
//對於布爾值屬性，要用prop
$("#check-all").click(function(){
$(":checkbox[name=‘items‘]").prop("checked",true);
});
})
</script>
</body>
</html>
前端中的attr和prop的區別