原生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 ...
随机推荐
- C++ Primer : 第十二章 : 动态内存之unique_ptr和weak_ptr
unique_ptr 一个unique_ptr拥有它所管理的对象,与shared_ptr不同,unique_ptr指向的对象只能有一个用户.当unique_ptr被销毁后,它所指向的对象也被销毁. 定 ...
- Ultra Pull To Refresh下拉刷新
http://www.jcodecraeer.com/a/opensource/2014/1205/2111.html
- new总结
基础:c++中,什么时候用 A a;和什么时候用A a=new A; new是在堆上分配内存,它需要用delete释放,否则会造成内存泄漏(使用的内存没有即时释放,造成内存的浪费) int main( ...
- ipconfig /flushdns 解释
当我们一域名的形式访问过目标网站后,该网站的域名和IP地址对应关系就会自动保存到本地工作站的DNS缓存列表中,如果以后再次访问该域名,浏览器就会先访问DNS缓存列表中的信息.但是,如果被访问网站的域名 ...
- yum命令
1)查询 yum list #查询所有可用软件包列表 yum search 关键字 #搜索服务器上和关键字相关的包 #对比rpm的查询:rpm -qa | grep xxx 2)安装 yum ...
- hdu1025 dp(最长上升子序列LIS)
题意:有一些穷国和一些富国分别排在两条直线上,每个穷国和一个富国之间可以建道路,但是路不能交叉,给出每个穷国和富国的联系,求最多能建多少条路 我一开始在想有点像二分图匹配orz,很快就发现,当我把穷国 ...
- jQuery - 设置内容和属性
设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...
- 最大化 AIX 上的 Java 性能,第 2 部分: 速度需求
http://www.ibm.com/developerworks/cn/aix/library/es-Javaperf/es-Javaperf2.html 最大化 AIX 上的 Java 性能,第 ...
- PHP安装libevent扩展
1. 下载扩展 官方地址http://pecl.php.net/package/libevent 请根据自己的PHP脚本选择相应版本 如 wget http://pecl.php.net/get/li ...
- 【转】如何让DIV水平和垂直居中
来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...