移动互联阶段总结

最新推荐文章于 2024-06-15 06:21:07 发布

weixin_48867010

最新推荐文章于 2024-06-15 06:21:07 发布

阅读量128

点赞数 1

文章标签： css javascript css3

本文链接：https://blog.csdn.net/weixin_48867010/article/details/129228112

版权

平移，旋转，倾斜，缩小

transform:translate(平移)

    平移translate(a)
         a——水平平移的位置
        a>0 水平向右平移
        <0 向左平移
        =0 保存原生位置不变

    translate(a,b)
      正正右下
      正负右上

     y轴向下为正，向上为负！
           transform:translateX(沿X轴平移)
           transform:translateY(沿Y轴平移)
     不能在同一个元素上添加多个transform因为这样前面的会被覆盖

缩放:

transfrom:scale(a)
a——倍率

       一个值：控制水平方向+垂直方向的缩放比例
       0<a<1  缩小
       a>1   放大
       a=0   让元素消失/被隐藏了，但是不会删除元素
       a=1   不变
       a=-1   大小不变，镜像显示

        a<0   负数，倒向
        0<|a|<1   缩小
        |a|>1   放大


        a>1
        只控制水平方向放大
        transform: scaleX(a);
        只控制垂直方向放大
        transform: scaleY(a);


        两个值:a 水平  b 垂直
        transform: scale(a,b);

旋转：transfrom:rotate(a)

a 旋转的角度单位deg
a>0 顺时针
a<0 逆时针

    */
    /* transform: rotate(10deg); */
    /* transform: rotate(-10deg); */

    /* 绕着x轴的正方向的顺时针旋转 */
    /* 绕着x轴的正方向的逆时针旋转 */
    /* transform: rotateX(30deg); */
    /* transform: rotateX(-30deg); */

    /* 绕着Y轴的正方向的顺时针旋转 */
    /* transform: rotateY(30deg); */
    /* 绕着Y轴的正方向的逆时针旋转 */
    /* transform: rotateY(-30deg); */

    /* 旋转，绕着原点/中心点 */

变化基点:transform-origin
值：
关键字top、left、right、bottom、center
百分比
数字

        两个值：
        第一个值——水平方向上的偏移量，关键字选择left right  center
        第二个值——垂直方向上的偏移量，关键字选择top bottom  center

基点在左上角
transform-origin:0 0;
transform-origin:left top;

    基点在右下角 
     transform-origin:100% 100%; 
     transform-origin:right bottom; 

    transform: rotate(30deg);
  }

倾斜:transfrom-skew

a——角度值，单位是deg
一个值——水平方向的拉伸
两个值——水平方向的拉伸，垂直方向的拉伸

            注意：a为负值，代表反向拉伸

            保持某一方向不变
            1.可以设置该方向为0
            2.skewY/skewX 设置

            控制某一方向上的拉伸，另一个方向不变
            skewX——水平方向的拉伸
            skewY——垂直方向的拉伸
        

        /* 水平方向上的拉伸 */
        /* transform: skew(10deg); */
        /* transform: skew(-10deg); */

        /* 保持水平方向拉伸不变，垂直方向拉伸 */
        /* transform: skew(0,10deg);  */
        /* transform: skewY(10deg); */

        /* transform: skew(10deg,20deg); */

画三角形

<style>
      .sanjiao{
        width: 0;
    height: 0;
        /* background-color: aquamarine; */

        /* 边框实现画三角形 */
        /* transparent透明度--设置颜色 */
        border-width: 200px  200px  300px  300px;
        border-color: transparent red red transparent;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <div class="sanjiao"></div>
  </body>

风车练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            position: absolute;
            top: 200px;
            left: 100px;
            border: 1px solid rebeccapurple;
        }
        .box1,
        .box2,
        .box3,
        .box4{
            width: 0;
            height: 0;
            
            border-width: 50px 100px;
            border-color: transparent green green transparent;
            border-style: solid;

            /* 调整位置，让每一个扇叶处于同一位置下 */
            position: absolute;
            top: 150px;
            left: 50px;
            /* 设置旋转基点——每一个盒子都要设置相同的基点，这样旋转的方向和旋转的圆心就会一致 */
            transform-origin: right bottom;
        }
        .box1{
            transform: rotate(2deg);
        }

        .box2{
            transform: rotate(92deg);
            border-color: transparent yellow yellow transparent;
        }

        .box3{
            transform: rotate(182deg);
            border-color: transparent green green transparent;
        }

        .box4{
            transform: rotate(272deg);
            border-color: transparent yellow yellow transparent;
        }
    </style>
</head>
<body>
    <div class="box">

        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>

    </div>
</body>
<script>
    var box1 = document.querySelector(".box1")
    var box2 = document.querySelector(".box2")
    var box3 = document.querySelector(".box3")
    var box4 = document.querySelector(".box4")

    // 1-获取大盒子
    var box = document.querySelector(".box")


    var a = 4
    var b = 94
    var c = 184
    var d = 274

    // show为true就顺时针转
    var show = true;

    // 监听鼠标移入事件
    box.addEventListener('mouseenter',function () {
        show = true
    })

    // 监听鼠标移出事件
    box.addEventListener('mouseleave',function () {
        show =false
    })

    setInterval(() => {
        a= show? a+4:a-4;
        b= show? b+4:b-4;
        c= show? c+4:c-4;
        d= show? d+4:d-4;

        box1.style.transform = "rotate("+a+"deg)"
        box2.style.transform = "rotate("+b+"deg)"
        box3.style.transform = "rotate("+c+"deg)"
        box4.style.transform = "rotate("+d+"deg)"
    }, 20);

</script>
</html>

transition动画

transition实现过渡动画的效果，把变化的中间部分呈现出来
1-transition-

复合写法:  property  duration  timing-function delay
         transition: all 2s linear; 

          transition-property设置过渡动画生效的对应css样式属性 
            值:all_需要变化的所有样式都生效
                none_没有样式生效变化效果
                property_指定某一个需要变化的css样式属性生效 
                        _需要指定多个变化属性,就用逗号分隔
                        
    动画变化的持续时间 s/ms
          如果有多个时间值,会对应到多个property 
          transition-duration: 2s,5s,10s; 
         transition-duration: 2s;
         
    动画变化的延迟时间 
          transition-delay: 2s; 
          如果有多个时间值,会对应到多个property 
          transition-delay: 2s,5s,10s; 

    动画速度曲线 
         transition-timing-function: ease;
         transition-timing-function: ease-in; 
          transition-timing-function: linear; 
         transition-timing-function: cubic-bezier(.18,.83,1,.2);

两个盒子的平移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,
        .box2{
            width: 200px;
            height: 300px;

            
            margin-top: 20px;
        }
        .box2{
            background-color: blueviolet;
            transition: all 2s linear;
        }
        
        .box1{
            /* background-color: aquamarine; */
            transition: all 2s cubic-bezier(0.47, 0.84, 0.46,-0.08);
        }
        
        /* 分析
        垂直方向上，小方块匀速下落——linear
        水平方向上，小方块会产生回弹——cubic-bezier()
        */
        /* .box1:hover{
            transform: translate(100px,100px);
        } */


        /* .box:hover .box1{
            transform: translateX(500px);
        }

        .box:hover .box2{
            transform: translateY(200px);
        } */

        body:hover .box1{
            transform: translateX(500px);
        }

        body:hover .box2{
            transform: translateY(400px);
        }
    </style>
</head>
<body>
    <!-- <div class="box">
        <div class="box1"> </div>
        <div class="box2"> </div>
    </div> -->

    <!-- 采用嵌套关系，实现内部元素又有父元素的平移效果，又有自身元素的平移 -->
    <div class="box1">
        <div class="box2"> </div>    
    </div>
        
</body>
</html>

时钟练习:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
      }
      ul {
        /* 清空默认样式 */
        margin: 0;
        padding: 0;
        list-style: none;

        width: 300px;
        height: 300px;
        background-color: black;

        /* 表盘的外边框 */
        border: 12px solid grey;

        /* 变圆 */
        border-radius: 50%;

        position: relative;
      }
      li {
        width: 10px;
        height: 10px;
        background-color: red;

        /* 设置小圆点 */
        border-radius: 50%;

        /* 设置每一个小圆点的定位 */
        position: absolute;
        top: 5px;
        left: 145px;

        /* 旋转基点在元素外 */
        transform-origin: center 145px;
      }

      li:nth-child(5n + 1) {
        background-color: white;
        height: 20px;
        border-radius: 10px;
      }

      /* 表盘的中心点 */
      .dot {
        width: 32px;
        height: 32px;
        background-color: aqua;

        position: absolute;
        top: 145px;
        left: 145px;

        border-radius: 50%;
        z-index: 1;
      }

      /* 绘制时针 */
      .hour {
        width: 32px;
        height: 70px;
        background-color: blue;

        position: absolute;
        top: 108px;
        left: 145px;

        /* 设置旋转基点 */
        transform-origin: center 55px;
        /* transform: rotate(45deg); */
      }

      /* 通过伪元素设置指针的箭头 */
      .hour::before {
        content: "";

        position: absolute;
        top: -40px;

        border-width: 20px 16px;
        border-color: transparent transparent blue transparent;
        border-style: solid;
      }

      /* 绘制分针 */
      .minute {
        width: 24px;
        height: 90px;
        background-color: green;

        position: absolute;
        top: 88px;
        left: 150px;

        /* 设置旋转基点 */
        transform-origin: center 74px;

        /* transform: rotate(180deg); */

      }

      /* 通过伪元素设置指针的箭头 */
      .minute::before {
        content: "";

        position: absolute;
        top: -40px;

        border-width: 20px 12px;
        border-color: transparent transparent green transparent;
        border-style: solid;
      }

      /* 绘制秒针 */
      .second {
        width: 16px;
        height: 140px;
        background-color: red;

        position: absolute;
        top: 60px;
        left: 154px;

        /* 设置秒针的旋转基点——针对自身 */
        /* 左右居中，上下固定 */
        transform-origin: center 100px;
        /* transform: rotate(935deg); */
      }

      /* 通过伪元素设置指针的箭头 */
      .second::before {
        content: "";

        position: absolute;
        top: -40px;

        border-width: 20px 8px;
        border-color: transparent transparent red transparent;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <!-- 表盘 -->
    <ul></ul>
    <!-- 旋转中心点 -->
    <div class="dot"></div>

    <!-- 时针 -->
    <div class="hour"></div>
    <!-- 分针 -->
    <div class="minute"></div>
    <!-- 秒针 -->
    <div class="second"></div>
  </body>
  <script>
    var mul = document.querySelector("ul");

    // 1-获取三个指针
    var hour = document.querySelector(".hour");
    var minute = document.querySelector(".minute");
    var second = document.querySelector(".second");
    

    for (var i = 0; i < 60; i++) {
      mul.innerHTML += "<li style='transform: rotate(" + i * 6 + "deg);'></li>";
    }

    // 2-设置初始时间
    // h = 3
    // m = 59
    // s = 50
    
    // 6-获取系统当前时间
    var myDate =new Date()
    var h = myDate.getHours()
    var m = myDate.getMinutes()
    var s = myDate.getSeconds()

    
    // 4-开启定时器
    setInterval(() => {
      s++;
      // 5-判断进位逻辑
      if(s>=60){
        s=0;
        m++;
        if (m>=60) {
          m=0;
          h++;
          if (h>=24) {
            h=0
          }
        }
      }
      // 3-对应到钟表上的时间旋转角度
      // 1h = 30deg
      //1m = 6deg
      //1s = 6deg
      hour.style.transform=`rotate(${h*30}deg)`
      minute.style.transform=`rotate(${m*6}deg)`
      second.style.transform=`rotate(${s*6}deg)`
    }, 1000);
  </script>
</html>

3D变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 父容器设置3D空间 */
        .box{
            width: 200px;
            height: 200px;

            background-color: aquamarine;
            /* 1-构造3D空间 */
            transform-style: preserve-3d;
            /* 2-构造景深 */
            perspective: 100px;
            /* 3-观察立体图形的角度 */
            /* perspective-origin: 500% 200%; */

            position: absolute;

            top: 100px;
            left: 100px;

        }

        .box1{
            width: 50px;
            height: 50px;

            background-color: royalblue;

            transform: rotateY(30deg);
        }
    </style>
</head>
<body>
    <!-- 3D变化要求：必须要有父容器，并且，父容器需要构造一个3D空间 -->
    <div class="box">
        <div class="box1">前</div>
    </div>
</body>
</html>

构造一个3D立体盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 父容器设置3D空间 */
        .box{
            width: 200px;
            height: 200px;

            background-color: aquamarine;
            
            /* 1-构造3D空间 */
            transform-style: preserve-3d;
            /* 2-构造景深 */
            /* perspective: 1000px; */
            /* 3-观察立体图形的角度 */
            /* perspective-origin: 500% 200%; */

            position: relative;

            top: 200px;
            left: 200px;

            transition: all 10s linear;

        }
        body:hover .box{
            transform: rotateX(360deg);
        }

        .box1{
            width: 50px;
            height: 50px;

            background-color: royalblue;

            position: absolute;
            opacity: 0.3;
        }

        .box1:first-child{
            transform: translateZ(50px);
        }
        
        .box1:nth-child(3){
            transform-origin: left center;
            transform: rotateY(-90deg);
            background-color: green;
        }

        .box1:nth-child(4){
            transform-origin: right center;
            transform: rotateY(90deg);
            background-color: brown;
        }

        .box1:nth-child(5){
            transform-origin: top center;
            transform: rotateX(90deg);
            background-color: red;
        }
        .box1:nth-child(6){
            transform-origin: bottom center;
            transform: rotateX(-90deg);
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 3D变化要求：必须要有父容器，并且，父容器需要构造一个3D空间 -->
    <div class="box">
        <div class="box1">前</div>
        <div class="box1">后</div>
        <div class="box1">左</div>
        <div class="box1">右</div>
        <div class="box1">上</div>
        <div class="box1">下</div>
    </div>
</body>
</html>

盒子爆炸练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 1-1 小盒子的父容器设置3D空间 */
      .box {
        width: 50px;
        height: 50px;

        /* background-color: aquamarine; */

        /* 1-构造3D空间 */
        transform-style: preserve-3d;
        /* 2-构造景深 */
        /* perspective: 300px; */
        /* 3-观察立体图形的角度 */
        /* perspective-origin: 500% 200%; */

        /* 1-2 让小盒子父容器整体居中 */
        position: absolute;
        top: calc(50% - 25px);
        left: calc(50% - 25px);

        /* 1-3 设置小盒子父容器过渡动画效果——需要通过hover等方式触发 */
        transition: all 10s linear;

        
        transform: translateZ(25px);

        /* 1-4 设置小盒子父容器旋转中心 */
        /* 设置立体的旋转中心点，需要在原本圆心的基础上往Z轴前进一段距离，将中心的移到立体空间的中心 */
        transform-origin: center center 25px;


        /* 1-9 要使得旋转动画在页面加载完成就实现，需要通过animation动画设置 */
        animation: myrotate 2s linear infinite;

        /* x
<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 X 坐标方向的矢量。

y
<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 Y 坐标方向的矢量。

z
<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 Z 坐标方向的矢量。

a
<angle> 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转 */
        /* transform: rotate3d(); */
      }

      @keyframes myrotate {
        from {
          transform: rotateX(0deg) rotateY(0deg);
        }
        to {
          transform: rotateX(360deg) rotateY(360deg);
        }
      }

      body:hover .big-box {
        transform: rotateX(360deg) rotateY(360deg);
      }

      /* 1-5 设置小盒子的每个面样式 */
      .box1 {
        /* 1-6 小盒子每个面的大小需要同小盒子父容器保持一致 */
        width: 50px;
        height: 50px;
        
        /* 1-7 设置小盒子每个面初始位置一致 */
        position: absolute;

        /* 透明度，包括内部文字也透明 */
        opacity: 0.3;
      }
      
      /*1-8 设置小盒子每个面的所处的位置 */
      .box1:first-child {
        background-color: royalblue;
        transform: translateZ(50px);
      }

      .box1:nth-child(3) {
        transform-origin: left center;
        transform: rotateY(-90deg);
        background-color: green;
      }

      .box1:nth-child(4) {
        transform-origin: right center;
        transform: rotateY(90deg);
        background-color: brown;
      }

      .box1:nth-child(5) {
        transform-origin: top center;
        transform: rotateX(90deg);
        background-color: red;
      }
      .box1:nth-child(6) {
        transform-origin: bottom center;
        transform: rotateX(-90deg);
        background-color: yellow;
      }

      /* 大盒子的样式 */
      .big-box {
        width: 100px;
        height: 100px;
        /* background-color: blueviolet; */

        position: absolute;

        top: calc(50% - 100px);
        left: calc(50% - 100px);

        transition: all 10s linear;

        /* 1-构造3D空间 */
        transform-style: preserve-3d;
        /* 2-构造景深 */
        /* perspective: 300px; */
        /* 3-观察立体图形的角度 */
        /* perspective-origin: 500% 200%; */

        /* transform: translateZ(-50px); */
      }

      .box2 {
        width: 100px;
        height: 100px;

        background-color: royalblue;

        position: absolute;
        opacity: 0.3;

        transition: all 2s linear;
      }

      /* 设置当鼠标悬在大盒子上时，每个面展开 */
      .big-box:hover .box2:first-child {
        transform: translateZ(200px);
      }

      .big-box:hover .box2:nth-child(2) {
        transform: translateZ(-100px);
      }

      /*重点： 左、右、上、下的平移，并且要保持原有的旋转角度！ */
      .big-box:hover .box2:nth-child(3) {
        transform: translateX(-100px) rotateY(-90deg);
      }

      .big-box:hover .box2:nth-child(4) {
        transform: translateX(100px) rotateY(90deg);
      }

      .big-box:hover .box2:nth-child(5) {
        transform: translateY(-100px) rotateX(90deg);
      }

      .big-box:hover .box2:nth-child(6) {
        transform: translateY(100px) rotateX(-90deg);
      }

      .box2:first-child {
        transform: translateZ(100px);
      }

      .box2:nth-child(3) {
        transform-origin: left center;
        transform: rotateY(-90deg);
        background-color: green;
      }

      .box2:nth-child(4) {
        transform-origin: right center;
        transform: rotateY(90deg);
        background-color: brown;
      }

      .box2:nth-child(5) {
        transform-origin: top center;
        transform: rotateX(90deg);
        background-color: red;
      }
      .box2:nth-child(6) {
        transform-origin: bottom center;
        transform: rotateX(-90deg);
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <!-- 大盒子包小盒子，小盒子在大盒子里面 -->
    <div class="big-box">
      <div class="box2">前</div>
      <div class="box2">后</div>
      <div class="box2">左</div>
      <div class="box2">右</div>
      <div class="box2">上</div>
      <div class="box2">下</div>
      <!-- 1-画小盒子 -->
      <div class="box">
        <div class="box1">前</div>
        <div class="box1">后</div>
        <div class="box1">左</div>
        <div class="box1">右</div>
        <div class="box1">上</div>
        <div class="box1">下</div>
      </div>
    </div>
    <!-- 3D变化要求：必须要有父容器，并且，父容器需要构造一个3D空间 -->
  </body>
</html>

分栏式布局

分栏布局非常特殊，有别于传统布局方法，它将包括包括所有子元素在内的所有内容拆分为列，这与我们打印网页时候时页面内容分割成不同的页面的方式类似。

         分栏式布局具体方法:
             column-count:设置分栏数量
             column-rule:设置分栏线的样式

     //以下样式在设置了分栏数后就不生效
             column-gap:设置每个栏目与分栏线的间距
             column-width:每个栏目的宽度

响应式布局

响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕

响应式布局的四种方法

媒体查询

使用@media可以根据不同的屏幕定义不同的样式，代码如下

   /* 只要屏幕 300px> 宽度 > 600px就生效 */
 @media screen and (max-width: 600px) and (min-width: 300px){
        .box {
          background-color: green;
        }
      }

百分比

百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕

       包含块：

        1. 有父元素相对于父元素

        2. 无父元素相对于视口

        3. 或者继承于父元素

vw/vh

vw/vh是视口单位，即根据浏览器的窗口大小进行适配

rem

rem（font size of the root element）是指相对于根元素的字体大小的单位，rem只是一个相对单位

jQuery

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box1"></div>
  </body>
  <!-- 使用jQuery -->
  <!-- 1-引入jQuery的js文件 -->
  <script src="jquery-3.6.3.min.js"></script>
  <script>
    // 2-jquery基础语法 $('selctor').action()
    // selctor————css相关的选择器名
    // action()——操作方法、事件函数

    console.log($);

    //js获取的dom对象
    var box = document.querySelector(".box");
    console.log(box);

    //获取jquery对象——不会局限于数量，返回的都是 数组集合
    var $box = $('.box')
    console.log($box);

    var $box1 = $('.box1')
    console.log($box1);

    //用jquery的方法获取dom对象
    var $boxDom = $('.box')[0]
    console.log($boxDom);

    var $box1Dom = $('.box1')[1]
    console.log($box1Dom);

    //用get函数获取jquery的dom对象
    //get的参数代表 该元素在jquery数组对象里面的下标
    var $boxGet = $('.box').get(0)
    console.log($boxGet);
  </script>
</html>

jQuery筛选器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 50px;
        height: 50px;
        background-color: aqua;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div class="box">1</div>
    <div class="box">2</div>
    <span class="Bspan">2</span>
    <div class="box">3</div>
    <div class="box">
        <span class="ispan">4</span>
    </div>
    <div class="box">5</div>
    <div class="box">6</div>
    <span class="Aspan">4</span>

  </body>
  <script src="jquery-3.6.3.min.js"></script>
  <script>
    // var $boxFirst = $('.box').get(0)
    // var $boxFirst = $('.box:first-child')

    // 获取第一个/最后一个
    var $boxFirst = $('.box').first()
     console.log($boxFirst);
     var $boxLast = $('.box').last()
     console.log($boxLast);

    // // eq(下标值从0开始)
     var $box4 = $('.box').eq(3)[0]
     console.log($box4);

    
    // 前一个——同级
    var $spanPrev = $('.ispan').prev()
    console.log($spanPrev);

    //前所有——同级，但是出来的数据顺序是倒叙的
    var $spanPrevAll = $('.ispan').prevAll()
    console.log($spanPrevAll);
    console.log($spanPrevAll[0]);

    // 后一个——同级
     var $spanPrev = $('.Bspan').next()
     console.log($spanPrev);

    // //后所有——同级，出来的数据顺序  顺的
     var $spanPrevAll = $('.Bspan').nextAll()
     console.log($spanPrevAll);
     console.log($spanPrevAll[0]);
// 筛选器8：parent()
    console.log($('.span2').parent());

    // 筛选器9：parents() _ 找到所有父亲
    console.log($('.span2').parents());

    // 筛选器10：siblings()_找同级兄弟
    console.log($('.span1').siblings());

    // 筛选器11：find()_找子级满足条件的元素
    console.log($('.box').find('div'));

    //筛选器12：index()_找元素的索引
    console.log($('.box:nth-child(4)').index());
    
    //筛选器13：closest('B') _  找到 选择器A 的最近满足条件B的 开始于当前元素 的一个节点
    console.log($('.span2').closest('.box'));
    console.log($('.span2').closest('div'));
    console.log($('.box3').closest('div'));

  </script>
</html>

jQuery操作元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <p>这是写在div中p标签里的文字</p>
        <input type="text" value="123456好">
    </div>
</body>
<script src="jquery-3.6.3.min.js"></script>
<script>
    // //html()——同innerHTML()
    // console.log($('.box').html());
    // 在某个元素内部添加/替换元素
    // console.log($('.box').html(`<div>1</div>`));



    // // text()——同innerText()
    // console.log($('.box').text());
    // console.log($('.box').text("123"));
    // console.log($('.box').text("<div>1</div>"));
    //页面只会显示<div>1</div> 不能进行转换



    //val()——读取/修改表单元素的值
   console.log($('input').val());
   console.log($('input').val("好上加好"));
   console.log($('input').val());
</script>
</html>

jQuery操作类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box2{
            width: 100px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box1 box2 box3 box4">

    </div>

    <button>切换</button>
</body>
<script src="./jquery-3.6.3.min.js"></script>
<script>
    //注意 都不要加 小数点
    //hasClass() —— 判断类名是否存在,返回值为 true/false
    // console.log($('div').hasClass('box1'));

    // addClass()_ 添加类名
    // console.log($('div').addClass('box4'));

    // removeClass()_删除类名
    // console.log($('div').removeClass('box2'));

    //toggleClass()
    //获取切换按钮——只要原生有当前类名，他就会删除；没有当前类名，就会添加
    // console.log($('div').toggleClass('box2'));
   
    var btn = document.querySelector('button')
   btn.addEventListener('click',function () {
    $('div').toggleClass('box2')
   })
</script>
</html>

jQuery操作样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box1" style="opacity: 0.2;">下标0</div>
    <div class="box1">下标1</div>
    <div class="box1">下标2</div>

    <div class="box2">4</div>
    <div class="box3">5</div>
</body>
<script src="jquery-3.6.3.min.js"></script>
<script>
    // // 获取指定样式 .css('样式属性名')
    // var box1css = $('.box1').css('width')
    // var box1css = $('.box1').css('opacity')
    // console.log(box1css);
    
    // // 修改指定样式名的值 .css('样式属性名','值')
    // var box2css = $('.box1').css('width','200px')
    // console.log(box1css);
    // // console.log(box2css);

    //通过函数来给样式属性名赋值
    //参数1  要修改的样式属性名
    // $('.box1').css('width',function (index,v) {
    //     // //index 每一个下标
    //     console.log(index);
    //     // //v 每一个对应的width 的初始值
    //     console.log(v);

    //     if (index % 2 == 0) {
    //         //如果下标 是2的倍数 ，就为其的width改值______通过return返回的就是要修改的值
    //         return '300px'
    //     }
    // })

    //修改多个样式 css({样式1:值,样式2:值})
    // $('.box1').eq(0).css({
    //     width:200,
    //     'background-color':'red'
    // })
</script>
</html>

jQuery操作属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box1" myclass1="abc" myclass2="abc">盒子1</div>
</body>
<script src="../0213上午/jquery-3.6.3.min.js"></script>
<script>
    // 记得都要带查询/修改的参数

    // //attr()
    // console.log($('div').attr('class'));//box1
    // // 修改原生属性class的值
    // console.log($('div').attr('class','box2'));
    // console.log($('div').attr('class'));//box2

    // console.log($('div').attr('myclass1'));//abc
    //  // 修改自定义属性myclass1的值
    // console.log($('div').attr('myclass1','abcd'));
    // console.log($('div').attr('myclass1'));//abcd


    //removeAttr()——既可以移出自定义属性，也可以移出原生属性
    // console.log($('div').removeAttr('class'));
    // console.log($('div').removeAttr('myclass1'));


    //prop()——查询到原生属性值，也可以修改原生属性，并且，修改后的原生属性值，会显示在页面的标签中
    // console.log($('div').prop('class'));
    // console.log($('div').prop('class','box2'));
    // // console.log($('div').prop('class'));

    // console.log($('div').prop('myclass1'));//不可查询最初自定义的属性值
    // console.log($('div').prop('myclass1','abcd'));//修改自定义的属性值，但是不会显示在页面的标签中，只会出现在属性里
    // console.log($('div').prop('myclass1'));//获取到修改后的自定义的属性值


    //removeProp()——原生属性+原来的自定义属性不可移出
    // 只可移出，由prop添加的自定义属性
    console.log($('div').removeProp('class'));
    console.log($('div').removeProp('myclass1'));

    // console.log($('div').prop('myclass3','3333'));//添加属性
    // console.log($('div').attr('myclass3','3333'));//添加属性
    console.log($('div').removeProp('myclass3'));

</script>
</html>

jQuery操作元素

在<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box1">盒子1</div>
    <div class="box1">盒子2</div>
    <div class="box1">盒子3</div>
    <div class="box1">盒子4</div>
  </body>
  <script src="../0213上午/jquery-3.6.3.min.js"></script>
  <script>
    // 创建一个jquery对象元素
    var myY = $('<div class="box2" style="width: 200px;height:200px;background-color: tomato;">我想添加的盒子</div>')

    // 添加元素
    // A被添加的元素（父），B添加的元素（子）
    //A.append(B)___向A的最后一个子节点添加元素
    // $('.box1').eq(0).append(myY)
    $('body').append(myY)

    //$(B).appendTo(A)  B必须通过$来进行操作
    //把B添加到A里面
    // $(myY).appendTo($('.box1').eq(2))
    // myY.appendTo($('.box1').eq(2))

    //prepend()——向A的第一个子节点添加元素
    // $('body').prepend(myY)
    //prependTo()——把$(B)添加到A里
    // $(myY).prependTo($('body'))

    
    //向指定的位置前/后添加元素
    // before()
    // $('.box1').eq(1).before(myY)
    // //after()
    // $('.box1').eq(1).after(myY)

    //insertBefore()/insertAfter()___把。。（子）。。添加到..（父）.里面去
    // $(myY).insertBefore($('.box1').eq(1))
    // $(myY).insertAfter($('.box1').eq(1))
  </script>
</html>

jQuery事件绑定

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 300px;
        height: 300px;
        background-color: aquamarine;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin-left: 20px;
        position: relative;
      }
      .box3 {
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        /* margin-left: 20px; */
        position: absolute;
        /* left: 40px; */
        right: 80px;
        bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
        <div class="box3"></div>
      </div>
    </div>
  </body>
  <script src="../0213上午/jquery-3.6.3.min.js"></script>
  <script>
    //基础事件绑定on('监听的事件名click\mouseover',function(){})
    // $('.box3').on('click',function () {
    //   console.log(1111);
    // })

    //事件委托绑定事件——父委托给子 on('监听的事件名click\mouseover','交给谁委托的选择器',function(){})
    // 委托事件完成后，父亲就不会触发事件，而接到委托的选择器才会触发事件
    // $(".box2").on("click", ".box3", function () {
    //   console.log(1111);
    // });

    // 批量事件绑定 on({事件1:function () {事件1逻辑},事件2:function () {事件2逻辑}})
    // $(".box3").on({
    //   click: function () {
    //     console.log(1111);
    //   },
    //   mouseover: function () {
    //     console.log(22);
    //   },
    // });

    //one()____事件只会触发一次
    // $('.box3').on('click',function () {
    //   console.log(1111);
    // })
    $('.box3').one('click',function () {
      console.log(1111);
    })
  </script>
</html>

给子元素和父元素都绑定了事件后触发子元素的事件时父元素的事件也会因为冒泡反应被触发

常用的jQuery事件处理函数

直接使用
click(‘事件处理函数’)

mouseover('事件处理函数')

mouseout('事件处理函数')

change('事件处理函数')——————只作用于表单

hover('事件处理函数')——————移入/移出都会触发的函数

jQuery解绑事件

off('需要解绑的事件处理函数')
 $('.box2').off('click')

off('需要解绑的事件处理函数',所要指定解绑的事件名)
$('.box2').off('click',B)

jQuery动画函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 300px;
        height: 300px;
        background-color: aquamarine;
      }
      button {
        width: 100px;
        height: 50px;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换状态</button>
    <button>指定状态</button>
    <div class="box1"></div>
  </body>
  <script src="../0213上午/jquery-3.6.3.min.js"></script>
  <script>
    基本动画函数
    参数1：运动时间——不写就瞬间完成
    参数2：运动曲线__jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件
    参数3：动画完成时的执行函数
    show()————显示
    $("button")
      .eq(0)
      .click(function () {
        $(".box1").show(3000, function () {
          console.log("完成");
        });
        // $('.box1').show(3000,'linear')
      });

    hide()————隐藏
    $("button")
      .eq(1)
      .click(function () {
        $(".box1").hide();
      });

    //toggle()————切换
    $("button")
      .eq(2)
      .click(function () {
        $(".box1").toggle(2000);
      });


    # 折叠动画函数
    slideDown()
    $("button")
      .eq(0)
      .click(function () {
        $(".box1").slideDown(3000, function () {
          console.log("完成");
        });
      });

    // slideUp()
    $("button")
      .eq(1)
      .click(function () {
        $(".box1").slideUp(3000, function () {
          console.log("完成");
        });
      });

    //slideToggle()
    $("button")
      .eq(2)
      .click(function () {
        $(".box1").slideToggle(3000, function () {
          console.log("完成");
        });
      });

    渐隐渐显动画函数
    fadeIn()
    $("button")
      .eq(0)
      .click(function () {
        $(".box1").fadeIn(3000, function () {
          console.log("完成");
        });
      });

    //fadeOut()
    $("button")
      .eq(1)
      .click(function () {
        $(".box1").fadeOut(3000, function () {
          console.log("完成");
        });
      });

    //fadeToggle()
    $("button")
      .eq(2)
      .click(function () {
        $(".box1").fadeToggle(3000, function () {
          console.log("完成");
        });
      });

    //fadeTo()——————多一个指定到的透明度  0~1
    $("button")
      .eq(3)
      .click(function () {
        $(".box1").fadeTo(3000,0.5,function () {
          console.log("完成");
        });
      });
  </script>
</html>

jQuery的ajax请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>

  </body>
  <script src="./jquery-3.6.3.min.js"></script>
  <script>
    $.ajax({
      //发起/访问的请求地址
      url: "https://www.bilibili.com",
      //请求方法
      method: "GET",
      //请求成功时的回调函数
      success(res) {
        console.log(res);
      },
      // 请求失败时的回调
      error(reason) {
        console.error(reason);
      },
      complete() {
        console.log("无论请求成功还是失败，都会调用 complete里面的内容");
      },
    });
  </script>
</html>

canvas画布

canvas的基本使用

<body>
    <!-- 画布的宽高，只能在属性里设置 -->
    <canvas class="canv" width="400" height="400">
        <img src="img/photo4.jpg" alt="">
        当浏览器版本过低，才会看到这里面的内容
    </canvas>

    <img src="img/photo4.jpg" alt="">
</body>
<script>
    // 1-通过原生js获取到canvas
    var myCan = document.querySelector('canvas')
    //2-构造一个canvas 2D画布空间
    var myCont = myCan.getContext('2d')

    // 向画布里画图片
    // 1-获取图片
    var myimg = document.querySelector('img')
    //2-监听图片是否加载成功
    myimg.addEventListener('load',function () {
        //3-图片加载成功后，在画布空间里画图片
        myCont.drawImage(myimg,0,0)
    })
</script>

canvas线条的绘制

<body>
    <!-- 画布的宽高，只能在属性里设置 -->
    <canvas class="canv" width="400" height="400">
        <img src="img/photo4.jpg" alt="">
        当浏览器版本过低，才会看到这里面的内容
    </canvas>

    <img src="img/photo4.jpg" alt="">
</body>

闭合空间

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #cavs {
        border: 5px solid green;
      }
    </style>
  </head>
  <body>
    <canvas id="cavs" width="400" height="400"></canvas>
  </body>
  <script>
    //beginPath()/closePath()——一对，相当于分区
    
    //1-获取canvas对象
    var myCan = document.getElementById('cavs')

    //2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
    var myCont = myCan.getContext('2d')
    
    //画倒三角形
    // 3-beginPath() 真正的开始绘制路径
    myCont.beginPath()

    //4-确定绘制的起始点
    myCont.moveTo(100,100) 
    //5-确定第1次的结束点
    myCont.lineTo(200,100)
    //5-确定第2次的结束点
    myCont.lineTo(150,150)
    //5-确定第3次的结束点——因为有closePath，就不需要再绘制最后一个点
    // myCont.lineTo(100,100)

    myCont.lineWidth = 10
    myCont.strokeStyle = "red"

    // 6-closePath() 确定真正的结束绘制路径，会在当前位置绘制一条到起始点的线，真正形成封闭图形
    myCont.closePath()
    // 7-执行绘制
    myCont.stroke()


    // //画正三角
    // 3-beginPath() 真正的开始绘制路径
    myCont.beginPath()

    myCont.moveTo(150,150)
    myCont.lineTo(200,200)
    myCont.lineTo(100,200)


    myCont.lineWidth = 20
    myCont.strokeStyle = "blue"

    // 6-closePath() 确定真正的结束绘制路径，会在当前位置绘制一条到起始点的线，真正形成封闭图形
    myCont.closePath()
    // 7-执行绘制
    myCont.stroke()


  </script>
</html>

清空画布

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #cavs {
        border: 5px solid green;
      }
    </style>
  </head>
  <body>
    <canvas id="cavs" width="400" height="400"></canvas>
  </body>
  <script>
    //clearRect
    var oC = document.getElementById("cavs");
    var context = oC.getContext("2d"); //获取canvas画布2d空间

    // 实心矩形
    context.fillStyle = '#a61b29'//填充颜色要写到绘制之前
    context.fillRect(100,100,200,200)

    // 矩形区域清除
    // clearRect(起始点x坐标,起始点y坐标,宽,高)
    context.clearRect(100,100,100,100)
    
    //清空整个画布
    context.clearRect(0,0,400,400)
      
  </script>
</html>

圆弧绘制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #cavs {
        border: 5px solid green;
      }
    </style>
  </head>
  <body>
    <canvas id="cavs" width="400" height="400"></canvas>
  </body>
  <script>
    // 弧度的计算=角度数*（Math.PI/180°）

    //1-获取canvas对象
    var myCan = document.getElementById("cavs");

    //2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
    var myCont = myCan.getContext("2d");

    // 起始角度 0 ----起始弧度 0*（Math.PI/180°）------ 右边3点钟方向为 0 度
    // 结束角度 180 --- 结束弧度 180*（Math.PI/180°）
    // arc(100圆心的x坐标,100圆心的y坐标,50圆的半径,0圆弧的起始弧度,180*(Math.PI/180)圆弧的结束弧度,true逆时针画/false顺时针)

    myCont.beginPath()
    myCont.arc(100,100,50,0,180*(Math.PI/180),true)
    myCont.closePath()
    myCont.stroke()

    myCont.beginPath()
    myCont.arc(300,100,50,0,180*(Math.PI/180),true)
    myCont.closePath()
    myCont.stroke()

    myCont.beginPath()
    myCont.arc(200,200,100,0,180*(Math.PI/180))
    myCont.closePath()
    myCont.stroke()//执行绘制线条

  </script>
</html>

swiper

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="swiper-bundle.min.css" />
    <style>
      /* 4-调节swiper大小 */
      .swiper {
        width: 600px;
        height: 300px;

        border: 1px solid red;

        /* --swiper-theme-color: yellow; */
      }

      /* 如果开启了loop循环，需要注意顺序！ */
      .swiper-slide:nth-child(2),
      .swiper-slide:nth-child(5) {
        background-color: antiquewhite;
      }
      .swiper-slide:nth-child(3) {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
      .swiper-slide:nth-child(1),
      .swiper-slide:nth-child(4) {
        background-color: aquamarine;
      }

      /* 默认未选中的样式名 */
      .swiper-pagination-bullet {
        background: #ff6600;
        opacity: 1;
      }
      /* 自定义选中的样式名以及样式 */
      .my-bullet-active {
        background: yellow;
        opacity: 1;
        width: 20px;
      }

      .my-button-disabled {
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <!-- 2-搭建swiper框架 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
  </body>
  <script src="swiper-bundle.min.js"></script>
  <script>
    // 3-初始化swiper
    var mySwiper = new Swiper(".swiper", {
      direction: "horizontal", // vertical垂直切换选项  horizontal水平方向

      effect: "fade", //设置切换效果 fade淡入
      fadeEffect: {
        //一般用于内部元素大小不一致,一般情况是开启状态,true
        //false就不能隐藏前一个元素
        crossFade: true,
      },

      autoplay: true, //开启自动播放

      //   loop: true, // 循环模式选项，第一个Slide和最后一个Slide，都会被复制一份,操作的时候要注意控制真实的+复制的
      //定义的是   a b c
      //实际网页中需要操作的 c a b c a

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        //如果需要修改被选中状态的样式与未选中状态的样式——建议，选中状态的样式名写在未选中状态的后面，不然会被覆盖掉
        bulletActiveClass: "my-bullet-active",
      },

      // 如果需要前进后退按钮---导航按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
        // 自定义前进后退按钮不可用时的样式名
        disabledClass: "my-button-disabled",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },

      //   on监听事件
      on: {
        slideChangeTransitionEnd: function () {
          if (this.isEnd) {
            this.navigation.$nextEl.css("display", "none");
          } else {
            this.navigation.$nextEl.css("display", "block");
          }
        },
        click: function (s) {
          console.log(s);
          this.navigation.$prevEl.css("display", "none");
          this.navigation.$nextEl.css("display", "none");
        },
      },
    });
  </script>
</html>