元素类名的操作

自己封装3个方法 hasCLass addClass removerClass（必考题）

//可以检测一个到多个类名
function hasClass(ele,cln){
    let str = ele.className;
    cln = cln.replace(/^ +| +$/g,'');//去收尾空格
    let ary = cln.split(/ +/)
    let flag = true;
    for(let i=0;i<ary.length;i++){
        let reg = new RegExp(`(^| +)%{ary[i]}( +|$)`);
        if(!reg.test(str)){
            flag = false;
            break
        }
    }
    return flag
}
hasClass(box,' box  box2  box_4')

HTMLElement.prototype.hasClass=function hasClass(cln=''){
    let str = this.className;
    cln = cln.replace(/^ +| +$/g,'');//去收尾空格
    let ary = cln.split(/ +/);
    let flag = true;
    for(let i=0;i<ary.length;i++){
        let reg = new RegExp(`(^| +)${ary[i]}( +|$)`)
        if(!reg.test(str)){
            flag = false
            break
        }
    }
    return flag
}
box.hasClass(' box  box2  box_4')

//添加类名
HTMLElement.prototype.addClass = funtion addClass(cln){
    cln = cln || '';
    if(this.hasClass(cln)) return
    cln = cln.replace(/^ +| +$/g,'');//去收尾空格
    let ary = cln.split(/ +/);
    for(let i=0;i<ary.length;i++){
        if(!this.hasClass(ary[i])){
            this.className += ' '+ary[i];//加个空格是为了隔开类名，防止拼接成一个类名
        }
    }
}

//删除类名
HTMLElement.prototype.removeClass = function removeClass(cln){
    cln = cln || '';
    let str = this.className;
    cln = cln.replace(/^ +| +$/g,'');//去收尾空格
    let ary = cln.split(/ +/);
    for(let i=0;i<ary.length;i++){
        let reg = new RegExp('\\b' + ary[i] + '\\b','g')
        str = str.replace(reg,'')
    }
    str = str.replace(/ +/g,' ').replace(/^ +| +$/g,'')//把多个空格替换成一个空格
    this.className = str
}

//有就删除，没有就添加  --类名
HTMLElement.prototype.toggleClass = function toggleClass(cln){
    if(this.hasClass(cln)){
        this.removeClass(cln)
    }else{
        this.addClass(cln)
    }
    box.toggleClass('box')
}

###JQ的类名操作

• JQ要先引入，再使用
• JQ获取到的元素统一是一个集合；我们把这个集合称为JQ对象；只有JQ对象才能调用JQ的方法
• JQ获取元素 $('css选择器')

var box = document.getElementById('box');
var $box = $('#box');//JQ对象
console.log(box,$box);//输出结果一样
点击事件：
    $box.on('click',function(){
        var $this = $(this)
        $(this).toggleClass('www');//JQ对象
        $this.css('color','#ccc')
        //this是原生对象
        //元生对象转换成JQ对象  $(原生对象)
    })