今天有点好奇,想看下这个方法是怎么实现的,我这次是jq2.0版本的,使用断点一步步的看下去,代码在大概在(7170)行左右
先来说下addClass(value), //参数可以是单个, 如:"active", 也可以是 "active active2"这样传进行。
然后说下这个方法执行
var 了一些初始化变量,=> typeof了一下是不是字符串
proceed = typeof value === "string" && value,
再往下就判断是不是一个function 调用自身里面实现的isFunction (有需要可以自己去看下这个方法) 然后用正则把value 转换成数组, 用正则
classes = (value || "").match(rnotwhite) || [];
然后就for循环 里面三目判断目标dom是不是一个元素节点(elem.nodeType)并且 判断自身有没有class 有就拿出来 没有就给一个" " (里面是有空格的)
cur = elem.nodeType === 1 && (elem.className ? (" " + elem.className + " ").replace(rclass, " ") : " " );
再下面就是while循环, 进行拼接className, 并在上面的cur 里面用indexOf查找当前class里面有没有已经在原来的class上,没有就进行拼接上去,后面去除字符串里面的空格,也是调用自身的trim()方法 最后判断当前的字符串和自己class的字符串相比, 不相等把className改变,最后 retrue this!
addClass: function (value) {
var classes, elem, cur, clazz, j, finalValue,
proceed = typeof value === "string" && value,
i = 0,
len = this.length;
if (jQuery.isFunction(value)) {
return this.each(function (j) {
jQuery(this).addClass(value.call(this, j, this.className));
});
}
if (proceed) {
// The disjunction here is for better compressibility (see removeClass)
classes = (value || "").match(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++])) {
if (cur.indexOf(" " + clazz + " ") < 0) {
cur += clazz + " ";
}
}
// only assign if different to avoid unneeded rendering.
finalValue = jQuery.trim(cur);
if (elem.className !== finalValue) {
elem.className = finalValue;
}
}
}
}
return this;
},
最后是源码
第一次写文章,写的不好请多指教!