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）