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. Collection was modified; enumeration operation may not execute Dictionary 集合已修改;可能无法执行枚举操作

    public void ForeachDic() { Dictionary dic = new Dictionary(); dic.Add("1", 10); dic.Add(&q ...

  2. Elasticsearch集群运维

    一.索引管理 1. 创建索引 PUT test-2019-03 { "settings": { "index": { "number_of_shard ...

  3. Get the client's IP address in socket.io

    From: https://www.wentong.org/codex/question-2018081564702.html When using socket.IO in a Node.js se ...

  4. UESTC 1034 AC Milan VS Juventus 分情况讨论

    AC Milan VS Juventus Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Oth ...

  5. MVP模式和Clean模式

    从类图上来看,MVP都是一个业务一个Presenter,每个Presenter都是一个接口,它还包含了View的接口,用于定于和View相关的行为,然后Activity等业务类实现View的接口,因为 ...

  6. Linux 驱动开发

    linux驱动开发总结(一) 基础性总结 1, linux驱动一般分为3大类: * 字符设备 * 块设备 * 网络设备 2, 开发环境构建: * 交叉工具链构建 * NFS和tftp服务器安装 3, ...

  7. Jenkins自动部署增加http状态码校验

    公司推进Jenkins自动化部署,因为web站点都是集群部署,部署需要测试指定服务器web服务是否成功启动,页面是否正常访问,经过不断baidu发现,python的request模块可以很好的解决这一 ...

  8. Mac 上安装maven

    http://maven.apache.org/download.cgi 官网下载bin.tar 解压后放入某个目录: 配置环境变量: vim .bash_profile M2_HOME=/maven ...

  9. 物联网架构成长之路(27)-Docker练习之Zookeeper安装

    0. 前言 准备了解一下消息队列MQ,对比了一些开源的中间件,最后选择Kafka作为以后用到的消息队列,消息队列的应用场景及Kafka与其他消息队列的优缺点这里就不细说了,具体的可以参考其他博客说明. ...

  10. ImageMagick 转换图片格式

    [root@ drawable-hdpi-v4]# convert ic_launcher.jpeg ic_launcher.png [root@ drawable-hdpi-v4]# file ic ...