使用JS实现jQuery的addClass, removeClass, hasClass函数功能

 更新时间:2014年10月31日 10:35:12   投稿:hebedich  
这篇文章主要介绍了使用JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下

废话不多说,直接上代码

复制代码 代码如下:

function addClass(obj, cls){
    var obj_class = obj.className,//获取 class 内容.
    blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
    added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.
    obj.className = added;//替换原来的 class.
}
 
function removeClass(obj, cls){
    var obj_class = ' '+obj.className+' ';//获取 class 内容, 并在首尾各加一个空格. ex) 'abc        bcd' -> ' abc        bcd '
    obj_class = obj_class.replace(/(\s+)/gi, ' '),//将多余的空字符替换成一个空格. ex) ' abc        bcd ' -> ' abc bcd '
    removed = obj_class.replace(' '+cls+' ', ' ');//在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
    removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd'
    obj.className = removed;//替换原来的 class.
}
 
function hasClass(obj, cls){
    var obj_class = obj.className,//获取 class 内容.
    obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组.
    x = 0;
    for(x in obj_class_lst) {
        if(obj_class_lst[x] == cls) {//循环数组, 判断是否包含cls
            return true;
        }
    }
    return false;
}

相关文章

  • JavaScript字符和ASCII实现互相转换

    JavaScript字符和ASCII实现互相转换

    这篇文章主要介绍了JavaScript字符和ASCII实现互相转换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 各浏览器对document.getElementById等方法的实现差异解析

    各浏览器对document.getElementById等方法的实现差异解析

    这篇文章主要是对各浏览器对document.getElementById等方法的实现差异进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 使用JavaScript获取URL中的参数(两种方法)

    使用JavaScript获取URL中的参数(两种方法)

    这篇文章主要介绍了使用JavaScript获取URL中的参数(两种方法)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • JavaScript生成指定范围的时间列表

    JavaScript生成指定范围的时间列表

    这篇文章主要介绍了JavaScript生成指定范围的时间列表思路详解,需要的朋友可以参考下
    2018-03-03
  • 通过一次报错详细谈谈Point事件

    通过一次报错详细谈谈Point事件

    这篇文章主要给大家介绍了关于如何通过一次报错详细谈谈Point事件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2018-05-05
  • js键盘事件的keyCode

    js键盘事件的keyCode

    本节主要介绍了js键盘事件的keyCode,在你按下键时会弹出它的键码,需要的朋友可以参考下
    2014-07-07
  • JavaScript 算法实现复写0双指针解法

    JavaScript 算法实现复写0双指针解法

    这篇文章主要为大家介绍了JavaScript 算法 复写0双指针解法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • TypeScript判断对象类型的4种方式代码

    TypeScript判断对象类型的4种方式代码

    这篇文章主要给大家介绍了关于TypeScript判断对象类型的4种方式代码,TypeScript能根据一些简单的规则推断(检查)变量的类型,你可以通过实践很快的了解它们,需要的朋友可以参考下
    2023-07-07
  • 基于JavaScript实现多级菜单效果

    基于JavaScript实现多级菜单效果

    这篇文章主要为大家详细介绍了基于JavaScript实现多级菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 小程序云函数调用API接口的方法

    小程序云函数调用API接口的方法

    这篇文章主要为大家详细介绍了小程序云函数调用API接口的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论