jQuery属性操作（四）
通过阅读jQuery为属性操作封装的基本方法和为处理兼容性问题提供的hooks，发现jQuery在属性操作方面并没有做过多的设计，只是处理一下兼容性问题，然后调用基础的DOM操作方法。以下是对JQuery提供的基础方法的阅读：
jQuery.fn.extend({
// 调用access方法进行参数整理之后调用$.attr方法
attr: function( name, value ) {
return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 );
},
// 遍历jQuery对象中的所有元素，对每一个元素调用$.removeAttr方法
removeAttr: function( name ) {
return this.each(function() {
jQuery.removeAttr( this, name );
});
},
// 调用access方法进行参数整理之后调用$.attr方法
prop: function( name, value ) {
return jQuery.access( this, jQuery.prop, name, value, arguments.length > 1 );
},
// 遍历jQuery对象中的所有元素，直接删除该元素的相应属性
removeProp: function( name ) {
return this.each(function() {
// 对html上的属性和DOM属性进行一些匹配转换
delete this[ jQuery.propFix[ name ] || name ];
});
},
addClass: function( value ) {
var classes, elem, cur, clazz, j,
i = 0,
len = this.length,
proceed = typeof value === "string" && value;
// 如果value是function。
if ( jQuery.isFunction( value ) ) {
return this.each(function( j ) {
// 执行该function并将结果作为参数再次调用addClass
jQuery( this ).addClass( value.call( this, j, this.className ) );
});
}
// 如果value是字符串
if ( proceed ) {
// 如果字符串中有空格，说明添加的不只是一个class，用空格将字符串转换成数组
classes = ( value || "" ).match( core_rnotwhite ) || [];
// 遍历jQuery中的每一个DOM元素
for ( ; i < len; i++ ) {
// 拿到当前元素
elem = this[ i ];
// 拿到当前元素上的所有当前class
cur = elem.nodeType === 1 && ( elem.className ?
( " " + elem.className + " " ).replace( rclass, " " ) :
" "
);
// 如果是元素节点（这里看起来像是判断该元素是不是已经有class，其实只是判断是不是元素节点）
if ( cur ) {
j = 0;
// 遍历用户传入的所有class
while ( (clazz = classes[j++]) ) {
// 如果当前元素已经有的class中没有用户传入的class，则在已经有的class中增加用户传入的class
if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
cur += clazz + " ";
}
}
// 删除最后得到的class字符串前后两端的空格之后赋值给当前元素的className属性
elem.className = jQuery.trim( cur );
}
}
}
// 为了实现链式操作，返回this
return this;
},
// 删除class和增加class的逻辑基本一致
removeClass: function( value ) {
var classes, elem, cur, clazz, j,
i = 0,
len = this.length,
proceed = arguments.length === 0 || typeof value === "string" && value;
if ( jQuery.isFunction( value ) ) {
return this.each(function( j ) {
jQuery( this ).removeClass( value.call( this, j, this.className ) );
});
}
if ( proceed ) {
classes = ( value || "" ).match( core_rnotwhite ) || [];
for ( ; i < len; i++ ) {
elem = this[ i ];
cur = elem.nodeType === 1 && ( elem.className ?
( " " + elem.className + " " ).replace( rclass, " " ) :
""
);
if ( cur ) {
j = 0;
while ( (clazz = classes[j++]) ) {
// 只有此处不同，是从已经有的class中删除用户传入的class
while ( cur.indexOf( " " + clazz + " " ) >= 0 ) {
cur = cur.replace( " " + clazz + " ", " " );
}
}
elem.className = value ? jQuery.trim( cur ) : "";
}
}
}
return this;
},
// toggleClass是通过调用addClass和removeClass来实现的。
toggleClass: function( value, stateVal ) {
var type = typeof value;
// stateval是一个boolean值，当为true时，发挥addClass的作用，当为false时，发挥removeClass的作用
if ( typeof stateVal === "boolean" && type === "string" ) {
return stateVal ? this.addClass( value ) : this.removeClass( value );
}
// 如果是个function，执行之后结果作为参数继续调用toggleClass
if ( jQuery.isFunction( value ) ) {
return this.each(function( i ) {
jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );
});
}
// toggleClass的主体部分
return this.each(function() {
if ( type === "string" ) {
var className,
i = 0,
self = jQuery( this ),
classNames = value.match( core_rnotwhite ) || [];
// 遍历所有用户传入的class
while ( (className = classNames[ i++ ]) ) {
// 调用hasClass方法，如果有这个class就删除
if ( self.hasClass( className ) ) {
self.removeClass( className );
// 如果没有就添加
} else {
self.addClass( className );
}
}
// 如果用户在调用toggleClass时没有传入class，则对已经有的所有class进行toggle
} else if ( type === core_strundefined || type === "boolean" ) {
if ( this.className ) {
// 当删除class时，为了能够在添加回来，将其储存到jQuery内部使用的data对象中
data_priv.set( this, "__className__", this.className );
}
// 如果当前元素有class或者没有value（说明没有传value，而是传入了stateVal，这个时候是想要删除class），清空className，否则从缓存中拿出来添 // 加给className属性
this.className = this.className || value === false ? "" : data_priv.get( this, "__className__" ) || "";
}
});
},
hasClass: function( selector ) {
var className = " " + selector + " ",
i = 0,
l = this.length;
for ( ; i < l; i++ ) {
// 如果是元素节点，替换掉空格、空行等之后看是否存在用户传入的class
if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0 ) {
// 如果有，返回true
return true;
}
}
// 默认false
return false;
},
// 得到或删除元素值
val: function( value ) {
var hooks, ret, isFunction,
// 只对第一个元素进行操作
elem = this[0];
// 如果没有参数，则说明是要取元素值
if ( !arguments.length ) {
if ( elem ) {
// 看看该元素是否有对应的hooks
hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];
// 如果有对应的hooks，并且hooks中有get方法，则调用get方法。如果get方法返回了不是undefined的值，则返回该值。
if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
return ret;
}
// 如果不存在hooks，则正常处理，直接拿到元素的value
ret = elem.value;
return typeof ret === "string" ?
ret.replace(rreturn, "") :
ret == null ? "" : ret;
}
return;
}
// 看参数是否是function
isFunction = jQuery.isFunction( value );
// 处理有参数的情况（设置元素值）
return this.each(function( i ) {
var val;
// 如果不是元素节点，直接返回
if ( this.nodeType !== 1 ) {
return;
}
// 如果是function，将执行结果赋值个val
if ( isFunction ) {
val = value.call( this, i, jQuery( this ).val() );
} else {
val = value;
}
// 如果val为null，则赋值为空字符串
if ( val == null ) {
val = "";
// 如果是number，转换成字符串
} else if ( typeof val === "number" ) {
val += "";
// 如果是数组，呃。。
} else if ( jQuery.isArray( val ) ) {
val = jQuery.map(val, function ( value ) {
return value == null ? "" : value + "";
});
}
// 看是否有对应的hooks
hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];
// 如果没有对应的hooks，或者hooks中没有set方法，或者执行hooks的set方法返回的是undefined（这里其实默默的执行了hooks的set方法）
if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
// 正常赋值
this.value = val;
}
});
}
});
