JQuery 黑马案例通过类设置旋转正方形及其原理（增强版 css权重+toggleclass ）之自学JQ系列

本文链接：https://blog.csdn.net/weixin_46972646/article/details/111870117

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

/*         @at-root {
            .current{
            width: 200px;
            height: 200px;
            transform:rotate(360deg);
            margin: 160px auto;
            background-color: red;
        }
        } */

        /*选择器类型及权重：
            选择器 权重
            标签选择器 0001
            class类选择器 0010
            属性选择器 0010
            伪类选择器 0010
            伪元素选择器 0010
            id选择器 00100
            行内样式 1000 */
        .current{
            width: 200px;
            height: 200px;
            transform:rotate(360deg);/*动画效果，谁做动画给谁*/
            margin: 160px auto;
            background-color: red;
        }

        #current1{    /*必须想方法给普通的div设置样式，否则删除类后就看不到了*/
            width: 200px;
            height: 200px;
            /*要想方法将后来添加的类的背景覆盖掉id的这里的样式,权重id比类选择器高得多，因此把这部分拿出来到 div 里设置，*/
            margin: 160px auto;
        }
        
        div{
            background-color: pink;
            transition: all .5s;
            /*transition属性写在最初的样式里，而不是放在结束的样式里，
            即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式。*/
        }
    </style>
</head>
<body>
    <div id="current1"></div>
<!-- 设置完后这里无class，即为完整状态，即可解决问题，transiton是给所有想动的，tranform是给有动画效果 -->
</body>
<script src="../jquery.min.js"></script>
<script>
    $(function(){
        $('#current1').click(function(){
            /*1.原本div是#current1和div的聚合体的样子，如果属性冲突则id覆盖标签，也就是说一开始div所具备的属性：           
            background-color: pink;
            transition: all .5s;
            width: 200px;
            height: 200px;
            margin: 160px auto;             切换类后由无到有，由有到无仅变化了两个属性：
                                                通过id绑定到div，添加类名只是变化
                                               1. transform:rotate(360deg);
                                               2. background-color: red; 
                                            */
              $(this).toggleClass('current')

        })
    })
</script>
</html>