<!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. Codeforces 838 B - Diverging Directions

    B - Diverging Directions 思路: 用dfs序+线段树维护子树中距离(从1到u,再从u到1)的最小值 代码: #pragma GCC optimize(2) #pragma GC ...

  2. ES6 学习笔记(整理一遍阮一峰大神得入门文档，纯自己理解使用)

    1.let命令 1)let和var的区别:let声明的变量只有所在的代码块有效. 2)没有变量的提升,一定要声明后使用.使用let命令声明变量之前,该变量都是不可用的.形成“暂时性死区”. 3)typ ...

  3. 十分钟带你理解Kubernetes核心概念

    什么是Kubernetes? Kubernetes(k8s)是自动化容器操作的开源平台,这些操作包括部署,调度和节点集群间扩展.如果你曾经用过Docker容器技术部署容器,那么可以将Docker看成K ...

  4. OnSen UI结合AngularJs打造”美团"APP"逛一逛”页面 --Hybrid App

    1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_walk/ 2.核心代码 walk.html: <ons-page id=&q ...

  5. 一款好用的取色工具TakeColor

    简介:TakeColor,一款还算好用的取色软件,一个很小很简洁的exe文件,无需安装 使用:打开exe文件后,使用“Alt + C” 组合键即可在鼠标悬停的位置上获取到颜色值,可以获取HTML.RG ...

  6. linux文件管理之查找

    1 文件查找 1.1 which 查找可执行文件的路径which是通过 PATH环境变量到该路径内查找可执行文件,所以基本的功能是寻找可执行文件[root@www ~]# which [-a] com ...

  7. Spring Batch 介绍

    在企业应用的关键环境中,通常有需要很多应用来来处理大量的应用.这商业操作包括了自动化,并且负责的处理程序来对大量数据进行高效的处理,通常这些程序不需要人工进行干预.这些事件包括有基于时间周期产生的操作 ...

  8. 11. Container With Most Water C++

    知识点:双指针遍历大大减少不必要的比较和计算 方法1:Brute Force(执行时间惨不忍睹,共进行n(n-1)/2次比较) class Solution { public: int maxArea ...

  9. 为什么要使用oath协议？

    一.如何查看用户是否登录? 通过cookie和session来查看用户是否登录. 如果cookie对应的session中保存了用户登录信息,则判定用户已登录 Jsessionid,也就是tomcat自 ...

  10. SpringMvc4.2.5 零配置出现 No mapping found for HTTP request with URI（转）

    原文地址:SpringMvc4.2.5 零配置出现 No mapping found for HTTP request with URI 采用 spring 零配置,参考 http://hanqunf ...