0210 高阶函数，环境对象，排他思想

与生俱来123

已于 2023-02-11 17:07:20 修改

阅读量82

点赞数

分类专栏：前端文章标签： javascript 开发语言 ecmascript Powered by 金山文档

于 2023-02-10 15:36:25 首次发布

本文链接：https://blog.csdn.net/qq_62919289/article/details/128969300

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

高阶函数

概念

函数的高级应用，把函数当值对待

值：JS中的数据如：数值，字符串，布尔，对象

例子

函数表达式

<script>
        let fn=function(){}
    </script>

回调函数

如果将函数A作为参数传递给函数B，称A为回调函数

    <script>
        function fn(){
            console.log('回调函数')
        }
        setInterval(fn,1000)
    </script>
//fn就是回调函数

环境对象/环境变量

概念

函数内部特殊的变量this，它代表当前函数运行时所处的环境

目标

清楚this的指向

环境对象this：就是个对象

谁调用，this就是谁

排他思想

当前元素为A状态，其他元素为B状态

使用：1使用for循环关闭其他元素，2通过this或者下标找到自己元素

写法1

    <style>
      .yellow {
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <button>111</button>
    <button>222</button>
    <button>333</button>
    <button>444</button>
    <button>555</button>
    <script>
      let btns = document.querySelectorAll("button")
      for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
            //for循环关闭所有
          for (let j = 0; j < btns.length; j++) {
            btns[j].classList.remove("yellow")
          }
          //this打开自己
          this.classList.add("yellow")
        })
      }
    </script>

写法2

    <style>
      .yellow {
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <button class="yellow">111</button>
    <button>222</button>
    <button>333</button>
    <button>444</button>
    <button>555</button>
    <script>
      let btns = document.querySelectorAll("button")
      for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
            //默认选中第一个
          document.querySelector(".yellow").classList.remove("yellow")
          //this打开自己
          this.classList.add("yellow")
        })
      }
    </script>
  </body>

TAB栏切换点击上面，下面跟到换

    <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.active {
        display: block;
      }

      .tab li.active {
        border-color: yellowgreen;
        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.获取元素
      let lis = document.querySelectorAll(".tab-item")
      let divs = document.querySelectorAll(".products .main")
      //1.tab切换
      //给4个小Li加事件
      for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener("click", function () {
          //找到以前的active，然后移除
          document.querySelector(".tab .active").classList.remove("active")
          //当前元素添加active
          this.classList.add("active")
          //2.底部显示隐藏模块,写在点击事件里面
          document.querySelector(".products .active").classList.remove("active")
          //divs对应序号i加上active
          divs[i].classList.add("active")
        })
      }
    </script>
  </body>