jQuery中attr和prop的介绍

属性和property属性和property可以转换为属性。为了说明区别，这两个词通常被翻译成属性和属性。Div id='test'Click Here/div上面的HTML语句中有三个节点，分别是Element“div”、attribute“id”和text“click Here”。最常见的属性正式指的是属性类型节点。在JavaScript中，有一个特殊的函数。getattribute(name)/set attribute(name，value)。属性并不是我们在HTML文档中唯一能看到的，当然我们可以通过自定义将其添加到DOM节点中，并复制代码如下： div id=' test' 123/div脚本类型=' text/JavaScript ' var t=document . getelementbyid(' test ')；t.setAttribute('class '，' active ')；t.setAttribute('customizedAttr '，' customized ')；/script这样，可以修改div来复制代码如下： div id=' test ' class=' active ' customized attr=' customized ' 123/由div属性设置的Attribute最终会反映在元素的属性类型的节点中。属性是DOM对象的字段。像我们通常使用的一些对象一样，它包含许多字段。这些字段是属性。取值或设置值的方式与普通字段一样。字段”。似乎属性和属性应该没有关系。属性和属性很容易混淆，因为许多属性节点也有相应的属性属性。比如上面div的“id”属性也可以通过t.id得到(其实大部分人都是这样得到的)。通过属性更改id后，getAttibute获得的id就是更新后的id。复制的代码如下：t.id=' test1console . log(t . GetAttribute(' id '))；//test1我们还可以自定义属性的复制代码如下：t。定制道具='定制道具'；1.区别：内置属性，属性和属性共享数据，属性变化会影响属性，反之亦然。但是，它们的自定义属性是独立的数据，即使它们的名称相同，也不会相互影响。它看起来像下图，但是IE6和ie7仍然毫无区别地共享自定义属性数据。

2.并非所有属性都与相应的属性名称一致。例如，在使用属性操作时，刚刚使用的属性的类属性应该是这样的。类名的复制代码如下：t . class name=' active 2 '；3.对于值为真/假的属性，类似于输入的勾选属性，属性得到的值是HTML文档的文字值，属性是计算结果。属性的更改不影响属性的文字值。但是，当属性更改时，代码将从属性计算中复制如下： input tid=' test3 ' Type=' checkbox '/代码将复制如下： vart=document . getelementbyid(' test3 ')；console.log(t.getAttribute('选中'))；//null console . log(t . checked)；//false；t.setAttribute('checked '，' checked ')；console.log(t.getAttribute('选中'))；//checked console . log(t . checked)；//true t . checked=false；console.log(t.getAttribute('选中'))；//checked console . log(t . checked)；//false4。对于一些与路径相关的属性，它们获得的值不一样，但相同的属性是文字，属性是计算出的完整路径。复制代码如下： a id=' test4 ' href=' # ' click/a复制代码如下： vart=document . getelementbyid(' test4 ')；console . log(t . GetAttribute(' href '))；//# console . log(t . href)；//file :////c :/users/bsun/desktop/ss/anonymous。HTML #关于浏览器(IE)带来的兼容性问题，我们可以看到IE混淆了DOM对象属性和HTML标签属性。Attr和prop被认为是setAttribute和getAttribute的不正确实现。看完以上内容，大家就明白为什么jQuery要加入prop方法了，在jQuery API中有一个关于Attributes VS. Properties的专门解释。在某些特殊情况下，属性和属性是非常不同的。在jQuery1.6之前。attr()方法在获取某些属性时使用了属性值，这会导致一些不一致的行为。在jQuery1.6中。prop()方法提供了一种获取属性值的显式方法。attr()方法只返回属性。例如，selectedindex、标记名、节点名、节点类型、ownerdocument、defaultchecked和defaultSelected应该使用。prop()方法获取/设置值。在jQuery1.6之前，这些不属于属性的属性需要由。attr()方法。这些没有相应的属性，只有属性。关于布尔属性，比如一个HTML标签，JavaScript中的变量名是elem，复制代码如下：输入类型=' checkbox ' checked=' checked '/elem . checked true(布尔)会随着checkbox state $ (elem)而改变。prop('checked' )true(布尔值)将随复选框statelem . getattribute(' checked ')' checked '(字符串)复选框的初始状态而变化；不改变$(elem)。复选框的初始状态；不改变$(elem)。attr(‘选中’)(1 . 6 . 1)‘选中’(字符串)将随着复选框状态$(elem)而改变。attr(' checked ')(1.6之前)True (boolean)随checkbox状态更改根据W3C forms规范，checked属性是布尔值，这意味着只要checked属性以HTML显示，对应的属性就应该为True，即使checked没有值，这也同样适用于其他布尔属性。但是，关于被检查的属性，最需要记住的是，它与被检查的属性不一致。其实这个属性和defaultChecked属性是一致的，只应该用来设置checkbox的初始值。checkedbox的状态不会改变checked box属性，但checked box属性会改变。因此，要判断checkebox是否被选中，浏览器应该使用property复制代码如下： if (elem。选中)if ($ (elem)。prop(' checked ')if($(elem)。是(' 3360 checked ')，这也适用于其他动态属性，如selected和值。在IE9之前的版本中，如果在移除DOM元素之前没有删除属性，则使用。prop()方法会导致内存泄漏。

为了安全地设置DOM对象的值并避免内存泄漏，可以使用。data()方法。其实使用场景理解了上面的内容，很清楚什么时候用。attr()以及何时使用。prop()，但仍然是热门图片。