Web APIs——环境对象this以及回调函数

最新推荐文章于 2024-07-25 09:24:40 发布

再快一步`

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量251

点赞数

分类专栏： JavaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_48719464/article/details/134041283

版权

JavaScript 专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一、环境对象

环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

作用：弄清楚this的指向，可以使代码更简洁

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

<body>
    <button>点击</button>
    <script>
        // 每个函数里面都有this 环境对象 普通函数里面this指向的是window
        // function fn () {
        //     console.log()
        // }
        // window.fn()
        const btn = document.querySelector('button')
        btn.addEventListener('click',function (){
            // console.log(this) // btn 对象
            // btn.style.color = 'red'
            this.style.color = 'red'
        })
    </script>
</body>

二、回调函数

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

当一个函数当做参数来传递另外一个函数的时候，这个函数就是回调函数

把函数当做另外一个函数的参数传递，这个函数就叫回调函数

回调函数本质函数函数，只不过把它当成参数使用

使用匿名函数做为回调函数比较常见

常见的使用场景：

    <script>
        function fn(){
            console.log('我是回调函数...')
        }
        // fn传递给了setInterval，fn就是回调函数
        setInterval(fn,1000)
    </script>

    <script>
        box.addEventListener('click', function () {
            console.log('我也是回调函数')
        })
    </script>

三、综合案例

Tab栏切换

需求：鼠标经过不同的选项卡，底部可以显示不同的内容

分析：

主要核心是类的切换，设定一个当前类，可以让当前元素高亮
鼠标经过当前选项卡，先移除其余元素身上的当前类，而只给当前元素添加类
注意，当前类只能有一个

<!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>tab栏切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tab {
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }

    .tab-nav {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }

    .tab-nav h3 {
      font-size: 24px;
      font-weight: normal;
      margin-left: 20px;
    }

    .tab-nav ul {
      list-style: none;
      display: flex;
      justify-content: flex-end;
    }

    .tab-nav ul li {
      margin: 0 20px;
      font-size: 14px;
    }

    .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }

    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }

    .tab-content {
      padding: 0 16px;
    }

    .tab-content .item {
      display: none;
    }

    .tab-content .item.active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;">精选</a></li>
        <li><a href="javascript:;">美食</a></li>
        <li><a href="javascript:;">百货</a></li>
        <li><a href="javascript:;">个护</a></li>
        <li><a href="javascript:;">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
      <div class="item"><img src="./images/tab01.png" alt="" /></div>
      <div class="item"><img src="./images/tab02.png" alt="" /></div>
      <div class="item"><img src="./images/tab03.png" alt="" /></div>
      <div class="item"><img src="./images/tab04.png" alt="" /></div>
    </div>
  </div>
  <script>
    // 1. a模块制作，要给5个链接绑定鼠标经过事件
    // 1.1 获取a元素
    const as = document.querySelectorAll('.tab-nav a')
    // console.log(as)
    for(let i = 0; i < as.length; i++){
      // console.log(as[i])
      as[i].addEventListener('mouseenter', function(){
        // console.log('鼠标经过')
        // 排他思想
        // 干掉别人 移除类active
        document.querySelector('.tab-nav .active').classList.remove('active')
        // 我登基 我添加类active  this 当前的那个a
        this.classList.add('active')

        // 下面5个大盒子一一对应 .item
        document.querySelector('.tab-content .active').classList.remove('active')
        // 对应序号的那个item显示 添加active类
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
      })
    }
  </script>
</body>

</html>

四、全选文本框案例1

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消

分析：

全选复选框点击，可以得到当前按钮的checked
把下面所有的小复选框状态checked，改为和全选复选框一致

<!DOCTYPE html>

<html>

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

    table {
      border-collapse: collapse;
      border-spacing: 0;
      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;
    }

    .allCheck {
      width: 80px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    // 1. 获取大复选框
    const checkAll= document.querySelector('#checkAll')
    // 2. 获取所有的小复选框
    const cks = document.querySelectorAll('.ck')
    // 3. 点击大复选框 注册事件
    checkAll.addEventListener('click',function () {
      // 得到当前大复选框的选中状态
      // console.log(this.checked) // 得到 是true 或是是false
      // 4. 遍历所有的小复选框 让小复选框的checked = 大复选框的checked
      for(let i = 0; i < cks.length; i++){
        // cks[i].checked = checkAll.checked
        cks[i].checked = this.checked
      }
    })
  </script>
</body>

</html>

五、全选文本框案例2

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消，文字对应变化

分析：

遍历下面的所有的checkbox，添加点击事件
检查小复选框选中的个数，是不是等于小复选框总的个数
把结果给全选按钮
利用css复选框选择器 input:checked

<!DOCTYPE html>

<html>

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

    table {
      border-collapse: collapse;
      border-spacing: 0;
      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;
    }

    .allCheck {
      width: 80px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    // 1. 获取大复选框
    const checkAll= document.querySelector('#checkAll')
    // 2. 获取所有的小复选框
    const cks = document.querySelectorAll('.ck')
    // 3. 点击大复选框 注册事件
    checkAll.addEventListener('click',function () {
      // 得到当前大复选框的选中状态
      // console.log(this.checked) // 得到 是true 或是是false
      // 4. 遍历所有的小复选框 让小复选框的checked = 大复选框的checked
      for(let i = 0; i < cks.length; i++){
        // cks[i].checked = checkAll.checked
        cks[i].checked = this.checked
      }
    })
    // 5. 小复选框控制大复选框
   
    for(let i = 0; i < cks.length; i++){
       // 5.1 给所有的小复选框添加点击事件
       cks[i].addEventListener('click',function () {
        // 判断选中的小复选框个数 是不是等于 总的小复选框个数
        // 一定要写到点击里面，因为每次要获得最新的个数
        // console.log(document.querySelectorAll('.ck:checked').length)
        // console.log(document.querySelectorAll('.ck:checked').length === cks.length)
        checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length  
       })
    }
  </script>
</body>

</html>