使用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 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
关于javascript中的parseInt使用技巧
Sep 03 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
公司董事长职责
2013/12/12 职场文书
高中的自我鉴定
2013/12/16 职场文书
挂牌仪式主持词
2014/03/20 职场文书
项目投资建议书
2014/05/16 职场文书
视光学专业自荐信
2014/06/24 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js