首先

  • 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. Friendly Date Ranges-freecodecamp算法题目

    Friendly Date Ranges 1.要求 把常见的日期格式如:YYYY-MM-DD 转换成一种更易读的格式. 易读格式应该是用月份名称代替月份数字,用序数词代替数字来表示天 (1st 代替 ...

  2. Hibernate进阶学习4

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

  3. Spring Cloud 入门 Consul-Server服务注册

    前面见过 Eureka服务注册,需要单独启用一个springboot项目  :这里介绍一个 spring cloud consul 服务, 只需要安装相关客户端,启动它就行: 1.安装Consul(以 ...

  4. 原生js关闭窗口

    if (navigator.userAgent.indexOf("MSIE") > 0) { if (navigator.userAgent.indexOf("MS ...

  5. js中break跳出多层循环

    // 当执行多重循环的时候break的情况 outer: for(var i=0;i<10;i++){ inter: for(var j=0;j<10;j++){ if(i>5){ ...

  6. Python代码结构——顺序、分支、循环

    ## 顺序结构 - 按照从上到下的顺序,一条语句一条语句的执行,是最基本的结构 ## 分支结构 if condition: statement statement ... elif condition ...

  7. stark组件(4):列表定义列,展示数据库数据

    效果图: 一.Stark组件 stark/service/core_func.py from django.urls import re_path from django.shortcuts impo ...

  8. 使用python制作神经网络——搭建框架

    一.神经网络的大体结构可分为三个函数,分别如下: 1.初始化函数 设定输入层节点,隐藏层节点和输出层节点的数量. 2.训练 学习给定训练集样本后,优化权重. 3.查询 给定输入,从输出节点给出答案 所 ...

  9. 005--Django2.0的路由层

    URL配置就像Django所支撑的网站目录,它的本质是每条URL调用的视图函数的映射表,每一个请求执行对应的视图函数. 1.简单的路由配置  from django.contrib import ad ...

  10. POJ:3104-Drying(神奇的二分)

    Drying Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 20586 Accepted: 5186 Description I ...