码迷,mamicode.com
首页 > Web开发 > 详细

模拟jQuery--添加类名和移除类名的封装

时间:2016-03-18 00:04:41      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:

     之前自己用原生的js添加类名和移除类名,用起来感觉还算顺手。在使用jQuery框架添加类名和移除类名时候更是觉得“傻瓜式”使用了。前两天在封装别的模块,今天想起自己也来搞一下添加类名和移除类名,,,不动手不知道,敲起来遇到不少bug。主要还是起初考虑的不够周到,不过调试工具真是个‘宝’;

    这里直接附上我的代码了:

 //添加类(可以一次添加多个类名)
    function addClass() {
        var arg = Array.prototype.slice.call(arguments);
        var dom = arg[0];  //取得dom
        var className = arg.slice(1); //取得要添加的类名(数组形式)
        var doms =document.querySelectorAll(dom);      //获取所有符合的dom成员
        for (var i = 0; i < doms.length;i++) {
            //为了避免当第一次设置类名且以前没有类名,会出现第一个有空格的现象

            if (doms[i].className) {
                //如果之前有类名了
                addOne(doms[i]);
            } else {
                //首次添加类名
                firstaddOne(doms[i]);
            }
        }
        function addOne(dom) {
            for (var j = 0; j < className.length; j++) {
                var itemName = dom.className;
                var itemNames = [].push.call([],itemName);
                console.log(typeof itemNames);
                dom.className = dom.className + ‘ ‘ + className[j];
            }
        }

        function firstaddOne(dom) {
            for (var j = 0; j < className.length; j++) {
                dom.className = dom.className + className[j];
            }
        }
    }

//移除类
    function removeClass() {
        var arg = Array.prototype.slice.call(arguments);
        var dom = arg[0];  //取得dom
        var className = arg.slice(1); //取得要删除的类名(数组形式)
        var doms = document.querySelectorAll(dom);      //获取所有符合的dom成员
        //遍历dom
        for(var i=0;i<doms.length;i++){
            var getAttr = doms[i].getAttribute(‘class‘);
             var arr1 = getAttr.split(‘ ‘);
            //双重循环判断删除的类名是否与已有的类名一样
            for(var j=0;j<arr1.length;j++){
                for(var k=0;k<className.length;k++){
                    if(arr1[j]===className[k]){
                        arr1.splice(j,1);
                        console.log(arr1.length);
                        j--;
                        break;
                    }
                }

            }
            //一样--〉连同类名属性删除
            if(arr1.length==0){
                doms[i].removeAttribute(‘class‘);
            }else{
                //否则删除要删除的类名
                removeOne(doms[i]);

            }

        }

        function removeOne(dom){
            for (var j = 0; j < className.length; j++) {
                var getAttr = doms[i].getAttribute(‘class‘);
                var arr1 = getAttr.split(‘ ‘);
                if(className[0]===arr1[0]){
                    dom.className = dom.className.replace(className[j], ‘‘);
                }else{
                    dom.className = dom.className.replace(‘ ‘ + className[j], ‘‘);
                }



            }
        }
    }

快乐的学习,才能快速的成长^_^

模拟jQuery--添加类名和移除类名的封装

标签:

原文地址:http://www.cnblogs.com/Snow-G/p/5290057.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!