1、addClass:为指定的dom元素添加样式。

2、removeClass:删除指定dom元素的样式。

3、toggleClass:如果存在(不存在),就删除(添加)一个样式。

4、hasClass:判断样式是否存在。

原生 JS 代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
 
function addClass(obj, cls) {
    if (!this.hasClass(obj, cls)) {
        obj.className += " " + cls;
    }
}
 
function removeClass(obj, cls) {
    if (hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        obj.className = obj.className.replace(reg, ' ');
    }
}
 
function toggleClass(obj,cls){
    if(hasClass(obj,cls)){
        removeClass(obj, cls);
    else {
        addClass(obj, cls);
    }
}

怎么用js实现jq的removeClass方法的更多相关文章

  1. 【实践】用js 实现 jq 的removeClass 方法

    HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. js和jq使用submit方法无法提交表单

    昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着 ...

  3. HTML,CSS,JS,JQ

    CSS: <style> <!--属性选择器--> .container input[type="text"][name="txt"]{ ...

  4. 用JS和JQ来获取子节点!

    用JS和JQ来获取子节点!   在JS中,如果通过document.getElementsByTagName来获取子元素有个弊端:它不单会获取符合要求的子元素,就连同孙元素也会获取.如果有特殊要求,那 ...

  5. JQ的ready()方法与window.onload()的区别与联系

    JQ的ready()与window.onload()方法都是在文档加载完毕之后才会被触发的方法,但它们之间的区别也是很明显的. 1.区别与联系:   $(document).ready() windo ...

  6. jQuery 属性操作 - addClass() 和 removeClass() 方法

    实例 向第一个 p 元素添加一个类: $("button").click(function(){ $("p:first").addClass("int ...

  7. JS与JQ绑定事件的几种方式.

    JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...

  8. JS、JQ相关小技巧积攒

    JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime()  获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...

  9. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

随机推荐

  1. CentOS 7最小安装之后应该尽快做好的几件事情

    1        导言 CentOS的最小系统仅包含内核和必要的工具,派不上多大用处,以后还得安装很多附加软件.为了方便以后的工作,还需要对系统做一些调整和补充. 本文涉及的工作均应以root身份执行 ...

  2. Linux中非正常关闭vi编辑器产生swp文件怎么删除

    Linux中非正常关闭vi编辑器产生swp文件,会导致编辑文件时提示如下内容(图我是从网上找的): 这是因为异常关闭vi编辑器产生swp文件导致,假设编辑的文件名是file.sh,那么生成的swp文件 ...

  3. 对Faster R-CNN的理解(3)

    2.2 边框回归 边框回归使用下面的几个公式: xywh是预测值,带a的是anchor的xywh,带*的是GT Box的xywh,可以看作是anchor经过一定的变换回归到附近的GT Box.

  4. go微服务框架go-micro深度学习(五) stream 调用过程详解

        上一篇写了一下rpc调用过程的实现方式,简单来说就是服务端把实现了接口的结构体对象进行反射,抽取方法,签名,保存,客户端调用的时候go-micro封请求数据,服务端接收到请求时,找到需要调用调 ...

  5. std::nothrow 的使用心得

    std::nothrow 意思是说,不要跑出异常,改为返回一个nullptr. 一般的使用场景是,建议new的时候使用,避免使用try-catch来捕捉异常. 比如: float m_words = ...

  6. 10分钟上手图数据库Neo4j

    随着互联网不断的发展,传统的关系型数据库如oracle,mysql已经难以支撑现下大数据量,高并发的场景了.于是,NoSQL横空出世,有像cassandra这样的column-based,像Mongo ...

  7. securecrt8.1破解版安装与注册机的使用方法

    转自:https://blog.csdn.net/sun897827804/article/details/78532157?locationNum=9&fps=1 SecureCRT是一款用 ...

  8. amqp笔记

    1.exchange message的生产者可以将消息发送给exchange,然后由exchange路由到不同的queue中. exchange有4种类型: direct exchange:msg只会 ...

  9. 如何免费的将本地Web服务映射到外网

    链接地址:https://hongmaju.github.io/2018/05/13/ngrok%E5%B0%86%E6%9C%AC%E5%9C%B0Web%E6%9C%8D%E5%8A%A1%E6% ...

  10. Canvas入门到高级详解(上)

    神奇的 canvas--AICODER 全栈培训 IT 培训专家 一.canvas 简介 1.1 什么是 canvas?(了解) 是 HTML5 提供的一种新标签 <canvas>< ...