原生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 ...
随机推荐
- 2016-2017 ACM-ICPC, NEERC, Southern Subregional Contest (Online Mirror, ACM-ICPC Rules, Teams Preferred) G 优先队列
G. Car Repair Shop time limit per test 2 seconds memory limit per test 512 megabytes input standard ...
- 笨小猴 2008年NOIP全国联赛提高组
题目描述 Description 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设m ...
- (转) Quick Guide to Build a Recommendation Engine in Python
本文转自:http://www.analyticsvidhya.com/blog/2016/06/quick-guide-build-recommendation-engine-python/ Int ...
- QMessageBox类学习:
先来看一下最熟悉的QMessageBox::information.我们在以前的代码中这样使用过: QMessageBox::information(NULL, "Title" ...
- APACHE 多站点配置方法
例如你的主机IP:192.168.1.8 而你有三个站点,域名为:www.111.com,www.222.com,www.333.com 相应的网站文件放在主机的:\website\111;D:\we ...
- 安装pgadmin3
在centos/redhat/系统是x86_64 1.下载适合自己系统的合适的版本http://dl.fedoraproject.org/pub/epel/6/x86_64/ ( yum instal ...
- Google perf tools for nginx
注意:本教程仅适用于Linux. 下面为大家介绍google-perftools的安装,并配置Nginx和MySQL支持google-perftools. 首先,介绍如何优化Nginx: 1,首先下载 ...
- Linux体系结构(二): Linux系统层次
前一节内容大概介绍了一下Linux的历史由来,各大Linux发行厂商都是基于GNU项目下的所有开源软件,来构建各自己的Linux发行版本,一个完整的Linux发行版本大概可以分为以下四个层次结构: ...
- MongoDB管理与开发精要 书摘
摘自:<MongoDB管理与开发精要> 性能优化 创建索引 限定返回结果条数 只查询使用到的字段,而不查询所有字段 采用capped collection 采用Server ...
- memcache 启动参数
启动方式: 参数 说明 -d 以守护程序(daemon)方式运行 -u root 指定用户,如果当前为 root ,需要使用此参数指定用户 -P /tmp/a.pid 保存PID到指定文件 内存设置: ...