木子屋
 

标题: 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.047 ms

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

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms

暂无评论

返回

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms