给元素更改样式,一般使用 addClass() 和removeClass()

jquery官方文档 对 addClass的介绍:

Adds the specified class(es) to each element in the set of matched elements.

实例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./WebContent/resources/common/js/jquery.js"></script>

    <style>

        .aaa {

            color: rebeccapurple;

            font-size: 4em;

        }

        .bbb {

            width: 20%;

            height: 20%;

            background: #f1f1a1;

        }

    </style>

</head>

<body>

    <div id="test1" class="div">

        <span class="aaa bbb">hellow world

        </span>

    </div>

    <div class="div">

        <span class="aaa bbb">hellow world</span>

    </div>

    <div>

        <input type="button" value="点击我">

    </div>

</body>

<script>

    $('input[type=button]').on('click', e => {

        console.log(e);

        console.log(e.target);

        console.log($(e.target));

        let ee =  document.getElementById('test1');

        console.log(ee);

        $('.bbb',ee).toggleClass('aaa');

    });
　　　　$('input',$('button2')).on('click',function () {
　　　　// 通过this获取到当前对象
　　　　console.log(this);
　　　　// jquery 对象
　　　　console.log($(this));
　　　　// 移除样式
　　　　$('.div span').removeClass();
})
</script>

</html>

addClass() 

给匹配的元素集合添加 指定的class样式(注意 括号中的es 可以移除多个样式)

$('.div span').addClass('aaa') ;添加指定样式

$('.div span').addClass('aaa bbb') ;添加多个样式

removeClass() 

jquery官方文档 对 removeClass的介绍:

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

给匹配的元素集合移除 一个 或者 多个 或者 所有的 class样式

$('.div span').removeClass() 方法移除所有的样式

$('.div span').removeClass('aaa') 移除指定的class 为 aaa的样式

$('.div span').removeClass('aaa bbb') 移除指定的多个样式;

 toggleClass()

toggle 是切换的意思,官方解释

Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.

如果 有这个class 则 移除此class,如果没有这个class,则添加上

$('.div span').toggleClass('aaa bbb');

总结

1.toggleClass 侧重点在样式指定样式的切换,一般配合点击、 鼠标悬浮 、鼠标划过事件

2.removeClass 和 addClass 重点在样式的移除

3.针对频繁切换,使用toggle,代码会简介流程很多

从调试,到验证,再些这个随笔,花了二个小时.再想想此文的技术含量,有点汗颜.继续努力.争取能写出高端,有含量的干货

一下是关于伪类和伪元素的文章链接

CSS伪类与伪元素完全指南

jquery toggleclass方法的更多相关文章

  1. jQuery的addClass,removeClass和toggleClass方法

    jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法 ...

  2. jQuery addClass removeClass toggleClass方法概述

    通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...

  3. jQuery on()方法

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

  4. jQuery on()方法示例及jquery on()方法的优点

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

  5. jquery ajax方法和其他api回顾

    >> $ele.load(url, data, callback); //带data参数时为POST请求,否则为GET请求 // $('#testload').load('data.htm ...

  6. jQuery 事件方法大全-超全的总结

    jquery经常使用的事件: /*     on     off     hover     blur     change     click     dblclick     focus     ...

  7. jquery的方法总结

    1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的J ...

  8. jQuery jQuery on()方法

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

  9. jQuery css()方法及方法

    知识点一:jQuery css()方法 1.css()方法是什么? css()方法设置或返回被选元素的一个或多个样式属性. 2.返回CSS属性 1.$("p").css(" ...

随机推荐

  1. websocket协议及案例

    WebSocket是一种用于在服务器与客户端之间实现高效的双向通信的机制.可以解决数据实时性要求比较高的应用,比如:在线聊天,在线教育,炒股或定位等. 一:websocket产生背景: 为了解决这种实 ...

  2. 读<css世界>笔记之img标签

    Web开发时,为了节约带宽以及提高加载性能,首屏以下的图片就会通过滚屏加载的方式异步加载,然后这个即将被异步加载的图片为了布局稳健,体验良好,往往会使用一张透明的图片占位,如: <img src ...

  3. 1 年经验 Java 求职面试题

    从 17 年的大三暑假就在这家公司实习转正,在这家公司呆了快2年了,随着公司新一轮的融资,看起来公司离上市更近了一步,但期权池也进一步稀释,没有期权的我感觉回报更少了,另外在这家公司接触到的东西也有瓶 ...

  4. C# winfrom界面跳转闪烁问题解决方法

    在窗体的构造函数中添加代码: SetStyle(ControlStyles.UserPaint, true); SetStyle(ControlStyles.AllPaintingInWmPaint, ...

  5. 省钱小贴士（ECS）：教你如何每年省出8w+ 块

    随着用户越来越多地使用阿里云的ECS服务,如何用最小的成本来保有ECS,成为用户越来越重要的关注点. 变更点 为了更好的服务客户,ECS团队调整了系统盘的最小容量限制 linux系统 core os调 ...

  6. SP2-0734: unknown command beginning "lsnrctl st..." - rest of line ignored.

    SP2-0734: unknown command beginning "lsnrctl st..." - rest of line ignored. Cause(原因):Comm ...

  7. ASP.NET Core 编码、web编码、网页编码 System.Text.Encodings.Web

    System.Text.Encodings.Web 空间包含表示 Web 编码器的基类.表示 HTML.JavaScript 和 Url 字符编码的子类,以及表示仅允许编码特定字符.字符范围或码位的筛 ...

  8. lambdas vs. method groups

    Update: Due to a glitch in my code I miscalculated the difference. It has been updated. See full his ...

  9. 寒假关于计算机课程的学习计划（第二次作业<二>）

    由于自己刚从紧张的高中学习中解脱出来,进入大学学习意识不够重视,导致学业与别人相差较大,特别是C语言,所以打算寒假主要先补一补C语言.自己在网上查找了很多资料,包括浙江大学翁凯老师在网易云课堂讲的&l ...

  10. 12、Node.js 路由

    这里实现的好像就是把路由和服务器相结合起来.具体需要引入 url 模块和 http 模块为路由提供请求的 URL 和其他需要的 GET 及 POST 参数,随后路由需要根据这些数据来执行相应的代码需要 ...