jQuery属性操作（二）

挂载到$上的几个属性操作方法分析，发现属性操作用到了sizzle封装的方法

attr: function( elem, name, value ) {
       var hooks, ret,
           nType = elem.nodeType;
       // 如果elem不存在，或者是文本节点、注释或者是属性节点，直接返回。
       if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
           return;
       }
       // 当不支持getAtrribute方法时（估计是处理浏览器兼容问题）
       if ( typeof elem.getAttribute === core_strundefined ) {

　　　 // 交给prop处理
return jQuery.prop( elem, name, value );
}

// All attributes are lowercase
// Grab necessary hook if one is defined

　　 // 当elem类型不是元素时或者elem不是XML文档时
if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
// 将属性名转换成小写字母

　　　　name = name.toLowerCase();

　　　　 // 根据属性名得到对应的hooks，竟然依赖Sizzle，汗。。。
           hooks = jQuery.attrHooks[ name ] ||
               ( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook );
       }
　　 // 如果有第三个参数（value）
       if ( value !== undefined ) {
　　　　// 如果第三个参数是null
           if ( value === null ) {

　　　　　　// 清空elem上属性为name的属性
               jQuery.removeAttr( elem, name );
　　　　// 如果hooks存在，并且hooks存在set方法，执行hooks的set方法将结果赋值给ret，如果ret不是undefined，返回ret
           } else if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
               return ret;
　　　　// 如果是支持setAttribute的浏览器，直接调用setAttribute方法，并将value转换成字符串
           } else {
               elem.setAttribute( name, value + "" );
               return value;
           }
　　　// 如果没有value，并且hooks存在，并且hooks有get方法，调用get方法获取到元素上的name属性并返回属性值
       } else if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
           return ret;
　　 // 此处处理没有value，但不需要hooks处理的情况。
       } else {

　　　　 // jQuery.find == Sizzle。调用sizzle封装的方法获取元素属性值
           ret = jQuery.find.attr( elem, name );
           // 返回ret
           return ret == null ?
               undefined :
               ret;
       }
   },
　 // 删除属性
   removeAttr: function( elem, value ) {
       var name, propName,
           i = 0,

　　　　// value可以是一个空格间隔的字符串，通过正则处理，将value按空格分隔形成数组，赋值给attrNames。
attrNames = value && value.match( core_rnotwhite );
　　 // 如果attrNames数组不为空，并且elem属于元素节点
if ( attrNames && elem.nodeType === 1 ) {

　　　　// 遍历attrNames数组
while ( (name = attrNames[i++]) ) {

　　　　　　// 如果该属性存在于propFix对象中，则将对象中对应的值赋值给propName,否则直接将name赋值给propName（propFix中做了一些替换）
               propName = jQuery.propFix[ name ] || name;
　　　　　　// 如果是布尔属性（猜测可能是处理例如checked这样的属性的）
               if ( jQuery.expr.match.bool.test( name ) ) {
                   // 将其值设置为false
                   elem[ propName ] = false;
               }
　　　　　　// 调用elem的removeAttribute方法，删除那么属性
               elem.removeAttribute( name );
           }
       }
   },

巴特西

jQuery属性操作（二）

最新文章

热门文章