jquery中arrt和prop的区别

在 jQuery 中，attr()函数和 prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。

但不得不说的是，这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。

很明显，attr 和 prop 分别是单词 attribute 和 property 的缩写，并且它们均表示 ” 属性 ” 的意思。

不过，在 jQuery 中，attribute 和 property 却是两个不同的概念。attribute 表示 HTML 文档节点的属性，property 表示 JS 对象的属性。

<!-- 这里的 id、class、data\_id 均是该元素文档节点的 attribute \-->
<div id\="message" class\="test" data\_id\="123"\></div\>

<script type\="text/javascript"\>
// 这里的 name、age 是 Person 的 property
var Person \= {name: "小明", age: 18}; 7 </script\>

在 jQuery 中，prop()函数的设计目标是用于设置或获取指定 DOM 元素 (指的是 JS 对象，Element 类型) 上的属性 (property)；attr() 函数的设计目标是用于设置或获取指定 DOM 元素所对应的文档节点上的属性(attribute)。

attr()是 jQuery 1.0 版本就有的函数，prop()是 jQuery 1.6 版本新增的函数。毫无疑问，在 1.6 之前，你只能使用 attr() 函数；1.6 及以后版本，你可以根据实际需要选择对应的函数。

由于 attr() 函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其 toString() 函数详解 ”)方法，将其转为字符串类型。

prop()函数操作的是 JS 对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。

在 jQuery 1.6 之前，只有 attr() 函数可用，该函数不仅承担了 attribute 的设置和获取工作，还同时承担了 property 的设置和获取工作。例如：在 jQuery 1.6 之前，attr()也可以设置或获取 tagName、className、nodeName、nodeType 等 DOM 元素的 property。

直到 jQuery 1.6 新增 prop() 函数，并用来承担 property 的设置或获取工作之后，attr()才只用来负责 attribute 的设置和获取工作。

此外，对于表单元素的 checked、selected、disabled 等属性，在 jQuery 1.6 之前，attr()获取这些属性的返回值为 Boolean 类型：如果被选中 (或禁用) 就返回true，否则返回false。

但是从 1.6 开始，使用 attr() 获取这些属性的返回值为 String 类型，如果被选中 (或禁用) 就返回 checked、selected 或 disabled，否则 (即元素节点没有该属性) 返回 undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用) 状态，对应的属性值也不会发生改变。

因为 jQuery 认为：attribute 的 checked、selected、disabled 就是表示该属性初始状态的值，property 的 checked、selected、disabled 才表示该属性实时状态的值 (值为true 或false)。

因此，在 jQuery 1.6 及以后版本中，请使用 prop() 函数来设置或获取 checked、selected、disabled 等属性。对于其它能够用 prop() 实现的操作，也尽量使用 prop() 函数。

 <button\> 按钮 </button\>
 <input type\="checkbox" name\=""id\="" checked\="checked"\>
 <script src\="jquery.js"\></script\>
 <script>
    // $('button').on('click',function(){//});
    // var r = $('input');
    $('button').on('click',function(){if ($('input').prop('checked')) {$('input').prop('checked',false);
        }else{$('input').prop('checked',true);
        }
    }) 
</script\>

// attr / prop
// attr ==> getAttribute() / setAttribute()
// 用于操作自定义的属性，对于 DOM 对象自身的布尔值类型的属性，只能
// 通过这个两个方法来设置或者读取默认值，而不能动态改变值
//
// prop ==> dom.checked = true;
// 对于布尔值的属性（selected/checked/diabled）都需要通过直接访问属性
// 方式来操作（点语法、[]）

jquery中arrt和prop的区别

1、操作对象不同

2、应用版本不同

3、用于设置的属性值类型不同

4、其他细节问题