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



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 | 引用: 0 | 查看次数: 1828
发表评论
登录后再发表评论!