仿jQuery原生js实现----hasClass，removeClass,addClass

今天发现自己遇到事情总会很粗心，不是不会做，明明自己做出来了，却心急，然后将代码改错。说以前习惯差，说自己不够重视这个工作，不负责任都对。我改，毛病一定得改！！！

jQuery的hasClass,removeClass,addClass我们经常用到，那么为了提高水平。决定自己实现一个，好好学习，天天向上。

1
    
2
    
3
    
4
    
5
    
6

hasClass = (ele,cls) => {
    if(!cls) return false;
    return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');
}

addClass =(ele,cls) =>{
    //是否有该类
    if(cls.replace('/\s*/g','')) return;
    !hasClass(ele,cls)&&(ele.className = ele.className == ''?cls:ele.className+' '+cls);
}

removeClass = (ele,cls) => {
    if(hasClass(ele,cls)){
        let newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
        while (newClass.indexOf(' ' + cls + ' ') >= 0) {
            newClass = newClass.replace(' ' + cls + ' ', ' ');
        }
        ele.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}

console.log(hasClass(document.querySelector('div'),'adda'));
addClass(document.querySelector('div'),'  ');
// removeClass(document.querySelector('div'),'adda');

在不考虑兼容IE7以下情况下，querySelector支持IE8以上，上面已经仿造的很好了。至于多个类，请使用querySelectorAll，加上for循环遍历

for(let i = 0 ; i < document.querySelectorAll('div').length; i++){
    console.log(hasClass(document.querySelectorAll('div')[i],'adda'));
    addClass(document.querySelectorAll('div')[i],'addb');
    setTimeout(function(){
        removeClass(document.querySelectorAll('div')[i],'adda');
    },1000);
}

再来一次链式调用，换个方式咯

//链式调用
class aQuery {
    constructor(seletor){
        this.doc = document;
        this.seletor = this.doc.querySelectorAll(seletor);
    }
    hasClass(cls){
        if(!cls) return false;
        for(let i = 0; i < this.seletor.length; i++){
            this.clsbool = new RegExp(' ' + cls + ' ').test(' ' + this.seletor[i].className + ' ');
            console.log(this.clsbool)
        }
        return this;
    }
    
    addClass(cls){
        //是否有该类
        if(cls.replace('/\s*/g','')){
            for(let i = 0; i < this.seletor.length; i++){
                !hasClass(this.seletor[i],cls)&&(this.seletor[i].className = this.seletor[i].className == ''?cls:this.seletor[i].className+' '+cls);
            }
        }
        return this;
    }
    
    removeClass(cls){
        for(let i = 0; i < this.seletor.length; i++){
            if(hasClass(this.seletor[i],cls)){
                let newClass = ' ' + this.seletor[i].className.replace(/[\t\r\n]/g, '') + ' ';
                while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                    newClass = newClass.replace(' ' + cls + ' ', ' ');
                }
                this.seletor[i].className = newClass.replace(/^\s+|\s+$/g, '');
            }
        }
        return this;
    }
}
window.$ = (ele) => {
    return new aQuery(ele);
}
$('div').addClass('addb addc').removeClass('adda').hasClass('addb')

不知不觉快到国庆中秋，洗洗睡，明天继续上班！