jQuery中attr和prop方法的区别

猿友 2021-01-06 17:50:36 浏览数 (1785)
反馈

相比 attr,prop 是 1.6.1 才新出来的,二者从中文意思理解,都是获得/设置属性的方法(attributes 和 properties)。只是,window 或 document 中使用 .attr() 方法在 jQuery1.6 之前不能正常运行,由于 window 和 document 中不能有 attributes。prop 应运而生了。

之前看网上对照二者的文章,更是列出一个表来辨别什么标签下使用 prop,什么标签下使用 attr,谅解我是怠惰的人,最惧怕要背的东西,所以只有自己想一想办法了。

既然我们想知道他们两的区分,最好就看看他们的源代码,不要被代码长度所吓到,我们只看关键的几句:

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 方法里面,最关键的两行代码,elem.setAttribute( name, value + “” )和 ret = elem.getAttribute( name ),很明显的看出来,使用的 DOM 的 API setAttribute 和 getAttribute 方法操作的属性元素节点。

而 prop 方法里面,最关键的两行代码,return ( elem[ name ] = value )和 return elem[ name ],你可以理解成这样document.getElementById(el)[name] = value,这是转化成 JS 对象的一个属性。



0 人点赞