簡述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