<!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. UT, FT ,E2E 测试的意思

    前端实现自动化就要借助到unit和e2e端到端测试了 一.unit测试(FT 就是Fucntion Test 功能测试,  注意不是: funciton函数 ...fucntion功能   不一样哦  ...

  2. SQL关于WHERE 的计算次序

    WHERE可包含任意数目的AND和OR操作符.允许两者结合以进行复杂 和高级的过滤. 但是OR和AND操作符是有先后次序的. 比如,原意是想找出 3班和5班年龄为21岁的同学,使用 :SELECT * ...

  3. 消息队列rabitMq

    rabbitmq MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.消息 ...

  4. java.lang.NoClassDefFoundError: org/springframework/web/context/WebApplicationContext

    一.NoClassDefFoundError与ClassNotFoundException NoClassDefFoundError错误的发生,是因为Java虚拟机在编译时能找到合适的类,而在运行时不 ...

  5. php的抓取

    <?php/** * Created by PhpStorm. * User: s * Date: 2018/11/6 * Time: 18:14 */ include "vendor ...

  6. python-django rest framework框架之dispatch方法源码分析

    1.Django的 CBV 中在请求到来之后,都要执行dispatch方法,dispatch方法根据请求方式不同触发 get/post/put等方法 class APIView(View): def ...

  7. WDA基础十一：Excel上载

    1.因为是做建单的例子,所以没有做结果显示,在加了两个属性 DATESOURCE  Type XSTRING FILENAME         Type STRING 2.在VIEW中新建elemen ...

  8. 2017-5-19&5-23/系统性能指标

    1. 系统性能指标包括哪些? 业务指标.资源指标.中间件指标.数据库指标.前端指标.稳定性指标.批量处理指标.可扩展性指标.可靠性指标. 1)业务指标:主要包括并发用户数.响应时间.处理能力. 指标 ...

  9. Git中ssh的使用

    远程仓库前期工作(SSH HEY的使用) 1.1.注册GitHub账号 1.2.创建SSH Key 打开Git Bash后,输入ssh-keygen -t rsa -C "youremail ...

  10. 【Python】Anaconda配置

    Anaconda 是一个用于科学计算的Python发行版,支持 Linux.Mac.Windows 系统,提供了包管理与环境管理的功能,可以很方便地解决多版本 Python 并存.切换以及各种第三方包 ...