给元素更改样式,一般使用 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. 域模型中的实体类分为四种类型：VO、DTO、DO、PO

    经常会接触到VO,DO,DTO的概念,本文从领域建模中的实体划分和项目中的实际应用情况两个角度,对这几个概念进行简析. 得出的主要结论是:在项目应用中,VO对应于页面上需要显示的数据(表单),DO对应 ...

  2. 解决Windows资源管理器右键菜单打开EditPlus容易导致资源管理器无响应问题

    这个问题确实很烦人,经常导致 资源管理器无响应,关闭后整个资源管理器彻底崩溃,原因未知.本着折腾和强迫症精神,这个问题一定要解决.方法如下: 1.不要用EditPlus自带的添加到系统右键菜单选项. ...

  3. Android踩坑随笔Fragment中onActivityResult方法不被调用

    最近项目里要做头像功能,参考了这篇博客(GitHub - zhudfly/SelectAvatarApplication: 一个选择并显示头像圆形控件,可以通过拍照或者选择相册中的图片来设置图片),但 ...

  4. python item repr doc format slots doc module class 析构 call 描述符

    1.item # __getitem__ __setitem__ __delitem__ obj['属性']操作触发 class Foo: def __getitem__(self, item): r ...

  5. LoadRunner对移动互联网后端服务器压力测试

    一.LoadRunner简介 LoadRunner,是惠普公司研发的一款预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题,LoadRunner能够 ...

  6. JS计算距当前时间的时间差

    /** * JS获取距当前时间差 * * @param int time JS毫秒时间戳 * */ function get_time_diff(time) { var diff = ''; var ...

  7. react native学习资料

    一:基础学习: react-native中文文档(react native中文网,人工翻译,官网完全同步)http://react-native.cn/docs/getting-started.htm ...

  8. MySQL 数据库--内置功能

    一 视图 视图:是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 优点:们可以把查询过程中的临 ...

  9. sqlserver-一次updlock和withnolock和with check option 的报错原因分析

    接口程序一直运行的很稳定,其中有一天进行了数据库的整改,导致程序不断报错, 报错信息如下 原因: 程序代码写入以下代码 select * from ViewName with(updlock) whe ...

  10. codeforces 407C Curious Array

    codeforces 407C Curious Array UPD: 我觉得这个做法比较好理解啊 参考题解:https://www.cnblogs.com/ChopsticksAN/p/4908377 ...