前文 对属性的设置、读取、删除方法做了分解，本文继续对jQuery attributes模块分解。
jQuery.fn.addClass
/*
***********************************
* value: 字符串或者是函数，字符串可以通过空格分隔className
*/
jQuery.fn.addClass
=
function
( value ) {
var
classes, elem, cur, clazz, j,
i
= 0
,
len
=
this
.length,
proceed
=
typeof
value === "string" &&
value;
//
如果value是函数
if
( jQuery.isFunction( value ) ) {
//
则对所有元素迭代运行addClass
return
this
.each(
function
( j ) {
jQuery(
this
).addClass( value.call(
this
, j,
this
.className ) );
});
}
//
如果value是字符串
if
( proceed ) {
//
对value字符串分割成数组
classes = ( value || "" ).match( core_rnotwhite ) ||
[];
//
遍历元素
for
( ; i < len; i++
) {
elem
=
this
[ i ];
//
如果节点是元素，则获取原来的className
cur = elem.nodeType === 1 && ( elem.className ?
(
" " + elem.className + " " ).replace( rclass, " " ) :
//
替换掉换行符制表符等
" "
);
//
如果cur不为false，即节点是元素
if
( cur ) {
j
= 0
;
//
遍历classes组装成新的className应有的值
while
( (clazz = classes[j++
]) ) {
if
( cur.indexOf( " " + clazz + " " ) < 0
) {
cur
+= clazz + " "
;
}
}
//
对className赋值，去掉头尾空白
elem.className =
jQuery.trim( cur );
}
}
}
return
this
;
};
添加class的实现上还是比较简单的，利用elem.className来赋值。需要注意：
var rclass = /[\t\r\n]/g;
jQuery.fn.removeClass
jQuery.fn.removeClass =
function
( value ) {
var
classes, elem, cur, clazz, j,
i
= 0
,
len
=
this
.length,
//
参数是否正确
proceed = arguments.length === 0 ||
typeof
value === "string" &&
value;
//
如果value是函数
if
( jQuery.isFunction( value ) ) {
//
则对所有元素迭代运行removeClass
return
this
.each(
function
( j ) {
jQuery(
this
).removeClass( value.call(
this
, j,
this
.className ) );
});
}
//
如果参数正确
if
( proceed ) {
//
分隔value成为class字符串数组
classes = ( value || "" ).match( core_rnotwhite ) ||
[];
//
遍历
for
( ; i < len; i++
) {
elem
=
this
[ i ];
//
获取className并进行预处理
cur = elem.nodeType === 1 && ( elem.className ?
(
" " + elem.className + " " ).replace( rclass, " "
) :
""
);
//
如果是元素
if
( cur ) {
j
= 0
;
//
遍历所有class字符串
while
( (clazz = classes[j++
]) ) {
//
寻找是否有对应的字符串
while
( cur.indexOf( " " + clazz + " " ) >= 0
) {
//
有则去掉
cur = cur.replace( " " + clazz + " ", " "
);
}
}
//
给className赋值，并去掉头尾空格
elem.className = value ? jQuery.trim( cur ) : ""
;
}
}
}
return
this
;
};
删除class的实现和addClass非常像，只是通过indexOf和replace来替换掉需要删除的class。
jQuery.fn.toggleClass
jQuery.fn.toggleClass =
function
( value, stateVal ) {
var
type =
typeof
value,
isBool
=
typeof
stateVal === "boolean"
;
//
(⊙o⊙)…不说了，大家懂得
if
( jQuery.isFunction( value ) ) {
return
this
.each(
function
( i ) {
jQuery(
this
).toggleClass( value.call(
this
, i,
this
.className, stateVal), stateVal );
});
}
//
遍历所有元素
return
this
.each(
function
() {
//
如果value是字符串
if
( type === "string"
) {
var
className,
i
= 0
,
self
= jQuery(
this
),
state
=
stateVal,
//
将value转成classNames字符串数组
classNames = value.match( core_rnotwhite ) ||
[];
//
遍历
while
( (className = classNames[ i++
]) ) {
//
stateVal是布尔量，则直接设置为stateVal，否则判断元素是否不存在该className
state = isBool ? state : !
self.hasClass( className );
//
如果该className不存在则添加，否则删除
self[ state ? "addClass" : "removeClass"
]( className );
}
//
如果value的类型是undefined或者boolean
}
else
if
( type === "undefined" || type === "boolean"
) {
//
如果元素的className存在
if
(
this
.className ) {
//
将其存入缓存
jQuery._data(
this
, "__className__",
this
.className );
}
//
对className赋值，为空或者缓存中的值
this
.className =
this
.className || value ===
false
? "" : jQuery._data(
this
, "__className__" ) || ""
;
}
});
};
为了实现jQuery.fn.toggleClass还是花了很大功夫的。
缓存的利用使得toggleClass操作更加方便，而不需要记录以前是那些class。
jQuery.fn.hasClass
jQuery.fn.hasClass =
function
( selector ) {
var
className = " " + selector + " "
,
i
= 0
,
l
=
this
.length;
for
( ; i < l; i++
) {
if
(
this
[i].nodeType === 1 && (" " +
this
[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0
) {
return
true
;
}
}
return
false
;
};
这个函数通过indexOf来寻找className是否存在。
jQuery.fn.val
jQuery.fn.val =
function
( value ) {
var
hooks, ret, isFunction,
elem
=
this
[0
];
//
如果没有参数
if
( !
arguments.length ) {
//
如果元素存在
if
( elem ) {
//
得到相应的钩子
hooks = jQuery.valHooks[ elem.type ] ||
jQuery.valHooks[ elem.nodeName.toLowerCase() ];
//
通过钩子来得到值
if
( hooks && "get"
in
hooks && (ret = hooks.get( elem, "value" )) !==
undefined ) {
return
ret;
}
//
如果没得到钩子，则通过elem.value来返回值
ret =
elem.value;
//
如果ret是字符串
return
typeof
ret === "string" ?
//
将回车符替换
ret.replace(rreturn, ""
) :
//
如果ret是空的，则返回""，否则返回ret
ret ==
null
? ""
: ret;
}
return
;
}
//
value是否是函数
isFunction =
jQuery.isFunction( value );
//
遍历所有元素
return
this
.each(
function
( i ) {
var
val,
self
= jQuery(
this
);
if
(
this
.nodeType !== 1
) {
return
;
}
//
如果value是函数，则转成参数
if
( isFunction ) {
val
= value.call(
this
, i, self.val() );
}
else
{
val
=
value;
}
//
将null/undefined当成""
if
( val ==
null
) {
val
= ""
;
//
将数字转成字符串
}
else
if
(
typeof
val === "number"
) {
val
+= ""
;
//
如果是数组，则遍历数组
}
else
if
( jQuery.isArray( val ) ) {
val
= jQuery.map(val,
function
( value ) {
return
value ==
null
? "" : value + ""
;
});
}
//
获取相应钩子
hooks = jQuery.valHooks[
this
.type ] || jQuery.valHooks[
this
.nodeName.toLowerCase() ];
//
如果钩子无法设置，则使用通常的设置方法
if
( !hooks || !("set"
in
hooks) || hooks.set(
this
, val, "value" ) ===
undefined ) {
this
.value =
val;
}
});
};
