zoukankan      html  css  js  c++  java
  • jquery toggleclass方法

    给元素更改样式,一般使用 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伪类与伪元素完全指南

  • 相关阅读:
    SPFA算法——香甜的黄油
    并查集及应用
    背包问题——装箱问题(洛谷1049)用true模板
    划分类动态规划——乘积最大(洛谷1018,codevs1017)
    多源最短路Floyed——多源最短路(CODEVS1077)(可能Floyed模板)
    并查集——亲戚(洛谷1551)(可做并查集模板)
    最小生成树Kruskal——最优布线问题(codevs 1231) (可做Kruscal模板)
    最小生成树Prim——最短网络(洛谷1546)(USACO 3.1.1)可当Prim模板
    lsy263 の CSP-S 2019游记
    About Me
  • 原文地址:https://www.cnblogs.com/regnol/p/10782167.html
Copyright © 2011-2022 走看看