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


Posted in Javascript onOctober 31, 2014

废话不多说,直接上代码

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 相关文章推荐
javascript调试说明
Jun 07 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
JsRender实用入门教程
Oct 31 #Javascript
JsRender for object语法简介
Oct 31 #Javascript
JsRender for index循环索引用法详解
Oct 31 #Javascript
javascript常用函数归纳整理
Oct 31 #Javascript
让html页面不缓存js的实现方法
Oct 31 #Javascript
js读取cookie方法总结
Oct 31 #Javascript
jQuery获取对象简单实现方法小结
Oct 30 #Javascript
You might like
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python  连接字符串(join %)
2008/09/06 Python
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
python抓取网页中链接的静态图片
2018/01/29 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
个人优缺点自我评价
2014/01/27 职场文书
运动会邀请函范文
2014/01/31 职场文书
3分钟演讲稿
2014/04/30 职场文书
入伍通知书
2015/04/23 职场文书
学校党员干部承诺书
2015/05/04 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis