简述jq中attr()和prop()的区别

attr，prop都是属性的意思，那他们有什么区别呢？我们先来看一下jquery的部分源码：

attr部分：

 attr: function( elem, name, value, pass ) {
 var ret, hooks, notxml,
 nType = elem.nodeType;
 // don't get/set attributes on text, comment and attribute nodes
 if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
 return;
 }
 if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) {
 return jQuery( elem )[ name ]( value );
 }
 // Fallback to prop when attributes are not supported
 if ( typeof elem.getAttribute === "undefined" ) {
 return jQuery.prop( elem, name, value );
 }
 notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
 // All attributes are lowercase
 // Grab necessary hook if one is defined
 if ( notxml ) {
 name = name.toLowerCase();
 hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
 }
 if ( value !== undefined ) {
 if ( value === null ) {
 jQuery.removeAttr( elem, name );
 return;
 } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
 return ret;
 } else {
 elem.setAttribute( name, value + "" );
 return value;
 }
 } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
 return ret;
 } else {
 ret = elem.getAttribute( name );
 // Non-existent attributes return null, we normalize to undefined
 return ret === null ?
 undefined :
 ret;
 }
 }

prop部分：

 prop: function( elem, name, value ) {
 var ret, hooks, notxml,
 nType = elem.nodeType;
 // don't get/set properties on text, comment and attribute nodes
 if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
 return;
 }
 notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
 if ( notxml ) {
 // Fix name and attach hooks
 name = jQuery.propFix[ name ] || name;
 hooks = jQuery.propHooks[ name ];
 }
 if ( value !== undefined ) {
 if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
 return ret;
 } else {
 return ( elem[ name ] = value );
 }
 } else {
 if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
 return ret;
 } else {
 return elem[ name ];
 }
 }
 }

我们注意到，两个方法最主要的源码部分是：attr是通过setAtrribute和getAttribute来设置的，使用的是DOM属性节点，而prop是通过document.getElementById(el)[name] = value来设置的，是转化为js对象的属性。

通常在获取或者设置checked，selected，readonly，disabled等的时候使用prop效果更好，减少了访问dom属性节点的频率。

大家知道，有的浏览器只要写checked，disabled就可以了，而有的则需要些checked=“checked”，disabled=“disabled”。比如用attr来获取checked，选中状态获取attr（“checked”）为checked，没有选中则为undefined。。而prop来获取的为，选中为true，没有选中为false。

另外，用prop来设置属性名，html结构是不会发生变化的。而用attr来设置属性名，html结构是会发生变化的。

总的来说，按照我自己的理解，一般如果是标签自身自带的属性，我们用prop方法来获取；如果是自定义的属性，我们用attr方法来获取。

参考链接：http://www.jb51.net/article/51688.htm