原生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 ...
随机推荐
- JS的跨域问题
1.什么是跨域? 跨域问题是由于javascript语言安全限制中的同源策略造成的. 2.什么是同源策略: 同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名.协议 ...
- Html与CSS布局技巧
一.单列布局 1.水平居中:(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parend元素) 1-1:使用inline-block和text-align实现: .par ...
- spring-AOP-添加日志
1 把一个类声明为一个切面:①需要把该类放入到IOC中,②再声明为一个切面(@Aspect @Component)@Order(1):指定顺序 2 在配置文件中添加如下配置:<aop:aspec ...
- Codeforces Round #149 (Div. 2)
A. Heads or Tails 枚举. B. Big Segment \(L=min(l_i),\ R=max(R_i)\) 判断是否存在区间\([L,R]\). C. King's Path 单 ...
- Linux内核编译和运行(转-段玉磊)
内核获取网站:https://www.kernel.org/pub/linux/kernel/ 步骤如下: 1.打开终端,更改用户权限为root.具体做法是在终端输入sudo su,然后按提示输入密码 ...
- shell脚本处理大数据系列之(一)方法小结
转自:http://longriver.me/?p=57 方法1: 单进程处理大规模的文件速度如(上million量级)比较慢,可以采用awk取模的方法,将文件分而治之,这样可以利用充分的利用多核CP ...
- 局域网络ping不通
描述:今天和老崔.老周去公司的新办公地点//相比临时的,十分高大上.当我们把两台台式电脑A.B装好了,网络设置也陪好了,确认能够上网,再装打印机的时候,发现搜索不到打印机的ip(打印机也是有自己的IP ...
- 关于Lua程序设计{读书笔记}
1.lua中的标识符可以是由任意字母.数字和下划线构成的字符串,但不能以数字开头.2.lua将通常类似"_VALUE"的标识符作为保留标识符3.lua的保留字 and break ...
- 学习Logistic Regression的笔记与理解(转)
学习Logistic Regression的笔记与理解 1.首先从结果往前来看下how logistic regression make predictions. 设我们某个测试数据为X(x0,x1, ...
- GPU的革命
CUDA 线程执行模型分析(一)招兵------ GPU的革命 CUDA 线程执行模型分析(二)大军未动粮草先行------GPU的革命 CUDA硬件实现分析(一)------安营扎寨-----GPU ...