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

    一、环境对象

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

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

    • 函数的调用方式不同，this指代的对象也不同
    • [谁调用，this就是谁] 是判断this指向的粗略规则
    • 直接调用函数，其实相当于是window.函数，所以thi指代window
    2.     <button>点击button>
    3.     <script>
    4.         // 每个函数里面都有this 环境对象 普通函数里面this指向的是window
    5.         // function fn () {
    6.         //     console.log()
    7.         // }
    8.         // window.fn()
    9.         const btn = document.querySelector('button')
    10.         btn.addEventListener('click',function (){
    11.             // console.log(this) // btn 对象
    12.             // btn.style.color = 'red'
    13.             this.style.color = 'red'
    14.         })
    15.     script>

     二、回调函数

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

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

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

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

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

    常见的使用场景：

    1.     
    1.

    三、综合案例

    Tab栏切换

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

    分析：

    1. 主要核心是类的切换，设定一个当前类，可以让当前元素高亮
    2. 鼠标经过当前选项卡，先移除其余元素身上的当前类，而只给当前元素添加类
    3. 注意，当前类只能有一个
    1. DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>tab栏切换title>
    9.   <style>
    10.     * {
    11.       margin: 0;
    12.       padding: 0;
    13.     }
    14.  
    15.     .tab {
    16.       width: 590px;
    17.       height: 340px;
    18.       margin: 20px;
    19.       border: 1px solid #e4e4e4;
    20.     }
    21.  
    22.     .tab-nav {
    23.       width: 100%;
    24.       height: 60px;
    25.       line-height: 60px;
    26.       display: flex;
    27.       justify-content: space-between;
    28.     }
    29.  
    30.     .tab-nav h3 {
    31.       font-size: 24px;
    32.       font-weight: normal;
    33.       margin-left: 20px;
    34.     }
    35.  
    36.     .tab-nav ul {
    37.       list-style: none;
    38.       display: flex;
    39.       justify-content: flex-end;
    40.     }
    41.  
    42.     .tab-nav ul li {
    43.       margin: 0 20px;
    44.       font-size: 14px;
    45.     }
    46.  
    47.     .tab-nav ul li a {
    48.       text-decoration: none;
    49.       border-bottom: 2px solid transparent;
    50.       color: #333;
    51.     }
    52.  
    53.     .tab-nav ul li a.active {
    54.       border-color: #e1251b;
    55.       color: #e1251b;
    56.     }
    57.  
    58.     .tab-content {
    59.       padding: 0 16px;
    60.     }
    61.  
    62.     .tab-content .item {
    63.       display: none;
    64.     }
    65.  
    66.     .tab-content .item.active {
    67.       display: block;
    68.     }
    69.   style>
    70. head>
    71.  
    72. <body>
    73.   <div class="tab">
    74.     <div class="tab-nav">
    75.       <h3>每日特价h3>
    76.       <ul>
    77.         <li><a class="active" href="javascript:;">精选a>li>
    78.         <li><a href="javascript:;">美食a>li>
    79.         <li><a href="javascript:;">百货a>li>
    80.         <li><a href="javascript:;">个护a>li>
    81.         <li><a href="javascript:;">预告a>li>
    82.       ul>
    83.     div>
    84.     <div class="tab-content">
    85.       <div class="item active"><img src="./images/tab00.png" alt="" />div>
    86.       <div class="item"><img src="./images/tab01.png" alt="" />div>
    87.       <div class="item"><img src="./images/tab02.png" alt="" />div>
    88.       <div class="item"><img src="./images/tab03.png" alt="" />div>
    89.       <div class="item"><img src="./images/tab04.png" alt="" />div>
    90.     div>
    91.   div>
    92.   <script>
    93.     // 1. a模块制作，要给5个链接绑定鼠标经过事件
    94.     // 1.1 获取a元素
    95.     const as = document.querySelectorAll('.tab-nav a')
    96.     // console.log(as)
    97.     for(let i = 0; i < as.length; i++){
    98.       // console.log(as[i])
    99.       as[i].addEventListener('mouseenter', function(){
    100.         // console.log('鼠标经过')
    101.         // 排他思想
    102.         // 干掉别人 移除类active
    103.         document.querySelector('.tab-nav .active').classList.remove('active')
    104.         // 我登基 我添加类active  this 当前的那个a
    105.         this.classList.add('active')
    106.  
    107.         // 下面5个大盒子一一对应 .item
    108.         document.querySelector('.tab-content .active').classList.remove('active')
    109.         // 对应序号的那个item显示 添加active类
    110.         document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
    111.       })
    112.     }
    113.   script>
    114. body>
    115.  
    116. html>

    四、全选文本框案例1

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

    分析：

    1. 全选复选框点击，可以得到当前按钮的checked
    2. 把下面所有的小复选框状态checked，改为和全选复选框一致
    1. DOCTYPE html>
    2.  
    4.  
    6.   
    7.   
    8.   
    10.  
    12.   
    13.     
    14.       
    15.       
    16.       
    17.       
    18.     
    19.     
    20.       
    21.       
    22.       
    23.       
    24.     
    25.     
    26.       
    27.       
    28.       
    29.       
    30.     
    31.     
    32.       
    33.       
    34.       
    35.       
    36.     
    37.   
    38.          全选
    39.       
      		40. 商品商家价格
    40.         
    41.       
      		42. 小米手机小米￥1999
    42.         
    43.       
      		44. 小米净水器小米￥4999
    44.         
    45.       
      		46. 小米电视小米￥5999
    46.   
    48.

    五、全选文本框案例2

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

    分析：

    1. 遍历下面的所有的checkbox，添加点击事件
    2. 检查小复选框选中的个数，是不是等于小复选框总的个数
    3. 把结果给全选按钮
    4. 利用css复选框选择器 input:checked
    1. DOCTYPE html>
    2.  
    4.  
    6.   
    7.   
    8.   
    10.  
    12.   
    13.     
    14.       
    15.       
    16.       
    17.       
    18.     
    19.     
    20.       
    21.       
    22.       
    23.       
    24.     
    25.     
    26.       
    27.       
    28.       
    29.       
    30.     
    31.     
    32.       
    33.       
    34.       
    35.       
    36.     
    37.   
    38.          全选
    39.       
      		40. 商品商家价格
    40.         
    41.       
      		42. 小米手机小米￥1999
    42.         
    43.       
      		44. 小米净水器小米￥4999
    44.         
    45.       
      		46. 小米电视小米￥5999
    46.   
    48.

  • 相关阅读:
    C++从0吃透string类
    关于#matlab#的问题：地铁5G信号2.6G频段覆盖，人多时怎么设置微基站，基站部署位置如何，怎么根据地铁站的人流量确定小区怎么划分
    TDengine 入门教程⑦——数据库管理工具 | IDEA 连接 TDengine
    1033 旧键盘打字
    健身房预约小程序开发全攻略
    达梦8 内存泄漏泄漏原因分析之一
    vue echart详细使用说明
    个人用户免费，亚马逊正式推出 AI 编程服务 CodeWhisperer
    neon常用指令（updating）
    使用LDA（线性判别公式）进行iris鸢尾花的分类
  • 原文地址：https://blog.csdn.net/weixin_48719464/article/details/134041283