刚刚看博客无意中看到attr()和prop()的区别,回头就去翻了一下手册,感觉手册上写的过于简单,不能很清晰的分辨出两者的区别,两者的参数用法都是高度相似。

attr():设置或返回被选元素的属性值。

prop():获取在匹配的元素集中的第一个元素的属性值。

这是手册上的概述,关于具体的参数在这儿就不一一列举出来了。

看完实例以后感觉还是没有太搞明白两者是什么区别,随即去百度上看看了一下芈老头(芈字害我试了好久才打出来,幸好之前有个芈月传)的博客,上面是这么写的。

关于它们两个的区别:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

看完以后感觉还是云里雾里的,迷迷糊糊,随后看到博客后面的评论对他的观点进行了一个很好的解释,是这么写的:

(1) <a href="#" target="_self" class="btn">百度</a>
alert($("a").prop("class")); -----------》btn
alert($("a").attr("class")); -----------》btn
虽然说attr()是获取自定义属性,prop是获取固有属性但是其实attr()也能获取到固有的属性,真正能够体现这俩的不同的是自定义属性上的获取和在获取标签中没有显示设置的固有属性的情况中,两种情况分别在(2)和(3)中解释。
a标签里面的 href,target,class都是固有属性所以都可以获取,自然不存在undefined的情况。
(2)在 (1)的基础上加个自定义的属性试试
<a href="#" target="_self" class="btn" action="#" >百度</a> 
alert($("a").prop("action")); -----------》undefined
alert($("a").attr("action")); -----------》#
在这里你就可以看到prop是不能够获取自定义属性的。
(3)楼主的最后一个例子怎么说呢,我觉得是在解释什么是固有属性,我将(1)种的class属性去掉。
<a href="#" target="_self" ">百度</a>
alert($("a").prop("class")); -----------》 空
alert($("a").attr("class")); -----------》undefined
prop是固有属性,固有属性的意思是它知道你有这个属性,你没有写,它也知道,只是你没去设置而已。你没有设置它就返回默认值,楼主的的那个例子中checked的默认值就是false,对于class来说你没设置默认值应该就是为空。
attr是自定义属性,你不在标签里写它就不知道,所以返回的是undefined。

我觉得关键在于最后的几句话

今天就先到这儿以后碰到了记得这么个问题就ok了。

纠结attr(),prop()的更多相关文章

  1. jquery之 css()方法。用法类似的有attr(),prop(),val()

    [注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...

  2. 关于jQuery中attr(),prop()的使用

    注意:什么时候使用attr(),什么时候使用prop()?1.添加属性名称该属性就会生效应该使用prop();2.是有true,false两个属性使用prop();3.其他则使用attr(); 以下是 ...

  3. attr(),prop()二者区别和最佳实践

    attr(),prop()二者区别和最佳实践 最近使用到attr()来获取自定义属性值,我印象中是有一个方法可以获取到自定义属性值,进而我又想到了另一个方法prop().  查看了手册发现并没有对二者 ...

  4. JQUERY attr prop 的区别 一个已经被淘汰

    在做jquery 全选 全不选的项目中, 1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) ...

  5. query attr prop区别

    大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked", ...

  6. jQuery.attributes源码分析(attr/prop/val/class)

    回顾 有了之前的几篇对于jQuery.attributes相关的研究,是时候分析jQuery.attr的源码了 Javascript中的attribute和property分析 attribute和p ...

  7. attr prop jquery关于获取DOM属性值的两个函数

    $('#domid').attr('acitve') $('#domid').prop('checked') // 在使用JQUERY获取DOM元素的属性时,有两个函数,attr 和 prop < ...

  8. jquery,attr,prop,checkbox标签已有checked=checked但是不显示勾选

    最近在做项目的过程中碰到了这样的一个问题:在使用bootstrap模态框的过程中,在模态框中有一个checkbox标签,一开始是为选中的,当点击触发模态框按钮,选中chcekbox时,会显示勾选,这个 ...

  9. JQ attr prop 区别

    解决方法:使用prop属性代替attr属性 一.Attr除 checked, selected, 或 disabled状态属性外,其余的属性均可用attr()设置和修改.$("img&quo ...

随机推荐

  1. 虚拟机解决Device eth0 does not seem to be present 问题。

    Device eth0 does not seem to be present... 出现这个问题基本上是因为虚拟机是克隆的导致机器的mac网卡不一致,所以系统识别网卡失败:

  2. 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...

  3. js中正则表达式 ---- 现成

    1 . 校验密码强度 密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间. ^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 2. 校验中 ...

  4. ios下input获取焦点以及在软键盘的上面

    <!----/此方法基于zepto.min.js--> <!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素--> < ...

  5. oracle常用系统表

    转自:http://blog.chinaunix.net/uid-200142-id-3479306.html dba_开头..... dba_users      数据库用户信息 dba_segme ...

  6. ASP.NET POST XML JSON数据,发送与接收

    接收端通过Request.InputStream读取:byte[] byts = new byte[Request.InputStream.Length];Request.InputStream.Re ...

  7. mysql数据的行列转换

    动态,适用于列不确定情况,第一种: SET @EE=''; SELECT GROUP_CONCAT('SUM(IF(C2=\'',C2,'\'',',C3,0)) AS ',C2)INTO @EE F ...

  8. bzoj4213: 贪吃蛇

    题意:给定一个网格,有一些格子是障碍不用管,剩余的是空地,你要用一些起点和终点在边界上的路径或环来完全覆盖掉空地,如果使用第一种,会付出1的代价,求最小代价,不能覆盖则输出-1. 现在看到网格而且数据 ...

  9. E. Vasya and Beautiful Arrays

    http://codeforces.com/contest/355/problem/E 每个数都可以变成段 [a-k,a], 某一个因子是否被所有的段包含,就是把这个因子以及它的所有倍数看成点, 看是 ...

  10. java给不同步的集合加上同步锁

    给非同步的集合加锁: class MyCollections{//创建工具类,提供对外访问方法 public static list synList(List list){ return new My ...