<!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. 使用pipeline减少与redis交互次数

    1.redis_pipeline=redis_cli.pipeline() 2.redis_pipeline.setex()此语句可写多条 3.redis_pipeline.execute() # # ...

  2. python Django 项目创建

    注:后续如不特色说明,使用python版本均为python3 创建项目 django-admin startproject projectName 启动服务 python manage.py runs ...

  3. 最短路径遍历所有的节点 Shortest Path Visiting All Nodes

    2018-10-06 22:04:38 问题描述: 问题求解: 本题要求是求遍历所有节点的最短路径,由于本题中是没有要求一个节点只能访问一次的,也就是说可以访问一个节点多次,但是如果表征两次节点状态呢 ...

  4. 《HTTP 权威指南》笔记:第十三章 摘要认证体制

    前言 基本认证存在缺陷,摘要认证为了解决基本认知的一些缺陷,进行了进一步的完善,更加安全. 流程 摘要认证的特点是:永远不会以明文方式在网络上发送密码原理:通过发送一个「指纹」或者「密码的摘要」来验证 ...

  5. rabbimq

    问题 启动RabbitMQ后,没法访问Web管理页面   解决 RabbitMQ安装后默认是不启动管理模块的,所以需要配置将管理模块启动 启动管理模块命令如下   rabbitmqctl start_ ...

  6. WPF程序开发方法小总结

    1.先做静态界面(静态界面带有 示例 数据---> 展示布局效果) 2.然后在VM写完之后,再对静态界面绑定数据源属性

  7. (GoRails) 使用ActiveStorage给user添加上传头像功能。

    对activestorage的简单使用: 头像库:uifaces.co. 可以使用大量设置好的头像图片. 1.安装avatar rails active_storage:install 2.user ...

  8. python 构造函数作用

    1. 构造函数的作用        构造函数主要用来在创建对象时完成对对象属性的一些初始化等操作, 当创建对象时, 对象会自动调用它的构造函数.一般来说, 构造函数有以下三个方面的作用:        ...

  9. Pandas读取文件

    如何使用pandas的read_csv模块以及其他读取文件的模块?? 一起来看一看 Pandas中read_csv和read_table的区别 注:使用pandas读取文件格式为pandas特有的da ...

  10. 重写TreeMap的compare方法处理配置表

    需要处理的配置表如下: 接上一篇的优化,接着优化,优化代码如下:  这段代码的关键在于重写TreeMap的compare方法. 关于如何重写TreeMap的compare方法,以及返回值代表的意义,可 ...