在jq的高版本里出现了prop()方法,那么attr()和prop()的区别在哪呢?这两者分别在什么情况用呢?

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

eg:<a href="http://www.baidu.com" target="_blank">哈哈</a>

像href、target这样的属性是html元素本身就带有的固有属性,在处理时,使用prop()方法;

eg: <a href="http://www.baidu.com" action="ccc">哈哈</a>

像action这样的属性是我们自己自定义的DOM属性,在处理时,使用attr()方法;

eg:
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
这也是我在工作上遇到的一个坑,花了比较长的时间才找到问题的所在,不过这次的经历让我牢牢记住了两者之间的区别所在,收获良多。
工作之后也好久没写博客了,加油!

jquery里的attr()方法和prop()方法的区别的更多相关文章

  1. jquery中attr方法和prop方法的区别

    关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...

  2. jquery attr方法和prop方法获取input的checked属性问题

    jquery attr方法和prop方法获取input的checked属性问题   问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法 ...

  3. 关于jQuery——attr方法和prop方法获取input的checked属性操作

    经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取 ...

  4. StringUtils里的isEmpty方法和isBlank方法的区别

    原文地址:https://blog.csdn.net/a1102325298/article/details/80410740 isEmpty public static boolean isEmpt ...

  5. ThinkPHP的D方法和M方法的区别

    M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...

  6. M方法和D方法的区别

    M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...

  7. JAVA反射中的getFields()方法和getDeclaredFields ()方法的区别

    JAVA反射中的getFields()方法和getDeclaredFields ()方法的区别   关于获取类的字段有两种方式:getFields()和getDeclaredFields().我们先来 ...

  8. Exception 的 toString() 方法和 getMessage() 方法的区别

    Exception 的 toString() 方法和 getMessage() 方法的区别: 在开发的过程中打印错误日志时尽量使用e.toString() 方法, 因为当错误为空指针时 e.getMe ...

  9. ExtJS中listener方法和handler方法的区别

    listener方法和handler方法的区别在文档中的说明的太玄乎了,看不懂 listeners监听能够对一个click Event事件添加任意多个的事件响应处理函数 而handler处理只能够通过 ...

随机推荐

  1. 从零开始构建一个的asp.net Core 项目(二)

    接着上一篇博客继续进行.上一篇博客只是显示了简单的MVC视图页,这篇博客接着进行,连接上数据库,进行简单的CRUD. 首先我在Controllers文件夹点击右键,添加->控制器 弹出的对话框中 ...

  2. 前端开发需要了解的JS插件

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...

  3. WinRAR5.01注册码附注册机

    把下面的注册码复制到"记事本"中,另存为"rarreg.key"文件,放到WinRAR安装目录即完成注册.RAR registration datakjcy8U ...

  4. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  5. angular.js的时间指令

    最后样式 html .input-group(style="max-width:150px") input.form-control(uib-datepicker-popup=&q ...

  6. Centos7.0下将Python更新到Python2.7.13

    在云服务器下默认安装的python版本过低,所有我们要手动进行更新(不建议卸载老的版本,然后安装新的,这样会导致大量的异常错误)   为了防止在安装编译python时出错,需先更新gcc :yum - ...

  7. 主java程序猿知识体系结构

    zuoxiaolong博客园<浅谈程序猿书箱的选择,你会如何选择自己的爱书呢>一文,链接如下:http://www.cnblogs.com/zuoxiaolong/p/life19.htm ...

  8. 关于html表格单元格宽度的计算规则

    * { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...

  9. Nginx教程(三) Nginx日志管理

    Nginx教程(三) Nginx日志管理 1 日志管理 1.1 Nginx日志描述 通过访问日志,你可以得到用户地域来源.跳转来源.使用终端.某个URL访问量等相关信息:通过错误日志,你可以得到系统某 ...

  10. 六、 从Controller中访问模板数据(ASP.NET MVC5 系列)

    在这一章节中,我们将创建一个新的MoviesController类,写代码获取movie数据并用视图模板将它们显示到浏览器中. 在我们进行下一操作之前先Build the application.如果 ...