使用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 相关文章推荐
重定向实现代码
Nov 20 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
纯JS实现轮播图
Feb 22 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
js合并两个数组生成合并后的key:value数组
May 09 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
轻松修复Discuz!数据库
2008/05/03 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
python实现通过shelve修改对象实例
2014/09/26 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
Python fileinput模块使用实例
2015/05/28 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Django--权限Permissions的例子
2019/08/28 Python
自荐书范文
2013/12/08 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
python实现批量移动文件
2021/04/05 Python
Golang中interface{}转为数组的操作
2021/04/30 Golang
python如何将mat文件转为png
2022/07/15 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL