Web APls 阶段——第十节——高阶函数（环境对象）和编程思想——案例（百度变肤）（tab栏切换）（表格隔行换色）

最新推荐文章于 2024-09-25 14:00:00 发布

不能瞌睡呀

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量123

点赞数 1

文章标签： javascript web

本文链接：https://blog.csdn.net/qq_56897195/article/details/124233472

版权

文章目录

1. 高阶函数
- 1.1 函数表达式
- 1.2 回调函数
2. 环境对象
3.编程思想
- 3.1 排他思想
4. 百度换肤
5. 案例：tab栏切换
6. 表格隔行变色

1. 高阶函数

目标：掌握高阶函数用法，实现函数更多使用形式

高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高
级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

学习路径：

函数表达式
回调函数

1.1 函数表达式

函数表达式和普通函数并无本质上的区别：
在这里插入图片描述

普通函数的声明与调用无顺序限制，推荐做法先声明再调用
函数表达式必须要先声明再调用

1.2 回调函数

目标：能够说出什么是回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

常见的使用场景：

2. 环境对象

目标：能够分析判断函数运行在不同环境中 this 所指代的对象。

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。
作用：弄清楚this的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

3.编程思想

3.1 排他思想

当前元素为A状态,其他元素为B状态
在这里插入图片描述
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法∶

所有元素全部清除样式(干掉其他人)
给当前元素设置样式（留下我自己)
注意顺序不能颠倒，首先干掉其他人，再设置自己

<!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>
        .pink {
            background: pink;
        }
    </style>
</head>

<body>
    <button>第1个</button>
    <button>第2个</button>
    <button>第3个</button>
    <button>第4个</button>
    <button>第5个</button>
    <script>
        //获取所有的按钮元素
        let btns = document.querySelectorAll('button')
       btns得到的是伪数组,里面的每一个元素btns[i]

        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function ()                   {  
                // this.classList.add('pink')
                // 干掉所有人
                for (let j = 0; j < btns.length; j++) {
                    btns[j].classList.remove('pink')
                }
                // 复活我自己
                this.classList.add('pink')
            })
        }
    </script>
</body>

</html>

运行结果：
在这里插入图片描述

4. 百度换肤

案例分析

这个案例练习的是给一组元素注册事件
给4个小图片利用循环注册点击事件
当我们点击了这个图片，让我们页面背景改为当前的图片
核心算法︰把当前图片的src路径取过来，给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>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            background: url(./images/desktop_7.jpg) no-repeat center top;
        }

        li{
            list-style: none;
        }

        .baidu{
            overflow: hidden;

            margin: 100px auto;
            background-color: #fff;

            width: 410px;
            padding: 3px;
           
        }
        .baidu li{
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        .baidu img {
            width: 100px;
        }



    </style>
</head>
<body>
    <ul class="baidu">
        <li><img src="./images/desktop_1.jpg" alt=""></li>
        <li><img src="./images/desktop_2.jpg" alt=""></li>
        <li><img src="./images/desktop_3.jpg" alt=""></li>
        <li><img src="./images/desktop_4.jpg" alt=""></li>
    </ul>
    <script>
        //1.获取元素
        var imgs=document.querySelector('.baidu').querySelectorAll('img');
        //2.循环注册时间
        for(var i=0;i<imgs.length;i++){
            imgs[i].onclick=function(){
                //this.src 就是我们点击图片的路径
                //把这个路径this.src 给body 就可以了
                document.body.style.backgroundImage='url('+this.src+')';

            }
        }
    </script>
</body>
</html>

在这里插入图片描述

5. 案例：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: 400px;

    }

    .tab li {
      position: relative;
      float: left;
      width: 100px;
      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.active {
      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 active">
        <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
      </div>
    </div>
  </div>

  <script>
    // 0. 获取元素
    // 得到所有的小li  
    let lis = document.querySelectorAll('.tab .tab-item')
    let divs = document.querySelectorAll('.products .main')
    // 1. 头部tab栏切换模块
    // 1.1 先给4个小li添加点击事件
    for (let i = 0; i < lis.length; i++) {
      lis[i].addEventListener('click', function () {
        // console.log(11)
        // 找到以前的active 类，移除掉 
        document.querySelector('.tab .active').classList.remove('active')
        // 当前的元素添加
        this.classList.add('active')

        // 2. 底部显示隐藏模块  一定要写到点击事件的里面
        document.querySelector('.products .active').classList.remove('active')

        // div对应序号的那个加上active 
        divs[i].classList.add('active')
      })
    }


  </script>

</body>

</html>

6. 表格隔行变色

在这里插入图片描述

用到新的鼠标事件鼠标经过onmouseover ；鼠标离开onmouseout
核心思路∶鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
注意∶第一行( thead里面的行)不需要变换颜色，因此我们获取的是tbody里面的行

<!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>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>