刚刚看博客无意中看到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. 51nod 1244 莫比乌斯函数之和

    题目链接:51nod 1244 莫比乌斯函数之和 题解参考syh学长的博客:http://www.cnblogs.com/AOQNRMGYXLMV/p/4932537.html %%% 关于这一类求积 ...

  2. js面向对象的封装方法,【案例】

    封装方法: /** * @矩形canvas库 * @authors Shimily (275766400@qq.com) * @date 2016-12-28 10:30:51 * @version ...

  3. linux 硬盘速度测试

    [root@iZ25oat874uZ data]# time dd if=/dev/zero of=/var/test bs=8k count=1000000 1000000+0 records in ...

  4. python爬取数据保存入库

    import urllib2 import re import MySQLdb class LatestTest: #初始化 def __init__(self): self.url="ht ...

  5. Install Atom editor in ubuntu 14.04

    Step 1: Add repository sudo add-apt-repository ppa:webupd8team/atom Step 2: Update the repository su ...

  6. JavaWeb AJAX

    1.  Asynchronized JavaScript And XML 异步JavaScript和XML,它并不是一门新的语言或技术,实际是几项技术按一定的方式组合在一起共同的协作中发挥各自的作用, ...

  7. Visual Studio 2015 新建MVC项目 Package Manager Console不能使用 (HRESULT: 0x80131500)

    Visual studio 2015 突然新建不了MVC项目,报出错误: HRESULT: 0x80131500 在折腾了很长时间,最后在Github上看到这样一个贴 地址:https://githu ...

  8. IOS Core Animation Advanced Techniques的学习笔记(五)

    第六章:Specialized Layers   类别 用途 CAEmitterLayer 用于实现基于Core Animation粒子发射系统.发射器层对象控制粒子的生成和起源 CAGradient ...

  9. Git 分支

    Git 保存的不是文件的变化或者差异,而是一系列不同时刻的文件快照,某一次的提交指向这处时刻的文件快照,看起来就像每次提交都保存了当时的文件,连续的提交形成一条长链 分支 指向某一个特定的提交,不同的 ...

  10. HDU 4951 Multiplication table(2014 Multi-University Training Contest 8)

    思路   如果进制为p    那么当x<p时 (p-1)*(p-x)=(p-(x+1))  *p +x     因为x<p  所以没有进位  所以高位上的数字为    p-(x+1). 根 ...