[JS]jQuery中attr和prop方法的区别

概述相比attr，prop是1.6.1才新出来的，两者从中文意思理解，都是获取/设置属性的方法（attributes和properties）。只是，window或document中使用.attr()方法在jQuery1.6之前不能正常运行，因为window和document中不能有attributes。

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

之前看网上对照二者的文章，更是列出1个表来辨别甚么标签下使用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, 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, name )) !== undefined ) { return ret; } else { elem.setAttribute( name, value + "" ); return value; } } "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; }}@H_851_502@

prop方法代码（jquery版本1.8.3）

prop: ) { // don't get/set propertIEs on text,85); Font-weight:bold; background:transparent">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 ) { in hooks && (ret = hooks.set( elem,85); Font-weight:bold; background:transparent">else { return ( elem[ name ] = value ); } } else { in hooks && (ret = hooks.get( elem,85); Font-weight:bold; background:transparent">null ) { return elem[ name ]; } }}@H_851_502@

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对象的1个属性。

既然明白了原理是这样，我们来看看1个例子：

<input type= 总结

以上是内存溢出为你收集整理的[JS]jQuery中attr和prop方法的区别全部内容，希望文章能够帮你解决[JS]jQuery中attr和prop方法的区别所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1017830.html