程序员人生 网站导航

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

栏目:htmlcss时间:2015-02-24 21:30:27

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

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

  • <input type=
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐