刚刚看博客无意中看到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. gulp教程之gulp-imagemin

    简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片) 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile ...

  2. SSM框架学习之高并发秒杀业务--笔记5-- 并发优化

    前几节终于实现了这个高并发秒杀业务,现在问题是如何优化这个业务使其能扛住一定程度的并发量. 一. 优化分析 对于整个业务来说,首先是分析哪些地方会出现高并发,以及哪些地方会影响到了业务的性能.可能会出 ...

  3. Java 和 Google Chrome 浏览器

    来源:https://java.com/zh_CN/download/faq/chrome.xml 本文适用于: 浏览器: Chrome Java 版本: 7.0, 8.0 Chrome 不再支持 N ...

  4. Linux 关机命令

    正确的关机流程是:sync –> shutdown/reboot/halt/poweroff sync 将数据由内存同步到硬盘中. shutdown 关机指令.例如你可以运行如下命令关机: sh ...

  5. RP4412开发板烧写Ubuntu12.04失败原因分析解决

    Ubuntu烧写失败可能是卡的问题 问:用RP4412开发板,卡烧了光盘中的fastboot失败,现在如何补救呢? 答:INAND格式化,利用usb来升级啊. 也有文档,看升级文档. 问:这个是怎么回 ...

  6. iOS系统网络抓包方法

    转到自己的博客收藏. 1. 网络共享 + 可视化抓包工具 基本原理 原理比较简单,ios设备通过代理方式共享连接mac电脑的无线网卡,使用抓包工具抓包,然后进行分析(我们推荐使用Wireshark,在 ...

  7. CF #296 (Div. 1) A. Glass Carving 线段树

    A. Glass Carving time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  8. ${mapred.local.dir}选择策略--Map Task存放中间结果

    上篇说了block在DataNode配置有多个${dfs.data.dir}时的存储策略,本文主要介绍TaskTracker在配置有多个${mapred.local.dir}时的选择策略. mapre ...

  9. js当中的声明和初始化的顺序

    if(!("a" in window)) { var a=1; } alert(a); 这里的alert出来undefined 这句话就相当于 var a; if(!(“a” in ...

  10. 【浅层优化实战】ssh远程登录Linux卡慢的全过程排查及解决方案

    ssh远程登录Linux卡慢的全过程排查及解决方案 前言: 在linux操作系统使用过程中偶然一次感到使用ssh远程连接软件连接操作系统需要等待许久,第一次没在意,第二次也没在意,第三次有点忍受不住了 ...