我们知道jquery中获取元素属性有两种常见的方法，一个是attr()方法，这个是用的比较多的，也是我们第一个想到的。另外一个就是prop()方法了，这个方法之前很少用到，它是jquery1.6之后新增的方法。那么这两个方法都是获取属性的，那么神马区别呢？闲话不多说，下面我们就来说说。

　　首先从单词解释来说attr和prop分别是单词attribute和property的缩写，它们均表示“属性”的意思。下面我们看一个简单的例子。

<body>

    <input type="text" id="inputs" value="name">

    <script >

    $("#inputs").focusout(function(){

        var inputVal = $(this).attr("value");

        alert(inputVal);

    });

    </script>

</body>

　　一个简单的输入框，我们想获取用户输入后的value，然后我就写了上面一段代码。打开浏览器测试后发现，不管我输入什么值，弹出的始终是name，也就是value的初始值。同一个输入框我们再用prop()方法试试。

<body>

    <input type="text" id="inputs" value="name">

    <script >

    $("#inputs").focusout(function(){

        var inputVal = $(this).prop("value");

        alert(inputVal);

    });

    </script>
</body>

　　我们发现这次我输入什么就会弹出什么，这才是我想要的效果。如果这个例子不能说明什么，那么我们再来看看下面这个例子。

<body>

    <input type="checkbox" id="testBox">

    <script>

        console.log($('#testBox').attr('checked'));  // undefined

        console.log($('#testBox').prop('checked'));  // false

    </script>

</body>

　　一个单选框，我想知道它是否被选中，然后我就获取他的checked值，这个时候我发现使用attr()方法返回的是undefined，而使用prop()方法就可以正确获取一个布尔值。这是为什么呢？

　　对于某个 DOM 节点对象，properties 是该对象的所有属性，而 attributes 是该对象对应元素(标签)的属性。当一个DOM 节点为某个 HTML 元素所创建时，其大多数 properties 与对应 attributes 拥有相同或相近的名字，但这并不是一对一的关系。

对于第一个例子来说，

　　id:property获取的id是attribute上id的映射：获取该 property 即等于读取其对应的 attribute 值，而设置该 property 即为 attribute 赋值。

　　type: property 是 attribute 的映射：获取该 property 即等于读取其对应的 attribute 值，而设置该 property 即为 attribute 赋值。但type 并不是一个纯粹的映射 property，因为它的值被限制在已知值（即 input 的合法类型，如：text、password）。如果你有 <input type="aaa">，然后 theInput.getAttribute("type") 会返回 "aaa"而 theInput.type 会返回 "text"。

　　 value:property 并不会映射 value attribute。取而代之的是 input 的当前值。当用户手动更改输入框的值，value property 会反映该改变。 property 反映了 input 的当前文本内容，而  attribute 则是在 HTML 源码 value 属性所指定的初始文本内容。

对于表单的那个例子，attr() 方法对于未设置的 attributes都会返回 undefined。checked attribute 的值并不会随着 checkbox 的状态而作出相应改变，而 checked property 会。因此，当判断一个 checkbox 是否被选择时应该使用 property。

jquery中attr()与prop()区别的更多相关文章

  1. jQuery中attr()与prop()区别介绍

    .attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. •.attr( attributeName ) •.attr( attributeName ) ...

  2. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  3. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  4. jquery中attr和prop的区别（转）

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  5. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  6. jquery中attr和prop的区别分析

    这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...

  7. jQuery中attr和prop方法的区别说明

    jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

  8. Jquery学习笔记（6）--jquery中attr和prop的区别【精辟】

    jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很 ...

  9. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

随机推荐

  1. php文件之间传值的三种主流并且常用的方式

    一.表单传值 在<form>中的action填入要跳转页面的路径,method填入POST或者GET方法.表单中的提交按钮按下后,就会把<form>中有value都传到要跳转的 ...

  2. JavaScript的个人学习随手记（二）

    JS HTML DOM 改变 HTML 输出流 JavaScript 能够创建动态的 HTML 内容: 今天的日期是: Sat Sep 24 2016 15:06:50 GMT+0800 (中国标准时 ...

  3. MVC MODEL Attribute 操纵速记

    目的: 扩充Attribute 任意读取并Render 需要的Attribute     用法: @Html.ParaLabelFor(x=>x.ServiceName):@Html.ParaN ...

  4. 【转载】PHP性能优化干货

    PHP优化对于PHP的优化主要是对php.ini中的相关主要参数进行合理调整和设置,以下我们就来看看php.ini中的一些对性能影响较大的参数应该如何设置. # vi /etc/php.ini (1) ...

  5. Oracle物理体系结构

    一.ORACLE 物理体系结构 原理结构图 各部分解释: PGA: 私有内存区,仅供当前发起用户使用. 三个作用 用户登录后的session信息会保存在PGA. 执行排序,如果内存不够,oracle会 ...

  6. SQL Server 2008 R2——使用数字辅助表（master..spt_values）实现用计数字段对记录进行重复显示

    =================================版权声明================================= 版权声明:原创文章 谢绝转载  请通过右侧公告中的“联系邮 ...

  7. jQuery validator自定义

    项目中接触到validator,记录下 jQuery.validator.addMethod("isStrongPwd", function(value, element){ va ...

  8. appdata

    C:/Users/用户名/AppData里面默认有三个文件夹,分别是Local.LocalLow.Roaming,简单地来说,都是用来存放软件的配置文件和临时文件的,里面有很多以软件公司或者软件名称命 ...

  9. Mysql慢查询和慢查询日志分析

     Mysql慢查询和慢查询日志分析   众所周知,大访问量的情况下,可添加节点或改变架构可有效的缓解数据库压力,不过一切的原点,都是从单台mysql开始的.下面总结一些使用过或者研究过的经验,从配置以 ...

  10. gitlab备份及迁移

    Gitlab 创建备份 使用Gitlab一键安装包安装Gitlab非常简单, 同样的备份恢复与迁移也非常简单. 使用一条命令即可创建完整的Gitlab备份: gitlab-rake gitlab:ba ...