【学】jQuery的源码思路5——增加class的操作

时间:2023-03-08 20:22:38
【学】jQuery的源码思路5——增加class的操作
  • hasClass, addClass, removeClass, toggleClass
//addClass,加入class会对元素,利用正则,将class中多余的空格去掉
zQuery.prototype.addClass=function(sClass){
var re=new RegExp('\\b'+sClass+'\\b');
for(var i=0;i<this.elements.length;i++){
if(!re.test(this.elements[i].className)){
this.elements[i].className=this.elements[i].className+' '+sClass;
}
this.elements[i].className=this.elements[i].className.replace(/^\s+|\s+$/g,'').replace(/\s+/g,' ');
}
}; //removeClass,同样会整理class中的多余空格
zQuery.prototype.removeClass=function(sClass){
var re=new RegExp('\\b'+sClass+'\\b');
for(var i=0;i<this.elements.length;i++) {
if(re.test(this.elements[i].className)){
this.elements[i].className=this.elements[i].className.replace(re,'');
if(!this.elements[i].className){
this.elements[i].removeAttribute('class');
}
} if(this.elements[i].className){
this.elements[i].className=this.elements[i].className.replace(/^\s+|\s+$/g,'').replace(/\s+/g,' ');
}
}
}; //hasClass
zQuery.prototype.hasClass=function(sClass){
var re=new RegExp('\\b'+sClass+'\\b');
for(var i=0;i<this.elements.length;i++){
return re.test(this.elements[i].className);
}
}; //toggleClass
zQuery.prototype.toggleClass=function(sClass){
for(var i=0;i<this.elements.length;i++){
if($(this.elements[i]).hasClass(sClass)){
$(this.elements[i]).removeClass(sClass);
}else{
$(this.elements[i]).addClass(sClass);
}
}
};