jquery中attr和prop的区别

 

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。

关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:

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

上面的描述也许有点模糊,举几个例子就知道了。

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

再举一个例子:

<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"

全文完。

浅说prop与attr的区别的更多相关文章

  1. jquery中的prop和attr比较区别

    近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...

  2. jQuery的prop和attr的区别,及判断复选框是否选中

    jQuery的prop和attr的区别 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...

  3. jquery里prop和attr的区别

    本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法. 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可 ...

  4. jquery中prop和attr的区别

    jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...

  5. jQuery学习之prop和attr的区别示例介绍

    1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( ...

  6. 浅谈.prop() 和 attr() 的区别

    今天编码时遇到一个问题,通过后台查询的数据设置前端checkbox的选中状态,设置选中状态为.attr('checked','true');没有问题,但是当数据重新加载时,checkbox应清空即所有 ...

  7. prop与attr的区别

    与prop一样attr也可以用来获取与设置元素的属性. 区别在于,对于自定义属性和选中属性的处理. 选中属性指的是 checked,selected 这2种属性 1. 对于自定义属性 attr能够获取 ...

  8. prop和attr的区别

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于 ...

  9. jquery中prop()和attr()的区别

    相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...

随机推荐

  1. UValive 5713 Qin Shi Huang's National Road System

    Qin Shi Huang's National Road System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/3 ...

  2. objective-c保护属性

    #import <Foundation/Foundation.h> @interface ClassVirable : NSObject{ NSInteger year;//保护树形 } ...

  3. poj 3259 Wormholes【spfa判断负环】

    Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 36729   Accepted: 13444 Descr ...

  4. 月見(つきみ) 夕(ゆう) SumiHui.墨虺

    造影早迎中秋,自己通过word设计的

  5. wmic

    前沿:WMIC命令在我们的工作中可以帮助我们减少对其他工具的依赖并节省我们的时间,实在是一个值得学习和研究的好东西 命令很多,这里我把网上目前能找到的较实用的一些命令整理出来,希望各位看官能找到自己需 ...

  6. java 新手

    public class hello{ public static void main(String args[]){ int a=23,b=32,c=34; int s=Math.max(a,c); ...

  7. 手把手教你在ubuntu下创建桌面快捷方式

    习惯使用windows的朋友来说创建桌面快捷方式简直就是so easy, 鼠标右键点击文件-->选择发送桌面快捷方式.就OK了.对于ubuntu下该如何创建桌面快捷方式呢?以下以创建eclips ...

  8. LeetCode201 Bitwise AND of Numbers Range Java 题解

    题目: Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND of all num ...

  9. 有关Transaction not successfully started问题解决的方法

    我的项目配置:struts2+hibernate3.3+spring3.2.5 主要问题:在进行更新和提交操作时出现下面异常 org.springframework.transaction.Trans ...

  10. cidaemon.exe进程cpu占用率高及关闭cidaemon.exe进程方法

    问题描写叙述:   这段时间机器总是出现一个奇怪的问题:cidaemon.exe进程占用CUP率98%以上,大大影响了电脑的正常使用.资源管理器中出现多个cidaemon.exe进程,强制结束占用cp ...