<!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. Spring 的@@Autowired 和 @Qualifier注释

    @Autowired spring2.1中允许用户通过@Autowired注解对Bean的属性变量.属性Setter方法以及构造方法进行标注,配合AutowiredAnnotationBeanProc ...

  2. GridView实现拖拽排序以及数据交互

    在研究项目中的一个效果的时候,查找资料过程中发现有人有这么一种需求,就是GridView在实现拖拽排序的基础上,如果是两个GridView之间实现拖拽效果,并要实现数据交互. 一.效果图: 实现这个效 ...

  3. 算法笔记--字典树（trie 树）&& ac自动机 && 可持久化trie

    字典树 简介:字典树,又称单词查找树,Trie树,是一种树形结构,是哈希树的变种. 优点:利用字符串的公共前缀来减少查询时间,最大限度地减少无谓的字符串比较. 性质:根节点不包含字符,除根节点外每一个 ...

  4. linux 下设置定时任务

    Linux Crontab 定时任务 命令详解 在工作中需要数据库在每天零点自动备份所以需要建立一个定时任务．我选择在Linux下使用Crontab来添加定时任务执行shell文件．shell文件有数 ...

  5. vSphere 扩展硬盘空间

    把所有的snapshot都删除了之后,ssh上去之后,进vmfs目录到client machine的目录. 然后执行下面的方法. 虽然成功了,却没看到有扩展的. 唯一的好处是, vSphone Cli ...

  6. HeadFIrst Ruby 第二章总结 methods and classes

    HeadFIrst Ruby 第二章总结 methods and classes 前言 这一章讲了如何创建自己的 class,并且讲了在用 class 创建 object 的两个要素: instanc ...

  7. javascript ----> Immediately-Invoked Function Expression (IIFE)(翻译)

    http://benalman.com/news/2010/11/immediately-invoked-function-expression/ 如果你没有注意到,我对术语有一点点坚持. 所以,在听 ...

  8. 20190102xlVBA_多表按姓名同时拆分

    Sub 多表按姓名同时拆分20190102() AppSettings Dim StartTime As Variant Dim UsedTime As Variant StartTime = VBA ...

  9. CentOS6.8环境下搭建yum网络仓库

    CentOS6.8环境下搭建yum网络仓库 本文利用ftp服务,在CentOS6.8系统下搭建一个yum仓库,然后用另一台虚拟机访问该仓库.并安装程序包 安装ftp服务 查询ftp服务是否安装 [ro ...

  10. 20165309 实验四 Android程序设计

    2017-2018-2 20165309实验四<Java面向对象程序设计>实验报告 一.实验内容 1.Android Studio的安装测试 2.Activity测试 3.UI测试 4.布 ...