使用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;
}

相关文章

  • MATLAB中ismissing函数用法小结

    MATLAB中ismissing函数用法小结

    这篇文章主要介绍了MATLAB中ismissing函数用法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • canvas实现流星雨的背景效果

    canvas实现流星雨的背景效果

    本文主要介绍了canvas实现流星雨的背景效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • Array.prototype.slice 使用扩展

    Array.prototype.slice 使用扩展

    slice 可以用来获取数组片段,它返回新数组,不会修改原数组。
    2010-06-06
  • 微信小程序模板和模块化用法实例分析

    微信小程序模板和模块化用法实例分析

    这篇文章主要介绍了微信小程序模板和模块化用法,结合实例形式分析了微信小程序中的模板与模块化概念与简单使用技巧,需要的朋友可以参考下
    2017-11-11
  • 用apply让javascript函数仅执行一次的代码

    用apply让javascript函数仅执行一次的代码

    有时候我们只想要让某些脚步函数执行一次就算完成任务了。如何实现这种功能呢?简单模仿下面这段就可以轻松搞定了
    2010-06-06
  • JavaScript实现五种不同烟花特效

    JavaScript实现五种不同烟花特效

    这篇文章主要给大家带来五个好看的基于 HTML+CSS+JS 的烟花特效,文中的示例代码讲解详细,对我们学习JavaScript有一定的帮助,需要的可以参考一下
    2022-01-01
  • 微信小程序使用蓝牙小插件

    微信小程序使用蓝牙小插件

    这篇文章主要为大家详细介绍了微信小程序使用蓝牙小插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • tree shaking功能及使用原理详细解析

    tree shaking功能及使用原理详细解析

    这篇文章主要为大家介绍了tree shaking功能及使用原理详细解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪的相关资料
    2023-01-01
  • JS实现随机抽取三人

    JS实现随机抽取三人

    这篇文章主要为大家详细介绍了JS实现随机抽取三人,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JavaScript动态生成表格的示例

    JavaScript动态生成表格的示例

    这篇文章主要介绍了JavaScript动态生成表格的示例,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-11-11

最新评论