<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="智能社 - zhinengshe.com" />

<meta name="copyright" content="智能社 - zhinengshe.com" />

<title>智能社 - www.zhinengshe.com</title>

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.js"></script>

<script>

function getByClass(oParent,sClass){

    var ret = [];

    // test

    var re = new RegExp("\\b" + sClass + "\\b");

    //var re = /\bbtn\b/;

    var aEle = oParent.getElementsByTagName("*");

    for(var i = ; i < aEle.length; i++){

        if(re.test(aEle[i].className)){

            ret.push(aEle[i]);

        }

    }

    return ret;

}

function addClass(obj,sClass){

    var re = new RegExp("\\b"+sClass+"\\b");

    if(!re.test(obj.className)){

        if(obj.className){

            obj.className += " " + sClass;

        } else {

            obj.className = sClass

        }

    }

}

function removeClass(obj,sClass){

    var re = new RegExp("\\b"+sClass+"\\b","g");

    obj.className = obj.className.replace(re,"").replace(/^\s+|\s+$/g,"").replace(/\s+/g," ");

    if(!obj.className){

        obj.removeAttribute("class");

    }

}

function hasClass(obj,sClass){

    var re = new RegExp("\\b"+sClass+"\\b");

    return re.test(obj.className);

}

function toggleClass(obj,sClass){

    if(hasClass(obj,sClass)){

        removeClass(obj,sClass)

    } else {

        addClass(obj,sClass)

    }

}

window.onload = function(){

    var oBtn = document.getElementById("btn1");

    oBtn.onclick = function(){

        $(oBtn).toggleClass("active");

        //toggleClass(this,"active")

    };

};

</script>

</head>

<body>

<input id="btn1" class="box add btn active active active" type="button" value="toggleClass" />

</body>

</html>

js 中class选择器，addClass，removeClass，hasClass，toggleClass，getByClass的更多相关文章

  1. 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

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

  2. html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法

    其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...

  3. jQuery的addClass,removeClass和toggleClass方法

    jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法 ...

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

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

  5. js中dom选择器

    document,getElementById("demo");    //通过id查询节点 . document.getElementsByTagName("div&q ...

  6. 原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法

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

  7. jQuery中的样式（七）：addClass()、removeClass()、toggleClass()、hasClass()、css()、width()、height()等

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  8. js实现css、addClass、removeClass和toggleClass

    JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象 ...

  9. jQuery addClass removeClass toggleClass hasClass is(.class)用法

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

随机推荐

  1. 算法笔记--最大流和最小割 && 最小费用最大流 && 上下界网络流

    最大流: 给定指定的一个有向图,其中有两个特殊的点源S(Sources)和汇T(Sinks),每条边有指定的容量(Capacity),求满足条件的从S到T的最大流(MaxFlow). 最小割: 割是网 ...

  2. Implicit super constructor Object() is undefined for default constructor. Must define an explicit constructor

    转自:https://blog.csdn.net/u013125680/article/details/43887987 解决方案:把java的类库加载进去,在工程上右键选择属性->Java B ...

  3. sql server 学习笔记 ( backup 备份方案 )

    做个记入就好 USE [master] SELECT bs.database_name AS 'Database Name', bs.backup_start_date AS 'Backup Star ...

  4. python中的break\return\pass\continue用法

    continue: def func(): for i in range(1,11): if i % 2 == 0: continue # 作用是当符合上面的if判语句后,就直接跳过之后的语句,也就是 ...

  5. [Spring] 04 Denpendency Injection

    DI Dependency Injection 依赖注入:从程序代码中移除依赖关系的一种设计模式. 这样就可以更容易地管理和测试应用程序. DI使我们的程序编码 loosely coupled.松耦合 ...

  6. H3C S6800交换机 BCM shell命令

    H3C S6800交换机 BCM shell命令 http://wgli978.blog.163.com/blog/static/13592877220172315858831/ <H3C> ...

  7. android -------- 蓝牙Bluetooth

    什么是蓝牙? 也可以说是蓝牙技术.所谓蓝牙(Bluetooth)技术,实际上是一种短距离无线电技术,是由爱立信公司公司发明的.利用“蓝牙”技术,能够有效地简化掌上电脑.笔记本电脑和移动电话手机等移动通 ...

  8. 宽度优先搜索BFS（Breadth-First-Search）

    Breadth-First-Search 1. 与DFS的异同 相同点:搜索所有可能的状态. 不同点:搜索顺序. 2. BFS总是先搜索距离初始状态近的状态,它是按照:开始状态->只需一次转移就 ...

  9. Alyona and a tree CodeForces - 739B (线段树合并)

    大意: 给定有根树, 每个点$x$有权值$a_x$, 对于每个点$x$, 求出$x$子树内所有点$y$, 需要满足$dist(x,y)<=a_y$. 刚开始想错了, 直接打线段树合并了..... ...

  10. tomcat8.5 优化

    第一步:配置user登录tomcat 参考:https://www.cnblogs.com/kevincaptain/p/10370794.html 第二步:性能优化 2.1tomcat的运行模式有3 ...