欢迎光临

木子屋

标题: jQuery中attr和prop两个方法的区别

作者: dnawo

日期: 2013-10-04 11:03 AM

分类: 脚本语言

内容: jQuery1.6新增了一个方法prop，有人经常分不清它和attr方法的区别，个人理解：若elem = document.getElementById("xxx")，attr对应的是elem.setAttribute和elem.getAttribute，prop对应的是elem.yyy或elem["yyy"]。
复制内容到剪贴板 程序代码<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)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.656 ms

返回

标题: jQuery中attr和prop两个方法的区别

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.656 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.672 ms

返回