精华内容
下载资源
问答
  • 都在注释上哈,很简单,看一下就懂了,就不啰嗦了// 用来获取元素 ...//获取元素id class tag all function M(sele) { var first = sele.substr(0,1), isArr = sele.split(' ');//id class tag...

    都在注释上哈,很简单,看一下就懂了,就不啰嗦了

    // 用来获取元素
    // 用来判断某个元素是否有某个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();//去掉前后空格
        }
    }

    展开全文
  • js 封装获取class  * 1.调整封装  * 2.设置获取innerHTML里面的值  * 3.设置获取CSS样式并且设置  * 4.获取某个元素并设置  * 5.获取某一区域的CSS(这里获取ID的区域)设置 base.js /*前台...

    在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里面申明一个属性,默认值最好为...

    在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删除 然后获取当前点击元素的文字 演示地址:...

    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 <_/> 阅读(...) 评论(...) 编辑 收藏
    展开全文
  • 元素class类名的添加和删除classList

    千次阅读 2018-11-20 15:24:40
    相信很多人都知道通过element.className的方式给元素添加class属性或获取元素class属性。本文要介绍的HTML DOM classList是也可用于给元素添加、移除或切换class属性。 classList的基本使用: 一、语法: element....
  • 380. 常数时间插入、删除获取随机元素 设计一个支持在平均 时间复杂度 O(1) 下,执行以下操作的数据结构。 insert(val):当元素 val 不存在时,向集合中插入该项。 remove(val):元素 val 存在时,从集合中移除该...
  • jquery获取多个class元素

    千次阅读 2017-04-10 14:02:13
    需求: 获取删除div的id 删除 方法: $(".list-li.active").find(".btn").attr('id');  交集选择: $(".a.b")--选择同时包含a和b的元素。 并集选择:$(".a, .b")--选择包含a或者包含b的元素
  • var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id");得到的是jquery对象,对该...原文转自脚本之家《js与jquery获取元素,删除元素的两种不同方法》
  • ES6 获取元素class值 进行单元性移除

    千次阅读 2018-06-22 16:01:42
    发现ES6暂时未提供方法进行单元性移除,故尝试着写一个方法进行完成,不足之处 请大家指点,废话不多说直接贴代码:代码示意图:完整代码:let classArray = document.getElementById('live').className.split(" &...
  • 380. 常数时间插入、删除获取随机元素
  • 判断元素是否有某个class function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 (\\s | $ )判断后面...
  • js获取元素

    万次阅读 2018-07-17 11:42:36
    在原生js里获取元素childNodes ,但是在一些浏览器会把空格当成子元素 html html: &lt;div class="box"&gt; &lt;div&gt;2&lt;/div&gt; &lt;div&gt;1&lt;/div...
  • 1、需求:之前遇到一个需求,就是一个话费兑换页面,其中有很多话费兑换的选项(10元话费、20元话费等等),点击其中一项后(例如我们点击了10元话费),会令10元话费这个选项框样式改变成其他颜色,弹出兑换窗口...
  • 381. O(1) 时间插入、删除获取随机元素 - 允许重复 设计一个支持在平均 时间复杂度 O(1) 下, 执行以下操作的数据结构。 注意: 允许出现重复元素。 insert(val):向集合中插入元素 val。 remove(val):当 val 存在...
  • //删除id for(i=0;i150;i++){ var idObject = document.getElementById('sidebar'); if (idObject != null) idObject.parentNode.removeChild(idObject);...//通过class获取元素 paras = document.ge
  • 获取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class - 取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的...
  • 一、jquery获取节点及获取一些属性//一下是js里面的代码$(function(){//$para $符...// 获取第二个元素节 点 var $li = $("ul li:eq(1)"); // 输出元素节点属性title var p_txt = $para.attr("title"); // 获取
  • 如题,我在界面上有个表格,表格每一行后面有个删除按钮,当我点击删除按钮时,我希望能获取按钮所在这一行的数据,以用来post到后端,在数据库中删除这一行数据 我的架构为django 1、表格的html title body
  • html5 — 获取class列表属性

    千次阅读 2016-10-16 20:58:03
    classList用classList获取一个元素class集合,类数组对象基于classList的方法: —length : class的长度 —add() : 添加class方法 —remove() : 删除class方法 —toggle() : 切换class方法(切换是指没有class...
  • 1、先声明一个div和两个class样式,用来测试: <html> <head> <meta charset="utf-8"> <title></title> <script src=...
  • /*创建一个 List集合,随意添加10个元素。然后获取索引为5处的 元素;再获取其中某2个元素的索引;再删除索引为3处的元素。*/ public class text2 { public static void main(String[] args) ...
  • 原生JS给DOM元素增加修改和删除class

    万次阅读 2019-03-11 11:34:58
    删除class //方法1 如果你的页面里有很多个“temp”类的话 感觉这种不太适合 “classArr ”取出的是类数组 let classArr = document.getElementsByClassName("temp"); classArr[0].classList.remove("red"); /...
  • 获取元素、子元素、兄弟元素呢? 通过帮定点击事件: 例如: <button class="shanchu" @click="shanchu($event)">删除</button> 获取元素方法总结: ** //当前点击的元素 e.target //绑定...
  • jQuery的属性操作非常简单,下面以一个a元素来说明属性的获取/设置/删除操作 jquery.com 添加属性 $('a').attr('href', 'http://www.jquery.com') 添加多个属性 $('a').attr({'href':'http://www.jquery.com', '...
  • 1.通过ID或者其他元素找到要处理的HTML对象:(举例通过ID) var obj=document.getElementById('id'); 2.操作此对象 添加属性:obj.setAttribute('attr_name','attr_value');... 删除属性:obj.remo...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 286,883
精华内容 114,753
关键字:

获取class元素并删除