原生js 用正则实现removeclass hasclass getsclass addclass .
function getByClass(oParent,sClass){
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(sClass);
}else{
var arr=[];
var aEle=oParent.getElementsByTagName('*');
var re=new RegExp('\\b'+sClass+'\\b');
for(var i=;i<aEle.length;i++){
if(re.test(aEle[i].className)){
arr.push(aEle[i]);
}
}
return arr;
}
}
function hasClass(obj,sClass){
var re=new RegExp('\\b'+sClass+'\\b');
return re.test(obj.className);
}
function addClass(obj,sClass){
// <div class='ac now active'></div>
//本身没有class
if(obj.className){
//判断添加的class有没有啊
if(!hasClass(obj,sClass)){
obj.className+=' '+sClass;
}
}else{
obj.className=sClass;
}
}
function removeClass(obj,sClass){
var re=new RegExp('\\b'+sClass+'\\b');
if(hasClass(obj,sClass)){
obj.className=obj.className.replace(re,'').replace(/^\s+|\s+$/g,'').replace(/\s+/g,' ');
}
}
原生js 用正则实现removeclass hasclass getsclass addclass .的更多相关文章
- 原生JS编写getByClass、addClass、removeClass、hasClass
前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...
- 原生js实现增加(addclass),删除(removeclass),判断是否存在(hasclass),如果存在删除,如果不存在添加(toggleclass)和获取类名(getbyclass)的方法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js addclass,hasClass,removeClass,toggleClass的兼容
(function (window) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo ...
- 原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
- 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 抛开jQuery,拾起原生JS的DOM操作
常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js实现 常见的jquery的功能
原生选择器 充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...
随机推荐
- Letter Combinations of a Phone Number
Given a digit string, return all possible letter combinations that the number could represent. A map ...
- Ubuntu 安装软件的命令
Ubuntu 安装软件的命令 安装flashplayer sudo apt-get install flashplugin-installer 安装百度云客户端 软件在百度云盘里面 安装必要的开发环境 ...
- poj2553 强连通
题意:定义了一个图的底(bottom),是指在一个图中能够被所有点到达的点,问途中有哪些点是图的底. 首先是同一个强连通分量中的点都能够互相到达,强连通分量中一个点能到达其他点,也必然代表该强连通分量 ...
- java定时框架:表达式设置
Quartz中时间表达式的设置-----corn表达式 (注:这是让我看比较明白的一个博文,但是抱歉,没有找到原作者,如有侵犯,请告知) 时间格式: <!-- s m h d m w(?) y( ...
- 将caffe训练时loss的变化曲线用matlab绘制出来
1. 首先是提取 训练日志文件; 2. 然后是matlab代码: clear all; close all; clc; log_file = '/home/wangxiao/Downloads/43_ ...
- BufferedInputStream/BufferedOutputStream复制文件
public class Test{ public static void main(String[] args) throws IOException{ FileInputStream in = n ...
- 代码里面执行bat
public static void executeBat(String path) { try { File file = new File(path); ...
- python [吐槽]关于nan类型时遇到的问题
今天在用写一段求和的代码时候,发现最后返回的是nan的结果,这段循环求和代码依次调用了三个函数,于是依次打印这三个函数的返回值,发现其中一个函数的返回值为nan,原来是因为这段函数里面没有相似的用户, ...
- 00-Java 语言简介
一.开发环境搭建: (一).JAVA语言简介: 1.JAVA语言简介: (1)什么是JAVA:Java是一种计算机编程语言.它是一种计算机编程语言.它是一种软件开发平台.它是一种软件运行平台.它是一种 ...
- Oracle数据库——用户、方案的创建与管理
一.涉及内容 1.掌握用户.方案与权限的基本概念. 2.熟练掌握用户操作的相关命令. 二.具体操作 (一)选择题: 1.关于方案的描述下列哪一项不正确?(C) A.表或索引等对象一定属于某一个方案 B ...