我们知道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. C#登入例子--第一个程序

    第一步:在数据库创建一个存放账号密码的表单 第二步:创建一个登入项目 拆分成三层: CS层: BLL层: DAL层: Common层: Web.config:

  2. JavaScript基本语法（三）

    上篇博文说到JS的运算符,这次说说JS程序流程控制. 1. 条件语句 if 语法: if(condition) statements1 else statement2 当括号里的条件成立的时候,执行i ...

  3. 【转】自定义UITableViewCell（registerNib: 与 registerClass: 的区别）

    自定义UITableViewCell大致有两类方法: 使用nib 1.xib中指定cell的Class为自定义cell类型(注意不是设置File's Owner的class) 2.调用 tableVi ...

  4. IOS开发札记（2015-08-20）

    View显示数据借助Model的一个比较好的理由也是因为:有时候从服务器获取的数据相同的value可能对应不同的key(服务端多人协作开发时经常会出现这种情况) 这里盗图描述一下使用Model的好处 ...

  5. KEIL中启动文件详解（汇编语言）

    原文在此:http://www.cnblogs.com/mddblog/p/4920063.html 概述 在嵌入式系统中,启动文件是整个系统非常关键的部分,它会进行一些底层的初始化,构建程序运行必要 ...

  6. XIB 上的控件不显示怎么办

    原文:http://www.cnblogs.com/sandyzhang/p/5660061.html   午休时间遇到有人求助:说是XIB 上内容都有的,但是看不到,demo 运行的话控件都存在的. ...

  7. 常用API——Math对象型、Number型

    Math.abs(num) : 返回num的绝对值 Math.acos(num) : 返回num的反余弦值 Math.asin(num) : 返回num的反正弦值 Math.atan(num) : 返 ...

  8. 封装RabbitMQ.NET Library 的一点经验总结

    这篇文章内容会很短,主要是想给大家分享下我最近在做一个简单的rabbitmq客户端类库的封装的经验总结,说是简单其实一点都不简单.为了节省时间我主要按照Library的执行顺序来介绍,在你看来这里仅仅 ...

  9. 配置apache的虚拟机+软件下载

    第一步: 打开c:/wamp/apache/conf中的httpd.conf文件, 在httpd.conf中ctrl+f输入vhosts 找到那一行将前面的#号去掉 操作如图所示 第二步: 打开虚拟主 ...

  10. 使用Docker快速部署Storm环境

    Storm的部署虽然不是特别麻烦,但是在生产环境中,为了提高部署效率,方便管理维护,使用Docker来统一管理部署是一个不错的选择.下面是我开源的一个新的项目,一个配置好了storm与mono环境的D ...