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. gtest环境安装

    gtest全称Google Test,是Google的C++测试框架,有很多优秀的软件都会依赖这个环境编译或者在开发中也会用到,gtest的编译非常简单,下面简单说明一下安装过程. gtest git ...

  2. 招中高级web开发工程师

    >>招中高级web开发工程师

  3. C# 图解视频教程 全集200多集

    观看地址 https://www.bilibili.com/video/av21896829/?spm_id_from=333.23.home_video_list.3 学习交流地址 http://w ...

  4. 【Apache】Apache的安装和配置

    Apache是世界非常流行的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. Apache在Win7上的安装 下载apa ...

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

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

  6. bootstrap 前端模板

    https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/

  7. VPS、虚拟主机、云主机的区别

    引用知乎网友通俗的例子解释: 1. 小王是深圳的一拆迁户,有钱任性:自己租了一块地皮[带宽],盖了一栋10000平方的房子[服务器],计划租给别人赚钱.2. 但是10000平方的房子太大,能租起的人太 ...

  8. go 源码学习之---Tail 源码分析

    已经有两个月没有写博客了,也有好几个月没有看go相关的内容了,由于工作原因最近在做java以及大数据相关的内容,导致最近工作较忙,博客停止了更新,正好想捡起之前go的东西,所以找了一个源码学习 这个也 ...

  9. jinfo

    jinfo是jdk自带的命令,用来查看.修改jvm的配置参数. [weblogic@host bin]$ jinfo-bash: jinfo: command not found[weblogic@h ...

  10. 60cms Cookies欺骗漏洞审计

    源码地址:https://files.cnblogs.com/files/ssooking/60cms.zip 运行60cms目录下的Netbox.exe即可开启Asp Web服务,默认端口80 环境 ...