您當(dāng)前位置：首頁(yè) > web前端 > htmlcss > [JS]jQuery中attr和prop方法的區(qū)別

[JS]jQuery中attr和prop方法的區(qū)別

來(lái)源：程序員人生發(fā)布時(shí)間：2015-02-24 21:30:27 閱讀次數(shù)：4670次

相比attr，prop是1.6.1才新出來(lái)的，二者從中文意思理解，都是獲得/設(shè)置屬性的方法（attributes和properties）。只是，window或document中使用.attr()方法在jQuery1.6之前不能正常運(yùn)行，由于window和document中不能有attributes。prop應(yīng)運(yùn)而生了。

之前看網(wǎng)上對(duì)照二者的文章，更是列出1個(gè)表來(lái)辨別甚么標(biāo)簽下使用prop，甚么標(biāo)簽下使用attr，諒解我是怠惰的人，最懼怕要背的東西，所以只有自己想一想辦法了。

既然我們想知道他們兩的區(qū)分，最好就看看他們的源代碼，不要被代碼長(zhǎng)度所嚇到，我們只看關(guān)鍵的幾句：

attr方法代碼（jQuery版本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方法代碼（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 ];
}
}
}

attr方法里面，最關(guān)鍵的兩行代碼，elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name )，很明顯的看出來(lái)，使用的DOM的API setAttribute和getAttribute方法操作的屬性元素節(jié)點(diǎn)。
而prop方法里面，最關(guān)鍵的兩行代碼，return ( elem[ name ] = value )和return elem[ name ]，你可以理解成這樣document.getElementById(el)[name] = value，這是轉(zhuǎn)化成JS對(duì)象的1個(gè)屬性。

既然明白了原理是這樣，我們來(lái)看看1個(gè)例子：