问题:在jQuery引入prop方法后,什么时候使用attr,什么时候使用prop,两者区别。

判断:

对于HTML元素本身所有的固有属性,在处理的时候,使用prop方法

对于HTML元素后来我们自己定义的dom属性,在处理的时候,使用attr方法

什么是固有属性呢?

举个例子: <a href='http://www.baidu.com' target="_blank" class="btn">百度一下</a>

在这里,<a>元素的dom属性有 'href,target,class',这些属性就是<a>元素本身带有的属性,也是w3c标准中就包含的属性,这些就叫做固有属性,处理这些属性时,建议使用prop方法。

再举个例子:<a href="http://www.baidu.com" id="save" action='save'>保存</a>

在这里,<a>元素的dom属性有 'href,id,action',同理,前面两个href和id是固有属性,而后面的action是我们自定义添加上去的,<a>元素本身是没有这个属性的。像这种自定义的dom属性,处理时建议使用attr方法。使用prop方法取值或者设置值的时候会返回undefined值。(其实在这里没有太大区别,固有属性同样可以使用attr方法操作,只不过自定义属性需使用attr方法操作)

最后一个例子,也是一般情况下区分attr和prop方法的直观表示:(表单元素才能明显区分prop和attr方法的区别)

<input type='checkbox' id='chk1' />

<input type='checkbox' id='chk2' checked="checked" />

(如果不熟悉表单元素的话可以自行查看w3c)像checkbox,radio,select这样的元素,选中属性对应‘checked’,‘checked’和‘selected’,这些属性也属于固有属性,因此需使用prop方法操作才能返回正确的结果。

结果分析:

使用attr方法,打印结果返回:

$("#chk1").attr("checked");  //undefined

$("#chk2").attr("checked");  //“checked”

如果使用prop方法,其结果为:

$("#chk1").prop("checked");  //false

$("#chk2").prop("checked”);  //true

jquery 中 attr 和 prop 的区别的更多相关文章

  1. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  2. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  3. jquery中attr和prop的区别(转)

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  4. jquery中attr和prop的区别分析

    这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...

  5. Jquery学习笔记(6)--jquery中attr和prop的区别【精辟】

    jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很 ...

  6. Jquery中attr 和 prop的区别和联系

    昨天在选择借款方类型的时候总是会出现选择要点两次的现象,比如点击公司,第一次点击选择公司,没有选中,必须在次点击才可以选中,总感觉是有点延迟加载的意思,后来审查元素, 发现是redio元素,这样的话就 ...

  7. jquery中attr与prop的区别

    先从一个老生常谈的问题说起,使用jquery实现全选全不选.楼主先使用的jquery版本是 jquery-1.11.1.min.js 全选<input type="checkbox&q ...

  8. Jquery中attr()与prop()的区别

    在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同.但是,这两个函数的用处却并不相同.下面我们来详细介绍这两个函数之间的区别. 1.操作对象 ...

  9. jQuery中 attr和Prop的区别

    出自这里: http://www.365mini.com/page/jquery_noconflict.htm 在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参 ...

随机推荐

  1. drupal7 获取当前使用的主题的名称

    直接引用全局变量就行: 参考: 代码测试: global $theme, $theme_key; echo $theme; echo '<br>'; echo $theme_key; 结果 ...

  2. DOM操作表单(select下拉选框)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. 如何提高 Java 中锁的性能

    锁不是问题的根源,锁之间的竞争才是 通常在多线程的代码中遇到性能方面的问题时,一般都会抱怨是锁的问题.毕竟锁会降低程序的运行速度和其较低的扩展性是众所周知的.因此,如果带着这种“常识”开始优化代码,其 ...

  4. 算法之杨辉三角形(Java语言)

    杨辉三角形, 又称贾宪三角形.帕斯卡三角形. 前9层写出来如下: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 1 6 15 20 15 6 1 1 7 21 ...

  5. firewall 如何开放端口

    转自官方网页:http://www.firewalld.org/documentation/howto/open-a-port-or-service.html How to open port 80/ ...

  6. Azure 虚拟机如何配置 AntiMalware

    本文仅演示通过 PowerShell 方式安装并配置 AntiMalware 的过程. 经典虚拟机          立即访问http://market.azure.cn 加载 Antimalware ...

  7. Oracle案例08——xx.xx.xx.xx,表空间 SYSAUX 使用率>95%%

    本实例主要针对Oracle表空间饱满问题处理方法做个步骤分享.  一.告警信息 收到zabbix告警信息,表空间 SYSAUX 使用率>95%%,系统表空间sysaux使用率超过了95%. 二. ...

  8. ASP.net Substitution 页面缓存而部分不缓存的实现方法

    在ASP.NET中要实现部分内容非缓存,而其它的都需要缓存输出,可以使用Substitution控件实现. <%@ Page Language="C#" AutoEventW ...

  9. Python学习---range/for/break/continue简单使用

    range的使用:注意,在python3中,交互模式下已经不显示了 for循环的使用 打印50-70 # 第一种方案 for i in range(100): if i <= 70 and i ...

  10. Mysql常用语句与函数(待续)

    -- 查询语句select class from stu_info where sid=1000000102;select * from stu_info t where t.age=88; -- t ...