都在注释上哈，很简单，看一下就懂了，就不啰嗦了
// 用来获取元素
// 用来判断某个元素是否有某个class
// 如果没有添加
// 如果有就删除

//获取元素id class  tag  all
function M(sele) {
    var first = sele.substr(0,1),
        isArr = sele.split(' ');//id class tag
    if(first==="#"&&isArr.length==1){//id
        return document.getElementById(sele.substr(1));
    }else{
        var arr = Array.from(document.querySelectorAll(sele));
        return arr.length == 1?arr[0] :arr;
    }
}

//判断某个元素是否包含某个class
function hasClass(obj,cls){
    var re = new RegExp(`\\b${cls}\\b`);
    if(re.test(obj.className)){
        return true;
    }else{
        return false;
    }
}

//给某个元素添加class
function addClass(obj,cls){
    if(!hasClass(obj,cls)){
        obj.className += ` ${cls}`;//不要忘了前面的空格哈
    }
    obj.className = obj.className.trim();//去掉前后空格
}

//给某个元素删除class
function rmClass(obj,cls){
    var re = new RegExp(`\\b${cls}\\b`);
    if(hasClass(obj,cls)){
        obj.className = obj.className.replace(re,'')
            .replace(/\s{2}/,' ').trim();//去掉前后空格
    }
}

在base.js文件的基础上 继续封装


js 封装获取class

 * 1.调整封装

 * 2.设置获取innerHTML里面的值

 * 3.设置获取CSS样式并且设置
 * 4.获取某个元素并设置

 * 5.获取某一区域的CSS（这里获取ID的区域）并设置
 * 6.添加class
 * 7.删除class





base.js




/*前台调用*/

var $=function(){

    return new Base();

}


function Base(){//创建一个对象 也是构造函数
         //创建一个数组，来保存获取的节点（ID）和节点数组（name,tagName等）

         this.elements=[];
}



    
/*获取元素节点*/

    
//获取ID节点

Base.prototype.getId=function(id){

        /*push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。*/

        this.elements.push(document.getElementById(id)) ;

        return this;

    };

//获取tagName

Base.prototype.getTagName=function(tag){

        //tagName是一个集合 所有要在遍历

        var tag=document.getElementsByTagName(tag);

        for( var i=0;i<tag.length;i++){

        this.elements.push(tag[i]);

        }

        return this;

    };

//获取Name

Base.prototype.getName=function(nmae){

        //tagName是一个集合 所有要在遍历

        var names=document.getElementsByName(nmae);

        for( var i=0;i<names.length;i++){

        this.elements.push(names[i]);

        }

        return this;

    };

/*添加方法*/

//获取CLASS节点方法（所有的class节点,或某个区域的节点）

Base.prototype.getClass=function(className,idName){//添加获取ID某个区域

    var node =null;//定义一个节点对象

    if(arguments.length==2){

        node=document.getElementById(idName);

    }else{

        node=document;

    }

    var all=node.getElementsByTagName('*');

        for(var i=0; i<all.length; i++){

            //判断 如果你传过来的class==class

            if(all[i].className==className){

                //那么久返回摸传过来的所有className

                this.elements.push(all[i]);

            }

    }

        return this;

};

//获取一个元素节点(只需获取一个)

    Base.prototype.getElement=function(number){

        //获取某一个元素节点 参数为number数字

        var element=this.elements[number];//得到元素的对象

        this.elements=[];//再清空元素

        this.elements[0]=element;//得到一个元素

        return this;//返回

    };

    
//添上（设置）CSS方法 

Base.prototype.css=function(attr,value){//两个参数 属性和值

    for(var i=0;i<this.elements.length;i++){

        //获取样式行内和外链都可以获取

        if(arguments.length==1){

            if(typeof window.getComputedStyle!='undefined'){//W3C标准

                return window.getComputedStyle(this.elements[i],null)[attr];

                //调用属性

            }else if(typeof this.elements[i].currentStyle!='undefined'){//IE浏览器

                return this.elements[i].style[attr];

            }

        }

        this.elements[i].style[attr]=value;

    }

    return this

};


//添加CLASS方法
Base.prototype.addClass=function(className){

    for(var i=0; i<this.elements.length;i++){//遍历

        //判断不重复添加样式 用正则表示判断添加在第一个还是最后一个

        if(!this.elements[i].className.match(new RegExp('(\\s|^)'+className+'(\\s|^)'))){

            this.elements[i].className +=' ' +className;//添加做个cass样式

        }

    }

    return this;//返回再次调用 否则只能调用一次

};


//移除CLASS方法
Base.prototype.removeClass=function(classsName){

    for(var i=0; i<this.elements.length; i++){//遍历 如果有多个

    //判断该样式是否添加重复

    if(this.elements[i].className.match(new RegExp('(\\s|^)'+classsName+'(\\s|$)'))){

        this.elements[i].className=this.elements[i].className.replace(new RegExp('(\\s|^)'+classsName+'(\\s|$)'),' ');//+=''+累加多个样式之间 用空格隔开

        }

    }

    return this;//返回实现连缀

};

//添加（设置）innerHTML方法

Base.prototype.html=function(str){

    for(var i=0;i<this.elements.length;i++){

        if(arguments.length==0){//获取innerHTML的值

            return this.elements[i].innerHTML;

        }

        this.elements[i].innerHTML=str;

    }

    return this;

};

//触发点击事件

Base.prototype.click=function(fn){

    for(var i=0;i<this.elements.length;i++){

        this.elements[i].οnclick=fn;

    }

    return this;

};


调用base.js


       window.οnlοad=function(){

    //$().getId('box').html('小赤佬');

    //alert($().getId('box').html());//获取innerHTML里面的值

    //alert($().getId('box').css('color'));//获取CSS样式

    //alert($().getClass('red').elements.length);

    //alert($().getClass('red').elements.length);//获取样式的长度

    //$().getClass('red').css('color','red');//获取classNmae并且设置样式

    

    //$().getClass('red').getElement(2).css('color','blue')//设置某一个样式的颜色

    

    $().getClass('red','gg').css('color','blue');//获取某个区域的css 并设置

};                                                                                                                                                                                                                                                                                               
调用base.js
备注（实现添加CLASS 、删除CLASS）1

window.οnlοad=function(){

        $().getId('box').addClass('a').addClass('b').addClass('c').click(function(){

            alert('你好');

        }).removeClass('a');

};

在vue中当我们要实现点击元素动态添加类名时，我们不能像JQ那样去用（xxx.addClass(‘class’).siblings().removeClass(‘class’)）实现，那我们应该怎样去做呢
解决方案：

1.在data里面申明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中）
2.在当前元素中添加动态class： “:class”，使用v-bind进行绑定
3.给元素点击事件，传入当前元素的index，把元素当前的index赋值给data里面的申明的属性，这样就可以点击实现该效果
一.首先给想要添加class的元素，通过v-bind绑定一个class
<li :class="activeClass == index ? 'actived':''" 
	v-for="(item,index) in itemList" 
	:key="index" 
	@click="getItem(index)">
      {{itme.name}}
</li>

二.在data中声明一个变量activeClass
data() {
    return {
      activeClass: -1, 	// 0为默认选择第一个，-1为不选择
    };
}

三.在点击事件中
getItme(index) {
    this.activeClass = index;  // 把当前点击元素的index，赋值给activeClass
}

四.在style里面写想要的样式就可以了
.actived {
  background: #eee; 
  color: #1e82d2;
  font-weight: bolder;
}

		

			vue 点击当前元素添加class 去掉兄弟的class  获取当前点击元素的文字
		
		

		

			
点击当前标签给其添加class,兄弟标签class删除
然后获取当前点击元素的文字

演示地址: https://xibushijie.github.io/static/addClass.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue 点击当前元素添加class 去掉兄弟的class</title>
    <script src="../js/vue.js"></script>
</head>
<style type="text/css">
	ul li {cursor: pointer;}
	.blue {color: #2175bc;}
</style>
<body>
    <div id="app">
      <ul>
        <li v-for="(todo, index) in todos" v-on:click="addClass(index,$event)" v-bind:class="{ blue:index==current}">
            {{ todo.text }}
        </li>
    </ul>
</div>
<script>
new Vue({
    el: '#app',
        data: {
        current:0,
            todos: [
            { text: '选项一' },
            { text: '选项二' },
            { text: '选项三' }
        ]
    },
    methods:{
        addClass:function(index,event){
            this.current=index;
			
　　　　　　 //获取点击对象      
           var el = event.currentTarget;
           alert("当前对象的内容："+el.innerHTML);
        }
    }
})
</script>
</body>
</html>


　　
　　












		
		
posted @ 2018-05-11 11:12 <_/> 阅读(...) 评论(...)  编辑 收藏