浅谈attr()和prop()

Posted 2020-11-13 xiaowoniulx

attr()和prop()这两个属性的时候感觉很迷茫，而且配合官方给出的推荐使用图：

prop()可以做到的attr()完全都可以，而且做不到的attr()也可以做到。何用？  然后我就把它丢掉了。。。直到。。

 

今天切一个页面，在checkbox判断的方面上除了问题，就是通过jquery设置选中的时候，发现checked和disabled属性已经设置上去了，而且一旦手动点掉checked或者选中的时候，就无法再次做判断

if($(‘#d1‘).attr(‘disabled‘)!=‘disabled‘){
        alert(‘1‘)
}

如果本身是存在disabled的时候，alert无法触发，本身没有disabled属性的时候才能触发，

if($(‘#d1‘).prop(‘disabled‘)!=‘disabled‘){
        alert(‘1‘)
}

但是把attr()改成prop()的时候alert()就可以触发了。

 还有

通过jquery的attr属性修改选中状态。我们神奇的发现，选中的状态已经变了，但是样式却没有变过来。

$("#reply1").attr("checked", true);

有些同学可能要说了，上面的代码有问题。应该是 $("#reply1").attr("checked", “checked”);

然而我们发现这并没有什么卵用。。。。于是乎我彻底凌乱了，难道是自己的问题还是自己的问题？

于是，我开始了2小时的大脑爆炸！脑子一直处于懵逼状态，最终发现，之前被我遗弃的prop()是可以

触发的。所以我得出结论---JQuery本身的问题。

所以在这里告诉大家，不是我们的错，是jquery的问题！！！

 

那么现在我们来重新复习一遍prop();

prop()  ---  JQuery 1.6版本新增属性，包含四种用法：

1,JQueryObject.prop(object);

返回属性的值

2,JQueryObject.prop(propertyName,value);

设置属性和值

3,JQueryObject.prop(property,function(index,currentvalue));

使用函数设置属性和值

4,,JQueryObject.prop(property:value,property:value,....);

设置多个属性和值

 

注意：

　　1.当该方法用于返回属性值时，则返回第一个匹配元素的值

　　2.当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

prop()方法多用于检索属性值，例如（DOM属性,selectedIndex, tagName, nodeName, nodeType, ownerDocument, 

defaultChecked, 和 defaultSelected）;

但是检索html属性的时候，要使用attr()代替。

相对而言，移除属性使用相对的removeAttr()和removeProp()两种方法。