最近在项目中，我们需要用jquery来判断输入中的复选框是否被选中，发现复选框的变化状态是attr()无法获取的。最后，在检查数据之后，我们发现jQuery 1.6增加了prop()方法，用一个官方的段落来描述：

在特定情况下，属性之间的区别可能很重要。在jQuery 1.6之前。attr()方法有时会在检索某些属性时考虑属性值，这可能会导致不一致的行为。从jQuery 1.6开始。prop()方法提供了一种显式检索属性值的方法。attr()retrievesatattributes。上面的翻译大致如下：prop()处理来自节点对象的属性，其中包含很多原生属性；Attr()来自对象的属性，只有当我们将属性节点添加到元素节点时，该属性才可用。当然，前面的翻译只代表我自己的观点，如有错误可以提出来~ ~

简单地说：

当处理HTML元素的固有属性时，使用prop方法。对于我们自己定制的HTML元素的DOM属性，在处理的时候，使用attr方法。上面的描述可能有点模糊。请引用一些大神博客，加上我的测试，举几个例子知道。

第一个例子：元素的固有属性和自定义属性的描述。

A href=' http://www . Baidu.com ' target=' _ self ' class=' BTN ' Baidu/A在本例中，元素A的DOM属性为“href、target和class”，是元素A本身的属性，也包含在W3C标准中，或者可以在IDE中智能提示。这些属性称为固有属性。处理这些属性时，建议使用prop方法。

a href=' # ' id=' link 1 ' action=' delete ' delete/a在本例中，元素a的DOM属性为“href、id和action”。显然，前两个是固有属性，而后一个“动作”属性是自定义的。元素a本身没有这个属性。这是自定义的DOM属性。在处理这些属性时，建议使用Attr方法。使用prop方法取值和设置属性值时，会返回未定义的值。

第二个例子：表单应用中prop()和attr()的区别。

让我们从一段使用attr()的代码开始：

！doctype html html head meta charset=' utf-8 '/title attr()/vsprop()/title/head body H3使用attr()确定是否选择了/H3输入类型=' checkbox ' id=' input 01 '/。我是第一个复选框ABR/input Type=' checkbox ' id=' input 02 '选中=' checked '/我是第二个复选框BBR/input Type=' button ' id=' button 01 '值='获取a的选中状态'/Type=' button' id=' button02 '值='获取b的选中状态'/脚本src=' http : js/jquery-1 . 11 . 0 . js '类型=' text/JavaScript ' charset=' uth单击(function(){ var $ state 01=$(' # input 01 ')。attr('选中')；alert($ state 01)；}) $('#button02 ')。单击(function(){ var $ state 02=$(' # input 02 ')。attr('选中')；alert($ state 02)；})})/脚本/正文/html上述程序的测试结果为：

从动态图中可以看出，用户选择的状态是无法用attr()获得的，它只返回表单的初始值。

让我们看一段使用prop()方法的代码：

！DOCTYPE html html head meta charset=' utf-8 '/title attr()vs prop()/title/head body H3用道具()判断是否选中/h3输入类型='checkbox' id='input01' /我是第一个复选框Abr /输入类型=' checkbox ' id=' input 02 '选中=' checked '/我是第二个复选框Bbr /输入类型='button' id='button01 '值='获取A的检查状态/input type=' button ' id=' button 02 ' value='获取B的检查状态/script src=' http : js/jquery-1。11 .0 .js ' type=' text/JavaScript ' charset=' utf-8 '/script script type=' text/JavaScript ' $(function(){ $(' # button 01 ')).单击(function(){ var $ state 01=$(' # input 01 ').道具('选中');警报(状态01)；}) $('#button02 ').单击(function(){ var $ state 02=$(' # input 02 ').道具('选中');警报(状态02)；})})/脚本/正文/html上面这段程序的测试结果是：

从动态图可以看出来，用道具()可以实时获取用户的选中与取消操作状态。

因此我总结的差别就是：属性记录的值会按照用户操作实时更新，而属性记录的都是初始值，仅代表本人观点。

希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。