首页 > Web开发 > 详细

js 实现jquery的hacClass,addClass,removeClass

时间:2021-05-28 16:56:50      阅读:27      评论:0      收藏:0      [点我收藏+]

 

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

原文:https://www.cnblogs.com/GoTing/p/14822582.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!