脚本语言 订阅所有【脚本语言】的日志

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

编辑:dnawo 日期:2013-10-04

字体大小: 小 中 大
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

上一篇: 什么是 GP、LP、PE、VC、FOF？[转]
下一篇: 机动车驾驶证申领驾驶人年龄条件和身体条件
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 4212
发表评论
请登录后再发表评论！