给元素更改样式,一般使用 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. Android GridView异步加载图片和加载大量图片时出现Out Of Memory问题

    我们在使用GridView或者ListView时,通常会遇到两个棘手的问题: 1.每个Item获取的数据所用的时间太长会导致程序长时间黑屏,更甚会导致程序ANR,也就是Application No R ...

  2. Python语言程序设计学习 之 了解Python

    Python简介 Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年. Python是纯粹的自由软件,源代 ...

  3. Vue 框架-01- 入门篇 图文教程

    Vue 框架-01- 入门篇 图文教程 Vue 官网:https://cn.vuejs.org/ 关于 Vue 的基础大家可以在官网的[起步]去学习,本系列文章主要针对实例项目应用 一.Vue 的安装 ...

  4. JS 根据子网掩码，网关计算出所有的IP范围

    // 验证IP的正则 var ip_reg = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0- ...

  5. 瞥了一眼js

    JS打开超链接的几种形式1.window.open(''url'') 2.用自定义函数<script>function openWin(tag,obj){obj.target=" ...

  6. 为什么懂云的IT高手能过得比你好

    盼望着,盼望着,一年一度的国庆7天长假还有不到24小时就到来了.各个部门的同事都已准备好满世界旅行去了. IT 部门各位同事的心还是悬着,信息系统还要持续的运转,对外的网站不能停,假期的线上促销也不能 ...

  7. 从golang-gin-realworld-example-app项目学写httpapi (五)

    https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/users/middlewares.go 中间件 ...

  8. SVN图标不显示的解决几种方式

    系统安装的Tortoise SVN,不知道是不是安装了其他软件的缘故,造成SVN客户端功能可以正常使用,就是文件夹或文件的左下角不显示图标.故上网查找解决方法: 方法一: 升级到最新版本,基本是没用的 ...

  9. echo 与 od -x 与 %！xxd 命令

    echo 与 od -x 与 %!xxd 命令 echo 命令 -n 选项  可以使其不带换行符od -x 命令可以查看文件的16进制表示%!xxd 可以在vim编辑器中dump成16进制表示

  10. [原]Ubuntu 下安装apache+PHP

    1.安装apache2 sudo apt-get install apache2 运行如下命令重启:sudo /etc/init.d/apache2 restart 在浏览器里输入http://loc ...