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(/[\t\r\n]/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)

主要是思考的探索

js 实现jquery的hacClass,addClass,removeClass

上一篇:微信支付开发demo


下一篇:echarts出现Animator.js:64 Uncaught TypeError: Cannot set property ‘0‘ of undefined报错