我们知道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. AMD and CMD are dead之JS工程化终极解决方案KMD.js版本0.0.1发布

    回顾 经过两天晚上疯狂的开发调试,伴随着大量掉落的头发和酸痛的颈椎,KMD.js赢来了第一个稳定版本.在此期间KMD规范也有所修改和完善. 这两天主要完成的功能有: 按需加载 版本控制 模块管理 便捷 ...

  2. JavaScript区分click事件和mousedown（mouseup、mousemove）方法

    在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...

  3. SharePoint服务器端对象模型 之 使用CAML进展数据查询

    SharePoint服务器端对象模型 之 使用CAML进行数据查询 一.概述 在SharePoint的开发应用中,查询是非常常用的一种手段,根据某些筛选.排序条件,获得某个列表或者某一些列表中相应的列 ...

  4. 使用PhoneGap开启移动开发之旅

    移动市场风起云涌,只是好像和悲催的.net程序员隔绝.我们内心中一直期待的Windows Phone终究不能匹及windows, 随着时间的流逝,windows phone越来越像扶不起的阿斗,连微软 ...

  5. SQLServer 日期函数大全

    一.统计语句 1.--统计当前[>当天00点以后的数据] ) ) ORDER BY dateandtime DESC 2.--统计本周 3.--统计本月 4.统计当前 SELECT * FROM ...

  6. mvc页面跳转

    用例列举: RedirectToAction: return RedirectToAction("PublicPreview", controllerName, new { id ...

  7. 使用Navicat连接Oracle数据时的一些问题,连接时错误：ORA-28547,新建用户后连接时错误：ORA-01017

    发现Navicat作为一款连接数据库的工具确实很好用,可视化的界面看着舒服很多,下面说说我今天在连接Oracle数据库时的一些问题: 1.安装好Oracle后直接用Navicat是连接不上的,会出现如 ...

  8. 设置共享，实现Linux和Windows之间的共享

    设置共享,实现Linux和Windows之间的共享 前提: 安装虚拟机.可以参考:在Windows上安装虚拟机详细图文教程 安装Linux.可以参考:在VMware Workstation里的Linu ...

  9. 在虚拟机中安装红旗桌面7.0 Linux操作系统的详细图文教程

    本文作者:souvc 本文出处:http://www.cnblogs.com/liuhongfeng/p/5343087.html 以下是详细的内容: 一.安装虚拟机. 安装虚拟机可以参考:在Wind ...

  10. Oracle11g的最佳灵活体系结构OFA