首先

  • 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. fastjson 应用

    fastjson优势就是解析快,用法和json-lib.jar差不多(如下图) 贴心的附上jar和反编译工具:https://pan.baidu.com/s/1iADAiFyoUZVBAFSPsIeY ...

  2. XML 对xml文件的crud的增加 create操作 增加元素 增加属性

    把创建的节点挂到上一节点的最后 找到参考节点,使用insertBefore方法进行插入位置 xml添加属性使用setAttribute方法

  3. 模拟ie9的placeholder

    ie9 的input框没有placeholder属性 啧啧啧~~~ 所以就用span标签来模拟一下 先判断浏览器类型 if(navigator.useAgent.indexOf("MSIE ...

  4. Spring Cloud 入门Eureka -Consumer服务消费(一)

    这里介绍:LoadBalancerClient接口,它是一个负载均衡客户端的抽象定义,下面我们就看看如何使用Spring Cloud提供的负载均衡器客户端接口来实现服务的消费. 引用之前的文章中构建的 ...

  5. 【Effective C++ 读书笔记】条款04:确定对象使用前已先被初始化

    永远在使用对象之前先将它初始化.对于无任何成员的内置类型,你必须手工完成此事. 至于内置类型以外的任何其他东西,初始化责任落在构造函数身上.规则很简单:确保每一个构造函数都将对象的每一个成员初始化. ...

  6. 使用PHP生成分享图片

    小程序导航 wq.xmaht.top 假设代码中用到的资源文件夹在当前code_png目录下: /** * 分享图片生成 * @param $gData 商品数据,array * @param $co ...

  7. SSO 单点登录总结(PHP)

    本篇文章根据个人理解的知识整理汇总,如有不足之处,请大家多多指正. 单点登录(SSO--Single Sign On)的应用是很普遍的,尤其在大型网站系统中,比如百度,登录百度账号和,再转到百度经验. ...

  8. TP3.2.3 页面跳转后 Cookie 失效 —— 参考解决方案

    一.问题描述 接手一个项目,使用ThinkPhp3.2.3,在线上环境( Centos7.4 + Nginx1.14 + MySQL5.7 + PHP7.2.4 )运行没有问题, 在本地环境( php ...

  9. MySQL优化总结-查询总条数

    1.COUNT(*)和COUNT(COL) COUNT(*)通常是对主键进行索引扫描,而COUNT(COL)就不一定了,另外前者是统计表中的所有符合的纪录总数,而后者是计算表中所有符合的COL的纪录数 ...

  10. shell+vim——05

    ln --->link 链接, 链接有两种: 软连接 ln -s 源文件 目标文件   :相当于创建了一个快捷方式,源文件损坏后这个链接也就失效了 ln -s  a.text  a.text.s ...