使用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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
Javascript复制实例详解
Jan 28 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
jQuery选择器实例应用
Jan 05 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 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的字符串用法小结
2010/06/08 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
php之readdir函数用法实例
2014/11/13 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
图片之间的切换
2006/06/26 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
React组件的三种写法总结
2017/01/12 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python 常见的排序算法实现汇总
2020/08/21 Python
聊聊python中的异常嵌套
2020/09/01 Python
工商管理应届生求职信
2013/10/07 职场文书
银行优秀员工事迹
2014/02/06 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
聚美优品的广告词
2014/03/14 职场文书
小班开学寄语
2014/04/04 职场文书
签证工作证明模板
2015/06/15 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
Python基础详解之邮件处理
2021/04/28 Python
TypeScript 内置高级类型编程示例
2022/09/23 Javascript