【attr】JS中attr和prop属性的区别以及优先选择示例介绍-prop-优先选择

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方法代码（jQuery版本1.8.3）

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 ]; 
} 
} 
}

<input type="checkbox" id="test" abc="111" />

$(function(){ 
el=$("#test"); 
console.log(el.attr("style")); //undefined 
console.log(el.prop("style")); //CSSStyleDeclaration对象 
console.log(document.getElementById("test").style); //CSSStyleDeclaration对象 
});

el.attr("abc","111") 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //undefined

el.prop("abc", "222"); 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //222

<input type="checkbox" id="test" checked="checked" />

console.log(el.attr("checked")); //checked 
console.log(el.prop("checked")); //true 
console.log(el.attr("disabled")); //undefined 
console.log(el.prop("disabled")); //false