jQuery中prop() , attr() ,css() 的区别

1.  HTML属性是指页面标记中放在引号中的值,而DOM属性则是指通过JavaScript能够存取的值。

    (1)在jQuery中,prop()是操作DOM属性,attr()是操作HTML属性。

HTML属性与对应的DOM属性名字有时候不相同,这种情况并不多,比如p元素有一个名为class的HTML属性,而对应的DOM属性则为className。 有时候我们的确需要留意这两种属性的差异。某些DOM属性,例如nodeName、 nodeType、 selectedIndex和childNodes,在HTML中没有对应的属性,因此通过.attr()方法就没有办法操作它们。此外,数据类型方面也存在差异,比如HTML中的checked属性是一个字符串,而DOM中的checked属性则是一个布尔值

    (2)HTML属性与DOM属性差别最大的地方,恐怕就要数表单控件的值了。比如,文本输入框的value属性在DOM中的属性叫defaultValue, DOM中就没有value属性。而选项列表(select)元素呢,其选项的值在DOM中通常是通过selectedIndex属性,或者通过其选项元素的selected属性来取得。

由于存在这些差异,在取得和设置表单控件的值时,最好不要使用.attr()方法。而对于选项列表呢,最好连.prop()方法也不要使用。那使用什么呢,建议使用jQuery提供的.val()方法。

  (3).css()与它们的区别自然很明显了,这个方法只能用来获取/设置DOM对象的样式。

如color、background,对应js里的obj.style.样式名=样式值。

 (4)总结:1. obj.getAttribute(vName)、obj.setAttribute('vName','value')、obj.removeAttribute('vName')和$(obj).attr()只能操作显式写在Dom节点里的特性,这些特性可以看作是节点的一部分组成成员。

      2. property是DOM节点对象的一个字段,跟我们平常使用的对象的字段/属性一样,除了内置的一些属性(如checkbox有checked属性、disabled属性),也可以设置自定义属性(但是属性值只限于简单类型)。

      3. 由于一些Dom节点的attribute和property具有共同的名字或值,所以二者容易混淆,但是又由于二者之间共享数据,一个改变了,另一个也会自动改变。所以需要操作它们时,只要设置二者之中的任何一个就可以了。对于自定义的特性和属性,二者是独立的,互不影响(即使二者名字相同),但由于IE6、7对自定义的特性和属性也是共享数据,所以最好不要取一样的名字。

        4. property值为true/false对应的attribute(如果有的话)的值有点特别,只要在dom节点里添加了这个attribute,不管它的值是什么(不管setAttribute('checked',value)中的value是什么)都与property=true的效果是一样的,只有removeAttribute才能改变property为false。

    

对于值是true/false的property,如input:checkbox的checked等,property的改变并不影响attribute字面量,但是attribute改变会影响property计算。 

有一点很重要:property值为true/false对应的attribute,以checked为例。实际上这个checked特性并不是与checked属性一致,而是与defaultChecked属性一致。所以如果节点<input checked>,然后设置obj.checked=false;使它处于不选中状态,再obj.setAttribute('checked','true');此时它依然处于不选中状态。所以checked特性应该只用来在节点里初始化,后期改变状态在原生js里都只用checked属性来控制。  另外,jquery的.attr()对原始的.setAttribute、.getAttribute作了修改,使.attr('checked',true)和.attr('checked',false)效果与设置obj.checked属性一致了,并且jquery的.attr('checked')只返回‘checked'(节点中设置了checked特性或通过.attr或.setAttribute设置了特性)和'undefined'(即使设置了checked属性为true)

原文地址:https://www.cnblogs.com/AinyTong/p/6221870.html