zoukankan      html  css  js  c++  java
  • js 实现jquery的hacClass,addClass,removeClass

    jquery的写法

     $(obj).hasClass('on')
      $(obj).addClass('on')
      $(obj).removeClass('on')

    js 仿写

      function hasClass(ele,cls){
        cls =cls || '';
        if(cls.replace(/s/g,'').length==0){
          return false;
        }else{
           // 匹配类名 前后各加一个空字符串 为了保证匹配的是单个类名 不是包含该字符串的别的类名  例如:test test_1
          return new RegExp(' '+cls+' ').test(' '+ele.className+' ')
        }
      }
    
      function addClass(ele,cls){
        if(!hasClass(ele, cls)){
          // 在类名字符串上叠加新类名
          ele.className += ' ' + cls;
         }
      }
    
      function removeClass(ele,cls){
        if(hasClass(ele,cls)){
          // 获取本身的类名字符串 前后添加一个空字符串 为了匹配首个类名 就是需要移除的类名
          var newClass=' '+ele.className.replace(/[	
    ]/g,'')+' '
          // 多个class的时候  需要遍历 正常情况不会有同一个类名 多次添加  所以进行while
            while(newClass.indexOf(' '+cls+' ') >-1){
              // 匹配类名 前后各加一个空字符串 为了保证匹配的是单个类名 不是包含该字符串的别的类名  例如:test test_1
                 newClass = newClass.replace(' '+cls+' ', ' ');//将目标类名 替换为空
             }
            //  讲前后的空字符串 以及替换成功以后 多出来的空字符串 匹配掉
             ele.className = newClass.replace(/^s+|s+$/g, '');
        }
      }
      console.log(hasClass(document.getElementById('test'),'test'))
      removeClass(document.getElementById('test'),'test')

    主要是思考的探索

  • 相关阅读:
    PHP权限控制系统PHPGACL
    专注于系统开发
    PHP多条件查询处理
    SMTP协议初探(二)linux下c编程实现发邮件
    linux物理内存探测
    使用select和shutdown
    float & double 内存布局
    网易校园招聘c++题目如何让new操作符不分配内存,只调用构造函数
    linux内存管理概述
    linux物理内存描述
  • 原文地址:https://www.cnblogs.com/GoTing/p/14822582.html
Copyright © 2011-2022 走看看