jquery中attr()与prop()区别
我们知道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()区别的更多相关文章
- jQuery中attr()与prop()区别介绍
.attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. •.attr( attributeName ) •.attr( attributeName ) ...
- jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )
jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...
- jQuery中.attr()和.prop()的区别
之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...
- jquery中attr和prop的区别（转）
在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- jquery中attr和prop的区别分析
这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- Jquery学习笔记（6）--jquery中attr和prop的区别【精辟】
jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很 ...
- jQuery中attr和prop方法的区别
jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...
随机推荐
- PowerDesigner16 基本使用教程
一.基本概念 概念数据模型也称信息模型,它以实体-联系(Entity-RelationShip,简称E-R)理论为基础,并对这一理论进行了扩充. 它从用户的观点出发对信息进行建模,主要用于数据库的概念 ...
- jQuery鼠标经过显示大图
效果:http://keleyi.com/keleyi/phtml/image/8.htm 以下是完整代码: <!DOCTYPE html> <html lang="en& ...
- jQuery网站顶部定时折叠广告
效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- 使用私有Pod Spec的类库--提高公司开发效率
前言 找了这么长时间,再次开始去尝试Cocoapods了.前面已经写过一篇关于如何把自己的Github上的代码库添加Cocoapods支持.现在就让我们看一下如果搭建私有的Spec吧. 之所以构建私有 ...
- 【原】iOS动态性(五)一种可复用且解耦的用户统计实现(运行时Runtime)
声明:本文是本人 编程小翁 原创,转载请注明. 为了达到更好的阅读效果,强烈建议跳转到这里查看文章. iOS动态性是我的关于iOS运行时的系列文章,由浅入深,从理论到实践.本文是第5篇.有兴趣可以看看 ...
- iOS开发之Runtime机制深入解析
本篇主要讲述在 OC 开发中主要涉及到的运行时机制: 运行时的工作: 运行时在 OC 中的工作:OC 语言的设计模式决定了尽可能的把程序从编译和链接时推迟到运行时.只要有可能,OC 总是使用动态的方式 ...
- CSS3-04 样式 3
前言 关于 HTML/CSS 的博客也写了几篇了.该系列博客主要介绍 HTML 和 CSS 的基础,尚未过多的涉及 HTML5 和 CSS3 (即 HTML/CSS 进阶)的内容.这些博客是按照一定的 ...
- IOS 多线程分类以及多线程的相关操作
直接附上援助链接:http://www.cnblogs.com/kenshincui/p/3983982.html 分享内容还关联到了生产者与消费者模式(其实看明白了整片文章,也就理解了生产者与消费者 ...
- Ubuntu1404安装gogs过程
一.Gogs介绍 Gogs (Go Git Service) 是一款极易搭建的自助 Git 服务. Gogs 的目标是打造一个最简单.最快速和最轻松的方式搭建自助 Git 服务.使用 Go 语言开发使 ...
- Spring IOC/DI和AOP原理
一 IOC/DI 1. 概念机原理 IOC: Inversion of Control(控制反转)是一种设计思想,就是容器控制应用程序所需要外部资源的创建和管理,然后将其反转给应用程序.对象及其依赖对 ...