9.环境对象和回调函数

9.1环境对象

指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境
作用
弄清楚this的指向,可以让我们代码更简洁
➢函数的调用方式不同,this指代的对象也不同
➢[谁调用,this 就指代谁] 是判断this指向的粗略规则
➢直接调用函数(普通函数),其实相当于是window.函数,所以this指代window

【示例】

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

9.环境对象和回调函数_第1张图片

9.2回调函数

如果将函数A做为参数传递给函数B时,我们称函数A为回调函数
简单理解:当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数
●常见的使用场景:
9.环境对象和回调函数_第2张图片
9.环境对象和回调函数_第3张图片
使用匿名函数作为回调函数比较常见

9.3案例-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="imgs/tab00.png" alt="" />div>
      <div class="item"><img src="imgs/tab01.png" alt="" />div>
      <div class="item"><img src="imgs/tab02.png" alt="" />div>
      <div class="item"><img src="imgs/tab03.png" alt="" />div>
      <div class="item"><img src="imgs/tab04.png" alt="" />div>
    div>
  div>
  <script>
    // 1.获取所有的a
    const as = document.querySelectorAll('.tab-nav a')
    const divs = document.querySelectorAll('.tab-content div')
    for (let i = 0; i < as.length; i++) {
      as[i].addEventListener('mouseenter', function () {
        //排他思想
        //先去掉前一个active
        document.querySelector('.tab-nav .active').classList.remove('active')
        //再给当前添加active
        this.classList.add('active')
        //5个大盒子一一对应
        document.querySelector('.tab-content .active').classList.remove('active')
        divs[i].classList.add('active')
      })
    }
  script>
body>

html>

9.环境对象和回调函数_第4张图片

9.4 css伪类选择器checked

语法

input:checked {
     ……
}

作用:
选择被勾选的复选框

【示例】

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* 选择被勾选的复选框 */
        input:checked {
            width: 30px;
            height: 30px;
        }
    style>
head>

<body>
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
body>

html>
 

9.5全选文本框案例

需求:用户点击全选,则下面复选框全部选择,取消全选则全部取消
分析:
①全选复选框点击,可以得到当前按钮的checked
②把下面所有的小复选框状态checked,改为和全选复选框一致
③检查小复选框选中的个数是不是等于小复选框总的个数,把结果给全选按钮
④利用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>¥1999td>
    tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      td>
      <td>小米净水器td>
      <td>小米td>
      <td>¥4999td>
    tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      td>
      <td>小米电视td>
      <td>小米td>
      <td>¥5999td>
    tr>
  table>
  <script>
    // 1.获取大复选框
    const checkAll = document.querySelector('#checkAll')
    // 2.获取所有的小复选框
    const cks = document.querySelectorAll('.ck')
    // 3.点击大复选框 注册事件
    checkAll.addEventListener('click', function () {
      // console.log(checkAll.checked)  // 得到true或false
      // 4.遍历所有的小复选框 让小复选框的checked = 大复选框的checked
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = this.checked
      }
    })
    // 5.小复选框控制大复选框
    //给每个小复选框添加点击事件
    for (let i = 0; i < cks.length; i++) {
      cks[i].addEventListener('click', function () {
        // 判断选中的小复选框的个数 是否等于 总的小复选框的个数
        // console.log(document.querySelectorAll('.ck:checked').length)
        checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
      })
    }
  script>
body>

html>

9.环境对象和回调函数_第5张图片

你可能感兴趣的:(前端——JavaScript,javascript,前端,vue.js)