WebApi经典案例,常用编程思想

最新推荐文章于 2023-10-14 13:37:45 发布

码少女壮士

最新推荐文章于 2023-10-14 13:37:45 发布

阅读量720

点赞数 2

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_40630195/article/details/122141263

版权

01-经典案例

1.1-小米搜索框

[效果预览]
在这里插入图片描述

<!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;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
      }

      .mi {
        position: relative;
        width: 223px;
        margin: 100px auto;
      }

      .mi input {
        width: 223px;
        height: 48px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 48px;
        border: 1px solid #e0e0e0;
        outline: none;
        transition: all 0.3s;
      }

      .mi .search {
        border: 1px solid #ff6700;
      }

      .result-list {
        display: none;
        position: absolute;
        left: 0;
        top: 48px;
        width: 223px;
        border: 1px solid #ff6700;
        border-top: 0;
        background: #fff;
      }

      .result-list a {
        display: block;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
      }

      .result-list a:hover {
        background-color: #eee;
      }
    </style>
  </head>

  <body>
    <div class="mi">
      <input type="search" placeholder="小米笔记本" />
      <ul class="result-list">
        <li><a href="#">全部商品</a></li>
        <li><a href="#">小米11</a></li>
        <li><a href="#">小米10S</a></li>
        <li><a href="#">小米笔记本</a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">黑鲨4</a></li>
        <li><a href="#">空调</a></li>
      </ul>
    </div>
    <script>
      /*思路分析 
        1.事件源 ： 输入框
        2.事件类型：
            onfouces: 成为焦点。  点击输入框出现光标的时候（此时用户可以输入文字）
            onblur: 失去焦点。    点击空白区域输入框光标消失的时候（此时用户不可以输入文字）
        3.事件处理
            成为焦点：(1)显示下拉菜单  (2)文本框添加颜色
            失去焦点：(1)隐藏下拉菜单  (2)文本框去掉颜色
        */

      // 1. 获取元素   input
      let search = document.querySelector('input')
      let list = document.querySelector('.result-list')

      // 2. 注册事件

      //2.1 成为焦点
      search.onfocus = function () {
        // 3.1 显示下拉菜单
        list.style.display = 'block'
        // 3.2 文本框变色
        this.classList.add('search')
      }

      // 2.2 失去焦点
      search.addEventListener('blur', function () {
        // 3.1 隐藏下拉菜单
        list.style.display = 'none'
        // 3.2 文本框去色
        this.classList.remove('search')
      })
    </script>
  </body>
</html>

1.2-购物车加减

![在这里插入图片描述](https://img-blog.csdnimg.cn/9fbf72b3e7864f9d
a870e05b0f0289a1.png)

<!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>
    <style>
      div {
        width: 80px;
      }

      input[type='text'] {
        width: 50px;
        height: 44px;
        outline: none;
        border: 1px solid #ccc;
        text-align: center;
        border-right: 0;
      }

      input[type='button'] {
        height: 24px;
        width: 22px;
        cursor: pointer;
      }

      input {
        float: left;
        border: 1px solid #ccc;
      }
    </style>
  </head>

  <body>
    <div>
      <input type="text" id="total" value="1" readonly />
      <input type="button" value="+" id="add" />
      <input type="button" value="-" id="reduce" />
      <script>
        /* 思路分析： 
            1.点击+号： 商品数量 自增
            2.点击-号： (1)商品数量 自减 (2)如果商品数量为0，则禁用减号按钮
            */

        // 1. 获取元素
        let total = document.querySelector('#total')
        let add = document.querySelector('#add')
        let reduce = document.querySelector('#reduce')

        // 2.注册事件
        //2.1 点击加号
        add.onclick = function () {
          //3.1 自增 ： 自增运算符可以隐式转换
          total.value++
          //3.2 无条件设置减号按钮允许点击
          reduce.disabled = false
        }

        // 2.2 点击减号
        reduce.onclick = function () {
          //3.1 自减
          total.value--
          //3.2 如果商品数量为0，则禁用减号按钮
          if (total.value == 0) {
            reduce.disabled = true
          }
        }
      </script>
    </div>
  </body>
</html>

1.3-图片切换

[效果预览] 在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .title {
        background-color: skyblue;
        color: white;
      }

      img {
        width: 200px;
        height: 200px;
        box-shadow: 0 0 20px hotpink;
      }
    </style>
  </head>

  <body>
    <h2 class="title">图片切换</h2>
    <img alt="" src="./images/01.jpg" />
    <br />
    <input id="prev" type="button" value="上一张" />
    <input id="next" type="button" value="下一张" />

    <script>
      /*需求 
        1.点击下一张 ： img标签显示下一张照片
        2.点击上一张 ： img标签显示上一张照片
         */

      //使用数组存储六张图片路径
      let arr = [
        './images/01.jpg',
        './images/02.jpg',
        './images/03.jpg',
        './images/04.jpg',
        './images/05.jpg'
      ]
      //使用全局变量存储当前图片下标(默认第一张下标为0)
      let index = 0

      //1.获取元素
      let prev = document.querySelector('#prev')
      let next = document.querySelector('#next')
      let img = document.querySelector('img')
      //2.注册事件
      //2.1 下一张
      next.onclick = function () {
        //3.事件处理
        //如果是最后一张，则变成第一张下标为0
        if (index == arr.length - 1) {
          index = 0
        } else {
          //不是最后一张，就显示下一张
          index++
        }
        //修改图片路径
        img.src = arr[index]
      }
      //2.2 上一张
      prev.onclick = function () {
        //3.事件处理
        //如果是第一张，则变成最后一张
        if (index == 0) {
          index = arr.length - 1
        } else {
          index--
        }
        //修改图片路径
        img.src = arr[index]
      }
    </script>
  </body>
</html>

02-核心案例：排他思想

排他思想：干掉其他兄弟，复活我自己

1.1-案例：排他思想

[效果预览] 在这里插入图片描述

<!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>
  </head>
  <body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
      /* 思路分析：点击每一个按钮 ： 排他思想修改样式（我自己样式改变，其他人样式恢复默认）  */

      //1.获取元素
      let buttonList = document.querySelectorAll('button')
      console.log(buttonList) //伪数组
      //2.注册事件
      //五个按钮都要注册事件，使用循环语句
      for (let i = 0; i < buttonList.length; i++) {
        //i = 0 1 2 3 4
        //注册点击事件
        buttonList[i].onclick = function () {
          //3.事件处理
          console.log(this) //事件源： 当前点击的按钮
          /* 排他思想： 排除他人，复活自己*/
          //排除他们
          for(let j = 0;j<buttonList.length;j++){
            buttonList[j].style.backgroundColor = ''
          }
          //复活自己
          this.style.backgroundColor = 'pink'
        }
      }
    </script>
  </body>
</html>

1.2-案例：突出展示

[效果预览]
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      body {
        background: #000;
      }

      .wrap {
        margin: 100px auto 0;
        width: 630px;
        height: 394px;
        padding: 5px;
        background: #000;
        overflow: hidden;
        border: 1px solid #fff;
      }

      .wrap li {
        float: left;
        padding: 5px;
      }

      .wrap img {
        display: block;
        border: 0;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <ul>
        <li>
          <a href="#"><img src="images/01.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/02.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/03.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/04.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/05.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/06.jpg" alt=""/></a>
        </li>
      </ul>

      <script>
        /* 思路分析： 鼠标移入每一个li元素： 排他思想修改opacity
          1.注册事件：鼠标移入每一个li元素（需要使用循环）
          2. 排他思想修改opacity : 需要循环
            * 移入的元素： 1
            * 其他兄弟： 0.5
        */

        //1.获取元素
        let liList = document.querySelectorAll('.wrap li')
        //2.循环遍历数组给每一个li元素注册事件
        for (let i = 0; i < liList.length; i++) {
          //鼠标移入事件
          liList[i].onmouseenter = function () {
            //3.排他思想修改样式
            //排除他人
            for (let j = 0; j < liList.length; j++) {
                liList[j].style.opacity = 0.5
            }
            //复活自己
            this.style.opacity = 1
          }
          
        }
      </script>
    </div>
  </body>
</html>

1.3-排他思想升级版

<!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>
    <style>
      .pink {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
       /*需求 
        给每一个按钮注册点击事件 : 
            (1)当前点击的按钮样式变化： 背景变粉色 
            (2)其他所有按钮(除我之外)样式恢复默认

        排他思想升级版有一个前提条件： 需要通过类名来修改样式
            第一步： 先使用类选择器找出上一次点击的元素， 通过classList语法进行移除
            第二步： 给本次点击的按钮(this)，通过classList添加类名
         */

      //1.获取元素
      let buttonList = document.querySelectorAll('button')
      console.log(buttonList)
      //2.注册事件
      //这个循环： 只是遍历所有的按钮，给每一个按钮注册事件
      for (let i = 0; i < buttonList.length; i++) {
        //注册事件
        buttonList[i].onclick = function () {
          //3.事件处理
          //3.1 先干掉那个唯一的pink类,移除掉
          document.querySelector('.pink').classList.remove('pink')
          //3.2 给当前点击的按钮添加pink类
          this.classList.add('pink')
        }
      }
    </script>
  </body>
</html>

03-核心案例：开关思想

1.1-全选全不选及反选

[效果预览] 在这里插入图片描述


<!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>
</head>
<body>
        <input class = 'check' type="checkbox" >
        <input class = 'check' type="checkbox">
        <input class = 'check' type="checkbox">
        <input class = 'check' type="checkbox">
        <input class = 'check' type="checkbox">
        
        <input id="checkAll" type="button" value="全选">
        <input id="unCheckAll" type="button" value="全不">
        <input id="reverseCheck" type="button" value="反选">

        <script>
           /*需求
           1.点击全选 ： 设置每一个选择框的checked属性为true 
           2.点击全不选 : 设置每一个选择框的checked属性为false
           3.点击反选 ：设置每一个选择框的checked属性与自身当前相反 （true变false，false变true）
            */ 

        //1.获取元素
        let checkAll = document.querySelector('#checkAll');
        let unCheckAll = document.querySelector('#unCheckAll');
        let reverseCheck = document.querySelector('#reverseCheck');
        let inputList = document.querySelectorAll('.check');
        console.log(checkAll,unCheckAll,reverseCheck,inputList);

        //2.注册事件
        //2.1点击全选
        checkAll.onclick = function(){
            //3.事件处理： 设置每一个选择框的checked属性为true 
            for(let i = 0;i<inputList.length;i++){
                inputList[i].checked = true;
            };
        };

        //2.2点击全不选
        unCheckAll.onclick = function(){
            //3.事件处理： 设置每一个选择框的checked属性为true 
            for(let i = 0;i<inputList.length;i++){
                inputList[i].checked = false;
            };
        };
        //2.3点击反选
        reverseCheck.onclick = function(){
            //3.事件处理： 设置每一个选择框的checked属性与自身当前相反 （true变false，false变true）
            for(let i = 0;i<inputList.length;i++){
                //写法三  : 逻辑非表达式
                inputList[i].checked = !inputList[i].checked;

                //写法二 ： 三元表达式
                // inputList[i].checked = inputList[i].checked ? false : true;
                
                //写法一 ： 双分支
                // if( inputList[i].checked ){
                //     inputList[i].checked = false;
                // }else{
                //     inputList[i].checked = true;
                // };
            };
        };
        
        </script>
</body>
</html>

1.2-点餐选择框:开关思想

[效果预览] 在这里插入图片描述

需求分析：切入点：交互
1.点击上方选择框：让下方选择框列表的checked值与自身保持一致
2.点击下方选择框列表：判断上方选择框列表状态
选中：所有的选择框checked值都是true
未选中：只要有一个选择框checked值是false
思路分析：事件三要素
1 获取元素：
2 注册事件：
3 事件处理：

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px '微软雅黑';
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th><input type="checkbox" id="checkAll" />全选/全不选</th>
        <th>菜名</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>红烧肉</td>
        <td>隆江猪脚饭</td>
        <td>￥200</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>香酥排骨</td>
        <td>隆江猪脚饭</td>
        <td>￥998</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>北京烤鸭</td>
        <td>隆江猪脚饭</td>
        <td>￥88</td>
      </tr>
    </table>

    <script>
      /*需求
    1.点击上方选择框 ： 修改下方选择框的checked值与上方选择框一致
    2.点击下方选择框： 判断上方选择框是否选中
        选中 ： 下方所有选择框都要选中
        不选：  下方选择框任何一个没有选中 

     */

      //1.获取元素
      let checkAll = document.querySelector('#checkAll')
      let checkList = document.querySelectorAll('.check')
      console.log(checkAll, checkList)

      //2.注册事件

      //2.1 点击上方选择框
      checkAll.onclick = function () {
        //this : checkAll选择框
        console.log(this.checked)
        //3.修改下方选择框的checked值与上方选择框一致
        for (let i = 0; i < checkList.length; i++) {
          checkList[i].checked = this.checked
        }
      }

      //2.2 点击下方选择框
      for (let i = 0; i < checkList.length; i++) {
        checkList[i].onclick = function () {
          //this : 当前点击的选择框
          // console.log( checkList[0].checked );
          // console.log( checkList[1].checked );
          // console.log( checkList[2].checked );
          //3.开关思想 检查选择框有没有选中

          /* 普通写法 */
          //3.1 提出假设
          let flag = true
          //3.2 验证假设
          for (let j = 0; j < checkList.length; j++) {
            if (!checkList[j].checked) {
              flag = false
              break
            }
          }
          //3.3 根据开关结果实现需求
          checkAll.checked = flag

          // if( flag ){
          //     checkAll.checked = true;
          // }else{
          //     checkAll.checked = false;
          // };

          /* 高端写法 */
          // for(let i = 0;i<checkList.length;i++){
          //无条件的把每一个下方选择框的checked值赋值给上方选择框
          //     checkAll.checked = checkList[i].checked;
          //     if(!checkAll.checked){//只要发现false，后面就没必要继续的，直接循环结束
          //         break;
          //     };
          // };
        }
      }
    </script>
  </body>
</html>

箩筐思想实现全选: 选中状态的选择框数量 == 所有选择框数量

//1.声明空箩筐（记录选中状态的数量）
let sum = 0;
//2.遍历萝卜堆数
for(let j = 0;j<checkList.length;j++){
    //3.如果选中，则放入箩筐
    if(checkList[j].checked == false){
        sum++
    };
};

//如果选中状态数量 == 所有选择框数量   说明全部选中
checkAll.checked = (sum == checkList.length);

04-核心案例(tab栏切换)

1.1-tab栏切换01

[效果预览] 在这里插入图片描述

需求：点击上面tab栏按钮：
- （1）按钮的颜色变成粉色
- （2）下方显示对应的大盒子内容
核心思路：
- （1）点击按钮时设置自身的类为current ，设置对应大盒子的display属性为block
  - 如何保证上面按钮与下方大盒子对应：给按钮添加index属性
- （2）使用排他思想去除其他按钮的类和其他大盒子的display属性为none

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>tab栏切换</title>
    <style>
      .Box {
        width: 240px;
        border: 1px solid #000;
        margin: 100px auto;
        padding: 20px;
      }

      .con {
        width: 100%;
        height: 200px;
        background-color: #cccccc;
        border: 1px solid #000;
        margin-top: 10px;
        display: none;
      }

      .current {
        background-color: pink;
        border: 2px black solid;
      }
    </style>
  </head>

  <body>
    <div class="Box" id="box">
      <button class="current">按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <button>按钮4</button>
      <div class="con" style="display:block">内容1</div>
      <div class="con">内容2</div>
      <div class="con">内容3</div>
      <div class="con">内容4</div>
    </div>

    <script>
        /* 需求
        点击上方四个按钮： 排他思想修改按钮样式 + 显示下方"对应"(下标一致)盒子
         */

      //1.获取元素
      let buttonList = document.querySelectorAll('#box>button')
      let divList = document.querySelectorAll('#box>.con')
      console.log(buttonList, divList)
      //2.遍历tab栏（上面四个按钮）
      for (let i = 0; i < buttonList.length; i++) {
        //2.1 注册点击事件
        buttonList[i].onclick = function () {
          //3.事件处理 this:当前点击的按钮
          //排他思想修改样式 + 显示对应盒子
          for (let j = 0; j < buttonList.length; j++) {
            if (i == j) {
              //当前下标
              buttonList[j].className = 'current'
              divList[j].style.display = 'block'
            } else {
              //其他下标
              buttonList[j].className = ''
              divList[j].style.display = 'none'
            }
          }
        }
      }
    </script>
  </body>
</html>

1.2-tab栏切换选项卡

[效果预览] 在这里插入图片描述

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      .wrapper {
        width: 1000px;
        height: 475px;
        margin: 0 auto;
        margin-top: 100px;
      }
      .tab {
        border: 1px solid #ddd;
        border-bottom: 0;
        height: 36px;
        width: 320px;
      }
      .tab li {
        position: relative;
        float: left;
        width: 80px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        cursor: pointer;
        border-top: 4px solid #fff;
      }
      .tab span {
        position: absolute;
        right: 0;
        top: 10px;
        background: #ddd;
        width: 1px;
        height: 14px;
        overflow: hidden;
      }
      .products {
        width: 1002px;
        border: 1px solid #ddd;
        height: 476px;
      }
      .products .main {
        float: left;
        display: none;
      }
      .products .main.selected {
        display: block;
      }
      .tab li.active {
        border-color: red;
        border-bottom: 0;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
      </ul>
      <div class="products">
        <div class="main selected">
          <a href="###"><img src="images/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>
        </div>
      </div>
    </div>
    <script>
        /*1.获取事件源
        2.添加事件
        3.事件处理
        */

      //1.获取元素
      let liList = document.querySelectorAll('.tab>li')
      let mainList = document.querySelectorAll('.products>.main')

      //2.添加事件

      //遍历liList
      for (let i = 0; i < liList.length; i++) {
        //注册事件
        liList[i].onclick = function () {
          //3.1 先移除之前选中的样式
          document.querySelector('.active').classList.remove('active')
          document.querySelector('.selected').classList.remove('selected')
          //3.2 给本次点击的元素添加样式
          liList[i].classList.add('active')
          mainList[i].classList.add('selected')
        }
      }
    </script>
  </body>
</html>

05-attribute语法学习

1.1-attribute操作自定义属性语法

<!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>
    <style>
      .one {
        height: 100px;
        border: 5px solid blue;
      }
    </style>
  </head>
  <body>
    <div
      id="box"
      aaa="啊啊啊"
      class="one"
      style="width: 100px;background-color: red"
    ></div>
    <script>
      /*知识点学习目标： attribute语法操作元素属性
            1.什么是自定义属性
                1.1 标准属性： W3C中的标准属性，浏览器可以识别
                1.2 自定义属性： 浏览器不能识别样式的属性，用户自定义添加（用于存储一些数据）

            2.attribute语法场景 ： 操作元素行内自定义属性
                获取属性： 元素.getAttribute('属性名')
                设置属性： 元素.setAttribute('属性名',属性值)
                移除属性： 元素.removeAttribute('属性名')
        
         */

      let one = document.querySelector('.one')
      //(1)获取元素属性
      console.log(one.getAttribute('aaa'))
      //(2)设置属性
      one.setAttribute('aaa', '坤哥') //如果存在则修改
      one.setAttribute('bbb', '班长') //如果不存在则动态
      //(3)移除属性
      one.removeAttribute('aaa')
    </script>
  </body>
</html>

1.2-案例：隔行变色高级版

需求： （1）单数行显示黄色双数行显示绿色 （2）鼠标移入哪一个就显示红色高亮，移开就恢复原状
思路分析：
- 1.先获取到界面所有的li标签
- 2.遍历数组，实现li标签的隔行变色
- 3.给每一个li标签注册鼠标移入和移出事件
- 4.移入则修改颜色为红色
  - 对象的赋值操作先回收旧值，再赋新值
- 5.移出则修改颜色为原先的颜色
  - 可以给对象动态添加一个属性用于存储原先的颜色

<!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>
  </head>
  <body>
    <ul>
      <li>我是班长1</li>
      <li>我是班长2</li>
      <li>我是班长3</li>
      <li>我是班长4</li>
      <li>我是班长5</li>
      <li>我是班长6</li>
      <li>我是班长7</li>
      <li>我是班长8</li>
      <li>我是班长9</li>
      <li>我是班长10</li>
    </ul>

    <script>
      /*需求 
        1.单数行显示黄色，双数行显示绿色
        2.鼠标移入每一个li元素 ： 自身变色变红
        3.鼠标移出每一个li元素 ： 自身变色恢复原先的颜色
         */

      //1.获取li元素
      let liList = document.querySelectorAll('li')
      console.log(liList)
      //2.循环遍历每一个li元素
      for (let i = 0; i < liList.length; i++) {
        console.log(liList[i])
        //2.1 修改默认颜色
        if (i % 2 == 0) {
          //单数行
          liList[i].style.backgroundColor = 'yellow'
        } else {
          liList[i].style.backgroundColor = 'green'
        }
        //2.2 注册鼠标移入事件
        liList[i].onmouseover = function () {
          //3.事件处理  this:当前移入的li元素
          /* 
                (1)发现问题 ： 对象的属性赋值会先销毁就如，存入新值。 一旦赋值red，以前的颜色就会被回收
                (2)解决问题： 背包思想 。  给每一个li元素添加一个自定义属性用于存储自己原先的颜色
                 */
          this.setAttribute('lv', this.style.backgroundColor)
          this.style.backgroundColor = 'red'
        }
        //2.3 注册鼠标移出事件
        liList[i].onmouseout = function () {
          //3.事件处理 this:当前移出的li元素
          this.style.backgroundColor = this.getAttribute('lv')
        }
      }
    </script>
  </body>
</html>

06-案例学习总结

1.巧用this关键字
- this关键字：谁触发了这个方法，this就代表谁
2.排他思想
- 循环遍历元素数组，只要不是自己就设置属性为默认值（排他）
3.开关思想
- 应用场景：某种操作的结果只有两种情况（声明布尔类型变量存储这两种情况true和false）
- 步骤
  - 1.提出假设（变量声明默认值）
  - 2.验证假设
  - 3.根据·开关结果实现需求