//判断有没有class
hasClass(elements, cName) {
return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)")); // ( \\s|^ ) 判断前面是否有空格 (\\s | $ )判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
},
//移除class
removeClass(elements, cName) {
if (this.hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " "); // replace方法是替换
}
},
//添加class
addClass(elements, cName) {
if (!this.hasClass(elements, cName)) {
elements.className += " " + cName;
}
},

浅析原生js模仿addclass和removeclass的更多相关文章

  1. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  2. 原生JS实现addClass,removeClass,toggleClass

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...

  3. 原生js 用正则实现removeclass hasclass getsclass addclass .

    function getByClass(oParent,sClass){ if(oParent.getElementsByClassName){ return oParent.getElementsB ...

  4. 原生js实现addClass,removeClass,hasClass方法

    function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false ...

  5. 用原生js模仿jquery

    阅读声明:本文档仅供学习,由于个人能力有限,文档中有错漏的地方还请指出,大家共同学习. 目前在学习怎么样写jquery,模仿阶段,有兴趣的同学可以和我一起学习,共同交流,在学习的路上希望有你做伴. 在 ...

  6. JS封装addClass、removeClass

    addClass封装:1.先把原有的类名和需要添加的类名用“”切割.拼接. 2.查重,把所有类名遍历,重复的去掉. 3.“”拼接. function addClass(ele , cName) { v ...

  7. 原生js模仿jq fadeIn fadeOut效果 兼容IE低版本

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 用原生JS模仿jquery,需要HTML5的支持

    jQuery是现在最流行的JavaScript工具库. 据统计,目前全世界57.3%的网站使用它.也就是说,10个网站里面,有6个使用jQuery.如果只考察使用工具库的网站,这个比例就会上升到惊人的 ...

  9. 原生js模仿下拉刷新功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 视觉SLAM中的数学基础 第二篇 四元数

    视觉SLAM中的数学基础 第二篇 四元数 什么是四元数 相比欧拉角,四元数(Quaternion)则是一种紧凑.易于迭代.又不会出现奇异值的表示方法.它在程序中广为使用,例如ROS和几个著名的SLAM ...

  2. 使用robot_pose_ekf对传感器信息融合

    robot_pose_ekf是ROS Navigation stack中的一个包,通过扩展卡尔曼滤波器对imu.里程计odom.视觉里程计vo的数据进行融合,来估计平面移动机器人的真实位置姿态,输出o ...

  3. Java中apache下面FtpClient主动模式和被动模式

    最近在做ftp文件上传的时候,开发测试环境上传都没有问题,但是在开发环境缺无法上传,但是也没有报错,纠结了老久.最后看到网上有说FtpClient有主动模式和被动模式之分,然后就解决了. FTPCli ...

  4. iOS 测试版系统安装说明(粗略翻译)

    我们常常看到在https://developer.apple.com/download/这里会有beta版本的ios系统 或者开发软件 关于beta版本的应用,其实有很大用处,好多人会在正式版没有发布 ...

  5. 多分类-- ROC曲线

    本文主要介绍一下多分类下的ROC曲线绘制和AUC计算,并以鸢尾花数据为例,简单用python进行一下说明.如果对ROC和AUC二分类下的概念不是很了解,可以先参考下这篇文章:http://blog.c ...

  6. Winform开发框架之图表报表在线设计器2-图表-SNF.EasyQuery项目--SNF快速开发平台3.3-Spring.Net.Framework

    上一篇讲到,如何快速创建报表程序了.这篇教大家如何快速制作图表报表. 继上一篇,Winform开发框架之图表报表在线设计器-报表 上一篇讲到如何了创建数据源,这里就不在介绍了.那我们就直接从图表设计器 ...

  7. 一个vue请求接口渲染页面的例子

    new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name" ...

  8. 开源的.NET任务调度框架-HangFire

    什么是Hangfire Hangfire 是一个开源的.NET任务调度框架,目前1.6+版本已支持.NET Core.内置提供集成化的控制台,方便后台查看及监控: 另外,Hangfire包含三大核心组 ...

  9. 物联网架构成长之路(11)-Redis缓存主从复制

    1. 说明 在我的物联网平台框架框架中,会用到Redis这个中间件.作为EMQ权限认证的缓存.https://www.cnblogs.com/think-in-java/p/5123884.html ...

  10. Asp.Net 简繁转换

    帮助类 /// <summary> /// 中文字符工具类 /// </summary> public static class ChineseStringUtility { ...