jquery 中 attr 和 prop 的区别

时间:2021-03-01 03:32:01

问题:在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