首先

  • attr 是从页面搜索获得元素值,所以页面必须明确定义元素才能获取值,相对来说比较慢。 
    如:

<input name='test' type='checkbox'>
$('input:checkbox').attr('type'); 返回checkbox.
$('input:checkbox').attr('checked'); 返回undefined。
 
因为<input name='test' type='checkbox'>中没有checked关键字。

  • prop是从属性对象中取值,属性对象中有多少属性,就能获取多少值,不需要在页面中显示定义。 
    比如 
    $('input:checkbox').prop('checked'); 返回false

这里就会遇到个问题:如果是自定义的属性,那么属性对象中是没有这个属性的。所以prop返回undefined。但是页面中可以检索到这个属性,所以attr是可以获取的。

其次

  • attr获取的是初始化值,除非通过attr(‘name’,’value’)改变,否则值不变。prop属性值是动态的,比如checkbox,选中后,checked变为true,prop值也会发生改变。

总结

所以有个经验就是:

    • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。快速,准确。

    • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

js中prop和attr区别的更多相关文章

  1. jQuery中prop和attr区别

    问题 今天给一个button加onclick事件,由于最后button根据需要转成字符串,因此不能使用jQurey.click(),只能给button添加onclick属性的方式. 于是,$butto ...

  2. jquery中prop和attr的区别

    jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...

  3. js中const,var,let区别(转载)

    js中const,var,let区别 来源:https://www.cnblogs.com/zzsdream/p/6372729.html 今天第一次遇到const定义的变量,查阅了相关资料整理了这篇 ...

  4. jquery中prop,attr,data的区别

    这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...

  5. jQuery中的prop和attr区别

    最近在做一个项目用jq时发现一个问题  在谷歌中可以正常出效果  但是在火狐中就是不行 就是这个prop和attr   之前用的是attr方法   但是在火狐中不出效果  于是特意看了两者的区别 主要 ...

  6. 【Jquery系列】prop和attr区别

    问题描述 由于prop(property的缩写)和attr(attribute的缩写)翻译成汉语,均有“特性.属性”等意思的原因,导致大家容易混淆分不清,本篇文章将试图从英文含义,中文含义和Jquer ...

  7. js中const,var,let区别

    今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. co ...

  8. JS中NULL和undifined区别及NULL的作用

    1.博客地址:http://www.cnblogs.com/eastday/archive/2010/03/03/1677324.html 2.参考地址2:https://www.zhihu.com/ ...

  9. ES6 js中const,var,let区别 今天第一次遇到const定义的变量

    今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 ...

随机推荐

  1. singnal 13 was raised

    在app运行过程中按下home键或者其他原因app被挂起,socket连接不会断开,服务器为了节省资源,在一段时间后会主动关闭这个连接.当玩家再次切回到游戏后,前端并不知道这个连接已经断开了,继续通过 ...

  2. 关于event loop

    之前写了篇文章 JS运行机制,里面对event loop简单的说明,面试时又遇到了关于该知识点的题目(主要是process.nextTick和setImmediate的执行顺序不太知道,查了之后才知道 ...

  3. 洛谷题解:P1209 【[USACO1.3]修理牛棚 Barn Repair】

    原题传送门:https://www.luogu.org/problemnew/show/P1209 首先,这是一道贪心题.  我们先来分析它的贪心策略.  例如,样例:  4 50 18  3 4 6 ...

  4. Redis高可用

    redis高可用只要在于三个方面 主从复制 哨兵机制 集群机制 主从复制 主从复制作用: 1.数据冗余:主从复制实现了数据的热备份,是持久化之外的一种数据冗余方式.2.故障恢复:当主节点出现问题时,可 ...

  5. 即将开始的python之路

    准备开始学py 记录一下 加油

  6. IntelliJ IDEA 12详细开发教程(一)思想的转变与新手入门【转】

    转载地址:http://bangqu.com/alicas/blog/433 从事软件开发工作以来,提高自己的开发效率,提高自己编码的规范,提高编码深度层次,这三样一直都是自己努力去追求的事情. 最近 ...

  7. 关于Mysql唯一索引的操作方法(添加删除)

    首先我们查看一下News数据表的索引信息      使用命令 show index from ‘数据表名称’; 目前数据表中仅有一个主键索引 继续,我们给news表添加两个唯一索引(两种方法) 方法一 ...

  8. 《Python语言及其应用》学习笔记

    第二章 ========== 对象的类型决定了可以对它进行的操作.对象的类型还决定了它装着的数据是允许被修改的变量(可变的),还是不可被修改的常量(不可变的). Python是强类型的,你永远无法修改 ...

  9. 理解JAVA与C的运行机制

    1.java的运行机制 java的编译过程,将java的源程序(扩展名为.java的文件),由java编译程序将java的字节码文件(.class文件)在jvm上运行,机器码有cpu运行, jvm编译 ...

  10. java 值传递 和 引用传递

    参考:(http://www.cnblogs.com/woshimrf/p/5263018.html) 参考:(http://www.cnblogs.com/binyue/p/3862276.html ...