jQuery属性操作，attr 和 prop的区别。笔记记录

看了 jQuery API文档，属性操作一栏，看到 prop 是1.6+版本新增的方法。

那attr  和 prop 到底具体有什么区别呢？看以下演示，立马就知道结果了。

操作一：

新建一个多选框：

    多选框:
    <input type="checkbox" name="n-checkbox" value="apple" checked/>苹果
    <input type="checkbox" name="n-checkbox" value="banana"/>香蕉
    <input type="checkbox" name="n-checkbox" value="pear" />梨

先获取 value属性看一下，script 代码如下：

<script>
    $(function () {
        // attr
        alert($(":checkbox:first").attr("value"));

        //prop
        alert($(":checkbox:first").prop("value"));
    })
</script>

结果都是：

apple

看到这里，其实 attr ，prop获取属性值，结果都是一样。

操作二：

有些疑惑，再获取 一个都都没有的 checked属性，看一下结果：

<script>
    $(function () {
        // attr
        alert($(":checkbox:last").attr("checked"));

        //prop
        alert($(":checkbox:last").prop("checked"));
    })
</script>

结果：

undefined
false

attr 显示 undefined ？

prop 显示 false。

这又是什么操作？

查询官方的一些文档，可得到一些结果：

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误。

大概意思是，原来的 attr 属性获取，在操作一些 [选中，未选中的这些]元素时，结果会出现 undefined 结果，官方觉得返回 undefined 是一个错误，

因此，在1.6+版本 ，出了一个prop 属性操作。用来解决上述问题，当一个元素被选中，为true，否则 为 false。

那，是不是 以后 只用 prop 方法就可以了？不用 attr属性了。

 其实不然，attr 方法 其实还是很强大的，强大的一点，就是 它可以 操作 非标准的 属性，也就是 自定义属性。如下：

<script>
    $(function () {
        $(":checkbox:first").attr("patch","test");
    })
</script>

页面 显示结果如下：

 那自定属性也啥用呢，当然是 临时用来 储存一些数据了。

最后整理笔记：

attr()　　可以设置和获取属性的值。 不推荐操作：checked、readOnly、selected、disabled等 会返回undefined 值的属性。

　　　　但是，attr方法 可以操作非标准的属性，也就是自定义属性。

prop()　可以设置和获取属性的值。 只推荐操作：checked、readOnly、selected、disabled等 会返回undefined 值的属性。

by不言谢