浅谈attr()和prop()

时间:2019-09-16
本文章向大家介绍浅谈attr()和prop(),主要包括浅谈attr()和prop()使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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()两种方法。

原文地址:https://www.cnblogs.com/xiaowoniulx/p/11527643.html