首先

  • 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. ARC下需要注意的内存问题

    之前发了一篇关于图片加载优化的文章,还是引起很多人关注的,不过也有好多人反馈看不太懂,这次谈谈iOS中ARC的一些使用注意事项,相信做iOS开发的不会对ARC陌生啦.这里不是谈ARC的使用,只是介绍下 ...

  2. Webpack4 学习笔记五 图片解析、输出的文件划分目录

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack打包图片和划分文件路径 使用图片的方式 通过 new Image() 在 css中设置 background-imag ...

  3. Hibernate进阶学习4

    Hibernate进阶学习4 深入学习hibernate的查询语句 测试HQL查询 package com.hibernate.test; import com.hibernate.domain.Cu ...

  4. js中document的用法小结

    document常用属性: document.title//设置文档标题,与HTNL中的title标签等价 document.bgColor//设置页面背景颜色 document.fgColor//设 ...

  5. Spring Cloud 入门 Eureka-Client服务提供

    前面文章介绍了如果创建“服务注册中心”,现在创建“服务提供者”,并向服务注册中心注册自己,在服务提供方中尝试着提供一个接口来获取当前所有的服务信息. 先,创建一个基本的Spring Boot应用.命名 ...

  6. Codeforces Round #482 (Div. 2) :C - Kuro and Walking Route

    题目连接:http://codeforces.com/contest/979/problem/C 解题心得: 题意就是给你n个点,在点集中间有n-1条边(无重边),在行走的时候不能从x点走到y点,问你 ...

  7. 20145202马超 《Java程序设计》第九周学习总结

    JDBC 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找. JDBC(Java DataBase Connectivity)是Java联机数据库 ...

  8. 使用 Ajax

    Ajax( Asynchronous JavaScript and XML) 在 Ajax 中 Asynchronous 是指异步, 代表 客户端(Client 通常是指浏览器) 可以向服务器(Ser ...

  9. CF6C Alice, Bob and Chocolate

    CF6C Alice, Bob and Chocolate 题目链接 写了一天搜索写的有点累了,就顺手水了一道CF的模拟题 这道题就是简单的模拟整个题的过程,注意最后输出的形式就好了QWQ AC代码如 ...

  10. 《Cracking the Coding Interview》——第13章:C和C++——题目8

    2014-04-25 20:27 题目:实现一个能够通过引用计数来实现自动回收数据的智能指针,用C++,不是java. 解法:这题真心牛,我的第一反应是发呆,因为对引用计数的了解仅限于这个名词,完全没 ...