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

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

attr部分：

 1 attr: function( elem, name, value, pass ) { 
 2 var ret, hooks, notxml, 
 3 nType = elem.nodeType; 
 4 // don't get/set attributes on text, comment and attribute nodes 
 5 if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
 6 return; 
 7 } 
 8 if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) { 
 9 return jQuery( elem )[ name ]( value ); 
10 } 
11 // Fallback to prop when attributes are not supported 
12 if ( typeof elem.getAttribute === "undefined" ) { 
13 return jQuery.prop( elem, name, value ); 
14 } 
15 notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
16 // All attributes are lowercase 
17 // Grab necessary hook if one is defined 
18 if ( notxml ) { 
19 name = name.toLowerCase(); 
20 hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook ); 
21 } 
22 if ( value !== undefined ) { 
23 if ( value === null ) { 
24 jQuery.removeAttr( elem, name ); 
25 return; 
26 } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { 
27 return ret; 
28 } else { 
29 elem.setAttribute( name, value + "" ); 
30 return value; 
31 } 
32 } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { 
33 return ret; 
34 } else { 
35 ret = elem.getAttribute( name ); 
36 // Non-existent attributes return null, we normalize to undefined 
37 return ret === null ? 
38 undefined : 
39 ret; 
40 } 
41 }

prop部分：

 1 prop: function( elem, name, value ) { 
 2 var ret, hooks, notxml, 
 3 nType = elem.nodeType; 
 4 // don't get/set properties on text, comment and attribute nodes 
 5 if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
 6 return; 
 7 } 
 8 notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
 9 if ( notxml ) { 
10 // Fix name and attach hooks 
11 name = jQuery.propFix[ name ] || name; 
12 hooks = jQuery.propHooks[ name ]; 
13 } 
14 if ( value !== undefined ) { 
15 if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { 
16 return ret; 
17 } else { 
18 return ( elem[ name ] = value ); 
19 } 
20 } else { 
21 if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { 
22 return ret; 
23 } else { 
24 return elem[ name ]; 
25 } 
26 } 
27 }

我们注意到，两个方法最主要的源码部分是：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