前言

jQuery01学习开始

一、复习

DOM: 文档对象模型
HTML代码转换成 document 对象, 然后再渲染到页面上
利用 JS 直接操作 document 来实现更加灵活的操作
选择要操作的元素
id: document.getElementById
父 parentElement
子 children
兄 previousElementSibling
弟 nextElementSibling
css选择器
单个 querySelector
多个 querySelectorAll
操作属性
系统属性
img 的 src : 切换 img 标签显示的图
className: class属性的本体
classList: 集合 -- 包含很多快捷操作class的方法
innerText: 内容文本
innerHTML: 内容中所有HTML代码
自定义属性
规范 : data- （存放在 dataset ）
不规范: 随意声明(1.getAttribute 2.setAttribute .)
事件
click :点击
focus : 焦点
blur : 失去焦点
change : 值变更
keyup :键盘按键抬起
scroll : 滚动
mouseover :鼠标悬浮

二、jQuery

2006年发布的框架, 秉承着 write less, do more --- 写的少, 做的多 理念诞生
把原生的复杂的操作, 封装之后 , 得到更加简单的用法
使用 jQuery 必须参考其说明书 ：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

三、css操作

<!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>css 09:13</title>
</head>

<body>
  <ul>
    <li>泡泡</li>
    <li>亮亮</li>
    <li>铭铭</li>
  </ul>
  <!-- 脚本通常分两类: 开发版 和 产品版 -->
  <!-- 开发版: 带有格式和注释, 适合查看源码, 体积大 -->
  <!-- 产品版: 通常带 min 标识, 把注释和格式删除, 体积小. 适合用 -->
  <!-- jquery-3.6.1.min.js需要额外下载 或者直接使用线上资源 -->
  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 由 jQuery 脚本中, 提供的全局变量
    console.dir($)

    console.log($('li')) //查看其原型

    // 修改style 内联样式
    $('li').css('color', 'blue')

    // 接收对象类型
    $('li').css({
      background: 'orange',
      // css中, 多个单词组成的属性, 此处兼容  破折号语法 和 小驼峰
      'margin-bottom': '10px',
      fontSize: '40px'
    })
  </script>
</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>click 事件</title>
</head>

<body>
  <ul>
    <li>泡泡</li>
    <li>铭铭</li>
    <li>亮亮</li>
  </ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 查询到所有li
    $('li').click(function () {
      console.log(this) // this: 当前触发事件的对象
      this.style.color = 'green'

      // $(DOM元素) : 把元素封装在 JQ的对象里
      // 就可以使用 JQ 原型中提供的各种 强力方法
      console.log('$(this)', $(this))

      $(this).css('background', 'orange')
    })
  </script>
</body>

</html>

五、class

<!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>class 09:38</title>

  <style>
    .active {
      background-color: orange;
    }

    #box {
      width: 200px;
      height: 200px;
      border: 3px solid gray;
    }
  </style>
</head>

<body>
  <button>添加</button>
  <button>删除</button>
  <button>切换</button>
  <div id="box"></div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // eq(i) :  equal等于
    // eq(i) : 从查询到的数组中, 获取序号 i 的元素
    console.log($('button').eq(0))

    // 添加
    $('button').eq(0).click(function () {
      $('#box').addClass('active')
    })

    // 移除
    $('button').eq(1).click(function () {
      $('#box').removeClass('active')
    })

    // 切换
    $('button').eq(2).click(function () {
      $('#box').toggleClass('active')
    })
  </script>
</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>练习 10:11</title>
  <style>
    img {
      transition: 0.4s;
      border: 4px solid transparent;
    }

    img.active {
      border: 4px solid orange;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div id="box">
    <img src="./imgs/smallskin-1.jpg" alt="">
    <img src="./imgs/smallskin-2.jpg" alt="">
    <img src="./imgs/smallskin-3.jpg" alt="">
    <img src="./imgs/smallskin-4.jpg" alt="">
    <img src="./imgs/smallskin-5.jpg" alt="">
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#box>img').click(function () {
      // siblings(): 找到当前元素的 所有兄弟元素
      $(this).addClass('active').siblings().removeClass('active')
      // 当前项.添加样式.兄弟元素们.移除样式
    })
  </script>
</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>练习 10:25</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    ul {
      display: flex;
      background-color: #002c69;
      padding: 0 30px;
    }

    li {
      color: white;
      padding: 10px 20px;
      cursor: pointer;
      /* 文本无法被双击选中 */
      user-select: none;
    }

    li.active {
      background-color: orange;
      /* 当前选中项, 不应该再接收点击事件 */
      /* 鼠标指针事件: 全部删除 */
      pointer-events: none;
    }
  </style>
</head>

<body>
  <ul>
    <li class="active">首页</li>
    <li>关于净美仕</li>
    <li>公司动态</li>
    <li>产品中心</li>
    <li>联系我们</li>
  </ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('li').click(function () {
      $(this).addClass('active').siblings().removeClass('active')
    })
  </script>
</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>练习 10:48</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    ul {
      background-color: #f5f5f6;
      padding: 40px;
      display: flex;
    }

    li {
      width: 36px;
      height: 36px;
      background-color: white;
      color: #4e6ef2;
      border-radius: 4px;
      margin-right: 8px;
      text-align: center;
      line-height: 36px;
      cursor: pointer;
      user-select: none;
    }

    li.active {
      color: white;
      background-color: #4e6ef2;
      pointer-events: none;
    }
  </style>
</head>

<body>
  <ul>
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('li').click(function () {
      $(this).addClass('active').siblings().removeClass('active')
    })
  </script>
</body>

</html>

六、show_hide

<!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>显示 与 隐藏 11:22</title>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
  </style>
</head>

<body>
  <!-- DOM主要操作 大概有: -->
  <!-- 1. 操作样式 -->
  <!-- 2. 显示状态切换 -->
  <button>显示</button>
  <button>隐藏</button>
  <button>切换</button>
  <div id="box"></div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 隐藏
    $('button').eq(1).click(function () {
      $('#box').hide() // 隐藏:  利用 style.display="none" 实现
    })
    // 显示
    $('button').eq(0).click(function () {
      $('#box').show() // 显示
    })
    // 切换
    $('button').eq(2).click(function () {
      $('#box').toggle()
    })
  </script>
</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>菜单折叠 11:35</title>
</head>

<body>
  <div id="menu">
    <h3>今日午餐:</h3>
    <ul>
      <li>黄焖鸡</li>
      <li>炝莲白</li>
      <li>羊汤泡馍</li>
      <li>驴肉火烧</li>
      <li>麻辣烫</li>
    </ul>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#menu h3').click(function () {
      // next(): 下一个兄弟元素, 相当于 nextElementSibling
      // $(this).next().toggle()

      // toggle: 瞬间切换
      // fadeToggle: 带透明度动画的切换
      // slideToggle: 带滑动动画的切换
      $(this).next().slideToggle()
    })
  </script>
</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>练习 11:45</title>
  <style>
    #box {
      position: fixed;
      right: 0;
      bottom: 0;
      width: 200px;
      border: 1px solid #bbb;
    }
  </style>
</head>

<body>
  <div id="box">
    <button>关闭</button>
    <br>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam ut quisquam exercitationem. Doloremque fuga
    reprehenderit, perspiciatis iste voluptas adipisci est ullam nisi, saepe dolorum sint. Aliquam, minus quidem.
    Dolores, molestiae.
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 关闭按钮:
    $('#box>button').click(function () {
      // $('#box').hide()
      // 参数1: 动画时长, 单位毫秒    1秒 = 1000毫秒
      // $('#box').fadeOut(2000) //渐出

      // 参数2: 动画结束时的回调函数
      $('#box').slideUp(2000, function () {

        setTimeout(() => {
          $('#box').slideDown() //滑动展开
        }, 3000);

      }) //滑动收起
    })
  </script>
</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>标签栏切换 14:01</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #tabs {
      width: 700px;
    }

    #tabs>.tab-bar {
      display: flex;
      border-bottom: 2px solid #e4393c;
      background-color: #f7f7f7;
    }

    #tabs>.tab-bar>li {
      padding: 10px 25px;
      cursor: pointer;
    }

    #tabs>.tab-bar>li.active {
      background-color: #e4393c;
      color: white;
    }

    #tabs>.tab-content {
      position: relative;
      border: 2px solid gray;
      height: 400px;
    }

    #tabs>.tab-content>li {
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="tabs">
    <ul class="tab-bar">
      <li class="active">商品介绍</li>
      <li>规格与包装</li>
      <li>售后保障</li>
      <li>商品评价</li>
      <li>预售说明</li>
    </ul>
    <ul class="tab-content">
      <li style="background: red;"></li>
      <li style="background: blue;"></li>
      <li style="background: green;"></li>
      <li style="background: orange;"></li>
      <li style="background: brown;"></li>
    </ul>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#tabs>.tab-bar>li').click(function () {
      $(this).addClass('active').siblings().removeClass('active')
      // 获取点击项的序号;  index(): 获取元素在 所有兄弟元素中的序号
      var i = $(this).index()
      console.log(i)

      // 知道选项的序号, 找到对应序号的内容, 让其显示, 让其他的隐藏
      $('.tab-content>li').eq(i).fadeIn().siblings().fadeOut()
    })

    // 让 .tab-content 下的 第一个li显示, 其他的隐藏
    $('.tab-content>li').eq(0).show().siblings().hide()
  </script>
</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>练习 14:43</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #tabs {
      width: 700px;
    }

    .tab-bar {
      display: flex;
      background-color: #000;
    }

    .tab-bar>li {
      color: #aaadbc;
      line-height: 40px;
      width: calc(100% / 5);
      text-align: center;
      cursor: pointer;
    }

    .tab-bar>li.active {
      background-color: #262626;
      color: #ecad45;
    }

    .tab-content {
      height: 350px;
      position: relative;
    }

    .tab-content>li {
      position: absolute;
      height: 100%;
      width: 100%;
      background-size: cover;
    }
  </style>
</head>

<body>
  <div id="tabs">
    <ul class="tab-content">
      <li style="background-image: url(./wzry/111.jpg);"></li>
      <li style="background-image: url(./wzry/222.jpg);"></li>
      <li style="background-image: url(./wzry/333.jpg);"></li>
      <li style="background-image: url(./wzry/444.jpg);"></li>
      <li style="background-image: url(./wzry/555.jpg);"></li>
    </ul>
    <ul class="tab-bar">
      <li class="active">技能特效研讨</li>
      <li>七周年CG</li>
      <li>首届精英杯开赛</li>
      <li>10万奖金福利</li>
      <li>讨论赢好礼</li>
    </ul>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('.tab-bar>li').mouseover(function () {
      $(this).addClass('active').siblings().removeClass('active')

      var i = $(this).index()

      // 动画效果: 带有持续时间, 如果本次动画未结束 就触发下一次动画, 就会出现排队执行的情况  --- 动画队列
      // 解决: 在执行新的动画前, 停止旧的动画
      // stop: 停止动画
      $('.tab-content>li').stop()
      $('.tab-content>li').eq(i).fadeIn().siblings().fadeOut()
    })

    // 初始化
    $('.tab-content>li').eq(0).show().siblings().hide()
  </script>
</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>自定义动画 15:40</title>
  <style>
    #box {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      background-color: orange;
      /* 方便在动画中调整位置 */
      position: relative;
    }
  </style>
</head>

<body>
  <!-- JQ提供了自定义动画, 同 css 的过渡效果 -->
  <!-- 更专业的动画 推荐采用 关键帧 @keyFrame -->
  <button>开始动画</button>
  <button>结束动画</button>
  <div id="box"></div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('button').eq(0).click(function () {
      // animate: 带有过渡效果的 修改css样式
      // 所有 大小的属性, 默认单位 px
      // 参数1: 目标css效果
      // 参数2: 持续时间, 单位毫秒  1000毫秒 = 1秒
      $('#box').animate({ width: 240 }, 2000)

      // JQ利用 JS 每隔1/60 秒, 更新一次 内联样式实现的

      $('#box').animate({
        height: 240,
        borderRadius: '50%'
      }).animate({
        left: 200,
        width: 30,
        height: 30
      })
    })

    //停止
    $('button').eq(1).click(function () {
      // 默认设定: 停止当前动画, 立刻开始 动画队列中后续的
      // 参数1: 是否要清空队列, 默认false, 代表不清空
      // 参数2: 结束动画时, 是否跳转到最终的目标效果, 默认false; 不会跳转
      $('#box').stop(true, true)
    })

    // JQ适合辅助 实现一些 简单的动画
    // 不支持 transform 和 颜色
  </script>
</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>练习 16:15</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #tabs {
      width: 300px;
      overflow: hidden;
    }

    .tab-bar {
      background-color: #9ac7ed;
      padding-top: 2px;
      display: flex;
    }

    .tab-bar>li {
      padding: 10px 15px;
      color: #2a70be;
      cursor: pointer;
    }

    .tab-bar>li.active {
      color: #c24949;
      background-color: white;
    }

    .tab-content {
      display: flex;
      height: 300px;
      position: relative;
      /* left: -200%;  */
    }

    .tab-content>li {
      /* 关闭自动 缩放能力 */
      flex: none;
      width: 100%;
      height: 100%;
      color: white;
    }
  </style>
</head>

<body>
  <div id="tabs">
    <ul class="tab-bar">
      <li class="active">新闻</li>
      <li>社会</li>
      <li>娱乐</li>
    </ul>
    <ul class="tab-content">
      <li style="background: red;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam aperiam illum a veniam consequuntur minima
        labore sapiente unde, vero harum aut atque illo enim omnis doloribus pariatur dolores ducimus? Veniam.
      </li>
      <li style="background: blue;">
        一款名为《我是渣渣辉》的游戏上架Windows 10应用商店，游戏广告页面上使用了张家辉的形象，并写着“装备RMB回收，交易1秒到
      </li>
      <li style="background: green;"></li>
    </ul>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('.tab-bar>li').click(function () {
      $(this).addClass('active').siblings().removeClass('active')

      var i = $(this).index()  // 0 1 2

      $('.tab-content').stop().animate({ left: `-${i}00%` })
    })
  </script>
</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>属性操作 16:51</title>
</head>

<body>
  <!-- 属性分两类 -->
  <!-- 1. 系统属性 : 官方提供的 -->
  <!-- 2. 自定义属性: 自定义的 data-  和 随便写的 -->
  <button id="btn1" data-sun-kai="凯凯" data-pp="泡泡" ename="亮亮">Click me</button>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 系统属性, 用 prop 方法读
    var id = $('#btn1').prop('id')
    console.log(id)

    // 自定义: 用 data- 声明的
    // 如果是 JQ 类型的对象, 推荐变量名用 $ 做前缀:  见名知意 
    var $btn1 = $('#btn1')

    console.log($btn1.data('pp'));
    console.log($btn1.data('sun-kai'));

    // 自定义: 乱写的
    console.log($btn1.attr('ename'));

    /
    // 修改
    // 系统属性 prop
    $btn1.prop('id', 'xxxx')

    // 自定义属性: 统一用 attr 方法
    $btn1.attr('ename', '暗暗')
    $btn1.attr('data-pp', '小鱼')
    $btn1.attr('data-sun-kai', '追封少年')
  </script>
</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>大小图切换练习 17:20</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #box>ul {
      display: flex;
    }

    #box>ul img {
      width: 90px;
      height: 90px;
      border: 4px solid transparent;
      cursor: pointer;
      margin-right: 4px;
    }

    #box>ul>li.active>img {
      border-color: orange;
    }
  </style>
</head>

<body>
  <div id="box">
    <img src="./imgs/1_lg.jpg" alt="">
    <ul>
      <li data-big="./imgs/1_lg.jpg" class="active"><img src="./imgs/1_sm.jpg" alt=""></li>
      <li data-big="./imgs/2_lg.jpg"><img src="./imgs/2_sm.jpg" alt=""></li>
      <li data-big="./imgs/3_lg.jpg"><img src="./imgs/3_sm.jpg" alt=""></li>
      <li data-big="./imgs/4_lg.jpg"><img src="./imgs/4_sm.jpg" alt=""></li>
    </ul>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#box li').mouseover(function () {
      $(this).addClass('active').siblings().removeClass('active')

      // 读取当前项上的自定义属性 data-big
      var big = $(this).data('big')

      // src: 属于系统属性  prop
      $('#box>img').prop('src', big)
    })
  </script>
</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>练习</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    body{
      background-color: #000;
    }
    #box{
      width: 600px;
    }
    #box>img{
      width: 100%;
    }
    #box>ul{
      width: 100%;
      display: flex;
      margin-top: 10px;
    }
    #box>ul>li{
      margin: 0 3px;
      cursor: pointer;
    }
    #box>ul>li>img{
      width: calc(100%);
      border: 1px solid transparent;
    }
    #box>ul>li.active>img{
      border-color: red;
    }
    .mask{
      background-color: rgba(0,0,0,0.6);
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="box">
    <img src="./lol/big37000.jpg" alt="">
    <ul>
      <li class="active"><img src="./lol/small37000.png" alt=""></li>
      <li><img src="./lol/small37001.png" alt=""></li>
      <li><img src="./lol/small37002.png" alt=""></li>
      <li><img src="./lol/small37003.png" alt=""></li>
      <li><img src="./lol/small37004.png" alt=""></li>
    </ul>
  </div>
  <script src="./vendor/jquery-3.6.1.min.js"></script>
  <script>
    $('li').mouseover(function(){
      $(this).addClass('active').siblings().removeClass('active')
      var i = $(this).index()
      $('#box>img').prop('src',`./lol/big3700${i}.jpg`)
    })
  </script>
</body>
</html>