我们知道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#通讯（串口和网络）框架的设计与实现》-1.通讯框架介绍

    [连载]<C#通讯(串口和网络)框架的设计与实现>- 0.前言 目       录 第一章           通讯框架介绍... 2 1.1           通讯的本质... 2 1 ...

  2. ABP 初探 之 多语言

    最近几天空闲时间比较多,就研究Abp的多语言,Abp是基于接口的依赖注入,有很多思想与方法都很好,需自己深入体会与应用,转化成自己的思想应用于实践. 本篇介绍基于 开源Demo ModuleZeroS ...

  3. js监听input是第几次click

    我很多问题啊 真的是,然后我有问题就博问啊 ,博问的东西我还是放到博客里面来吧 因为我不怎么看博问 博客的话经常看, 恩 都是一开始我不懂 然后园友来解答的 真的很感谢这些园友 不多说 上代码吧 其实 ...

  4. Thinkcmf：页面常用函数

    Thinkcmf:页面常用函数 全站seo: 文章列表: {$site_seo_title}        <!--SEO标题--> {$site_seo_keywords}   < ...

  5. [deviceone开发]-多种样式下拉菜单demo

    一.简介 该demo主要展示了3种下拉菜单. 一.仿QQ弹出菜单 主要实现原理是通过add一个ui,然后通过点击事件控制其visible属性来显示或者隐藏. 二.组合下拉菜单 主要用到的控件是do_A ...

  6. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  7. Windows系统变量

    %ALLUSERSPROFILE% : 列出所有用户Profile文件位置. %APPDATA% : 列出应用程序数据的默认存放位置. %CD% : 列出当前目录. %CLIENTNAME% : 列出 ...

  8. 【读书笔记】100个Switf必备tips

    声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 1.Selector 在Swi ...

  9. netstat监控大量ESTABLISHED连接与Time_Wait连接问题

    问题描述: 在不考虑系统负载.CPU.内存等情况下,netstat监控大量ESTABLISHED连接与Time_Wait连接. # netstat -n | awk '/^tcp/ {++y[$NF] ...

  10. SQL Server 中WITH (NOLOCK)浅析

    概念介绍 开发人员喜欢在SQL脚本中使用WITH(NOLOCK), WITH(NOLOCK)其实是表提示(table_hint)中的一种.它等同于 READUNCOMMITTED . 具体的功能作用如 ...