<input type="checkbox" id="input1" />
<script type="text/javascript">
var cb = document.getElementById("input1");
cb.setAttribute("aaa", 1);
console.log($("#input1").attr("aaa"));
cb.bbb = true;
console.log($("#input1").prop("bbb"));
</script>
两个方法之所以会让人分不清，主要是由于elem一些内置attribute和property同名且共享数据，导致两个方法使用结果一样，例如：
<input type="checkbox" id="input1" />
<script type="text/javascript">
var cb = $("#input1");
cb.attr("id", "input1_2");
console.log("attr_id:" + cb.attr("id"));
console.log("prop_id:" + cb.prop("id"));
cb.prop("id", "input1_2_3");
console.log("attr_id:" + cb.attr("id"));
console.log("prop_id:" + cb.prop("id"));
</script>
但对于自定义的attribute和property，即使同名，数据也是分开的：
<input type="checkbox" id="input1" />
<script type="text/javascript">
var cb = $("#input1");
cb.attr("aaa", 1);
cb.prop("aaa", true);
console.log("attr_aaa:" + cb.attr("aaa"));
console.log("prop_aaa:" + cb.prop("aaa"));
</script>
这边有个很典型的例子，checkbox的checked，attribute和property同名，数据是分开的：
<input type="checkbox" id="input1" />
<script type="text/javascript">
var cb = $("#input1");
console.log(cb.attr("checked"));
console.log(cb.prop("checked"));
</script>
此外，attr和prop还有一个很直观的区别：attr设置的attribute会在html中表现出来，所以，selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked等应该用prop方法获取而不是attr。
参考资料
[1].jQuery的attr与prop：http://www.cnblogs.com/dolphinX/p/3348582.html
评论（0）
暂无评论。