首先

  • 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. link链接外部样式表

    一个完整的link标签: <link href="[css adress]" rel="stylesheet" type="text/css&q ...

  2. poj_1995_Raising Modulo Numbers

    Description People are different. Some secretly read magazines full of interesting girls' pictures, ...

  3. python核心编程2 第八章 练习

    8–2. 循环. 编写一个程序, 让用户输入三个数字: (f)rom, (t)o, 和 (i)ncrement . 以 i为步长, 从 f 计数到 t , 包括 f 和 t . 例如, 如果输入的是 ...

  4. Spring入门注解版

    参照博文Spring入门一,以理解注解的含义. 项目结构: 实现类:SpringHelloWorld package com.yibai.spring.helloworld.impl; import ...

  5. JavaScript - 库 jQuery

    测试 JavaScript 框架库 - jQuery 引用JQuery 如需测试JavaScript库,您需要在网页中引用它. 为了引用某个库,请使用<script>标签,其src属性设置 ...

  6. Linux(CentOS6.5 x64)下版本安装及升级kangle+EasyPanel

    说明:(easypanel集成了kangle web 服务器和mysql,仅支持centos 5和centos 6) .执行下面的命令即可,安装程序将自动安装或者升级: yum -y install  ...

  7. 从coding.net 克隆(git clone)项目代码到本地报无权限(403)错误 解决方案

    直接从coding.net (git clone)项目代码到本地时,会提示没有权限的错误,如下图: 解决方案:添加远程地址的时候带上用户名及密码即可解决,格式如下: git clone http:// ...

  8. JDK学习---深入理解java中的LinkedList

    本文参考资料: 1.<大话数据结构> 2.http://blog.csdn.net/jzhf2012/article/details/8540543 3.http://blog.csdn. ...

  9. 使用selenium模拟登录知乎

    网上流传着许多抓取知乎数据的代码,抓取它的数据有一个问题一定绕不过去,那就是模拟登录,今天我们就来聊聊知乎的模拟登录. 获取知乎内容的方法有两种,一种是使用request,想办法携带cookies等必 ...

  10. WPF Datagrid对鼠标单击进行响应,借助EventSetter

    在做的一个c#的项目中发现Datagrid没办法直接对鼠标单击进行响应, 调用MouseDown事件也需要点击某一行第二次才能响应. 所以借助EventSetter来简单的实现了一个. 界面部分的代码 ...