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. 制作chrome插件/扩展程序,禁止谷歌浏览器访问某些网站

    简单地说,浏览器插件,可以大大的扩展你的浏览器的功能.包括但不仅限于这些功能: 捕捉特定网页的内容 捕捉HTTP报文 捕捉用户浏览动作,改变浏览器地址栏/起始页/书签/Tab等界面元素的行为 与别的站 ...

  2. HIVE开发总结

    基本数据类型 查看所有函数 搜索函数 搜索表 查看函数使用方法 关键字补全 显示表头 SET环境变量 查看建表语句.数据文件置 执行外部命令 NVL CONCAT IF CASE TRIM SUBST ...

  3. iOS:给标签栏控制器的UITabbarItem添加点击动效

    一.介绍 现在很多app,附带很炫的点击效果,让用户享受到非常棒的体验,例如动画.渐变.音效等. 当然,市面上大多数app的标签栏点击还是挺中规中矩的,只是切换图片而已.然而,这个是可以优化的,附带点 ...

  4. 【RS】Collaborative Memory Network for Recommendation Systems - 基于协同记忆网络的推荐系统

    [论文标题]Collaborative Memory Network for Recommendation Systems    (SIGIR'18) [论文作者]—Travis Ebesu (San ...

  5. 分析轮子(八)- List.java 各种遍历方式及遍历时移除元素的方法

    注:玩的是JDK1.7版本 1:先尝栗子,再分析,代码简单,注释清晰,可自玩一下 /** * @description:测试集合遍历和移除元素的方式 * @author:godtrue * @crea ...

  6. ###My SQL Date相关函数

    ###My SQL Date相关函数 #获得当前日期时间 select now(); #date_format(date,format) select date_format('2008-08-08 ...

  7. 如何保持github的fork于主干同步

    step1: https://help.github.com/articles/configuring-a-remote-for-a-fork/ step2: https://help.github. ...

  8. ffmpeg中AVOption的实现分析

    [时间:2017-10] [状态:Open] [关键词:ffmpeg,avutil,AVOption] 0 引言 AVOptions提供了一种通用的options机制,可以用于任意特定结构的对象. 本 ...

  9. CPU与GPU性能的比较报告

    运行时间分析 不同的模型在cpu和gpu下的时间差异较大,一般来说gpu会比cpu快5-20倍.我们选用了最常用的inception v3的分类模型,输入图片尺寸为:3x299x299. GPU 在一 ...

  10. modelsim如何使用tcl脚本来写编译文件

    对于modelsim进行仿真,可以通过GUI来进行仿真,当然更加快速的方法可以使用TCL脚本文件进行快速仿真. Modelsim采用TCL脚本文件仿真的具体流程如下所示:      具体的操作步骤如下 ...