The difference between the attr and prop methods in jQuery

Prop is new to 1.6.1 compared to attr, both of which are methods of obtaining/setting attributes (attributes and properties) in terms of Chinese meaning. H owever, the .attr() method used in window or document does not function properly until jQuery1.6, because there can be no attributes in window and document. Prop came into being.

Before reading the online comparison of the two articles, but also listed a table to identify what label under the use of prop, what label under the use of attr, understanding that I am idle people, the most afraid to back things, so only their own to think of a way.

Now that we want to know the difference between the two of them, it's best to look at their source code and not be intimidated by the length of the code, let's just look at the key words:

Attr method code (jQuery version 1.8.3)

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 method code (jQuery version 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 ];
} 
}   
}

Inside the attr method, the two most critical lines of code, elem.setAttribute (name, value,") and ret,elem.getAttribute (name), are clearly seen using the DOM's API setAttribute and getAttribute methods to manipulate the property element nodes.

And in the prop method, the two most critical lines of code, return (elem (name) value and return elem (name), can be understood as such.getElementById (el) and value, which is a property that translates into a JS object.