当前位置：网站首页>Js5day (event monitoring, function assignment to variables, callback function, environment object this, select all, invert selection cases, tab column cases)

Js5day (event monitoring, function assignment to variables, callback function, environment object this, select all, invert selection cases, tab column cases)

2022-07-02 12:45:00 【By the Difeng River】

List of articles

Event monitoring

Three elements of event monitoring ：

Event source ( Who was triggered )
event ( How to trigger , Like a mouse click click、 Mouse over mouseover etc. )
Event handler （ What are you going to do ）

Insert picture description here

    <button> Click on me to pop up good things </button>
    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
    
            alert(' What do I do ')
        })
    </script>

Insert picture description here

Event listening version ：

Insert picture description here

Event type

Insert picture description here

Higher order function

Higher order functions can be simply understood as advanced applications of functions ,JavaScript The middle function can Be treated as 【 value 】 To treat , Realize the advanced application of function based on this feature .
【 value 】 Namely JavaScript Data in , Such as numerical value 、 character string 、 Boolean 、 Object etc. .

Function expression

Insert picture description here

The function is also 【 data 】
Assign a function to a variable

Callback function

Insert picture description here

Pass a function as an argument to another function , This function is called Callback function
Callback function is still a function in essence , Just use it as a parameter
It is common to use anonymous functions as callback functions

Environment object

The goal is ： Be able to analyze and judge whether the function runs in different environments this The object of reference
Environment object refers to Special variables inside the function this , It represents the environment in which the current function runs
** effect ：** To figure out what this The direction of , Can make our code more concise

Functions are called in different ways ,this The objects referred to are also different
【 Who is calling , this Who is the 】 Is a judgment this Rough rules for pointing to
Call function directly , In fact, it's equivalent to window. function , therefore this Refer to window

Exclusive thoughts

The current element is A state , The other elements are B state .
Use ：

Get rid of everyone
Use for loop
Resurrect himself
adopt this Or the subscript finds itself or the corresponding element

<!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> The first 1 individual </button><button> The first 2 individual </button><button> The first 3 individual </button><button> The first 4 individual </button><button> The first 5 individual </button>
    <script>
        let btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++) {
    
            btns[i].addEventListener('click', function () {
    
                // this.classList.add('pink') //this Points to the current calling function btns[i]
                //  Kill all the buttons 
                for (let j = 0; j < btns.length; j++) {
    
                    btns[j].classList.remove('pink')
                }
                // Resurrect myself 
                this.classList.add('pink')
            })
        } 
    </script>
</body>

</html>

improvement ：（ There must be a preset button here pink class , The first method does not need ）

<button class="pink"> The first 1 individual </button><button> The first 2 individual </button><button> The first 3 individual </button><button> The first 4 individual </button><button> The first 5 individual </button>
    <script>
        let btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++) {
    
            btns[i].addEventListener('click', function () {
    
                //  I just need to find the one  pink class , Delete 
                document.querySelector('.pink').classList.remove('pink')
                //  Change myself 
                this.classList.add('pink')
            })
        }
    </script>

tab Column application cases ：

<!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: 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: red;
      border-bottom: 0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <ul class="tab">
      <li class="tab-item active"> Big international card <span>◆</span></li>
      <li class="tab-item"> National makeup brand <span>◆</span></li>
      <li class="tab-item"> Cleaning products <span>◆</span></li>
      <li class="tab-item"> Men's Boutique </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.  Get elements 
    //  Get all the little li,div 
    let lis = document.querySelectorAll('ul.tab .tab-item')
    let divs = document.querySelectorAll('.products .main')
    // 1.  Head tab Column switching module 
    // 1.1  First give 4 Small li Add click event 
    for (let i = 0; i < lis.length; i++) {
    
      lis[i].addEventListener('click', function () {
    
        //tab Column transformation 
        li_active = document.querySelector('.tab li.active')
        li_active.classList.remove('active')//  Find the old active  class , Remove 
        this.classList.add('active')//  Add the current element 
        // 2.  Show hidden modules at the bottom   Be sure to write in the click event 
        div_active = document.querySelector('.products div.active')
        div_active.classList.remove('active')
        // div The one corresponding to the serial number plus active 
        divs[i].classList.add('active')   // Summary , Although it's all active, But the style is different . It is suggested to change it into two different names 
      })
    }
  </script>
</body>

</html>

Insert picture description here

Case study

Xiaomi search box case

Insert picture description here

<!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; box-sizing: border-box; } ul {
       list-style: none; } .mi {
       position: relative; width: 223px; margin: 100px auto; } .mi input {
       width: 223px; height: 48px; padding: 0 10px; font-size: 14px; line-height: 48px; border: 1px solid #e0e0e0; outline: none; transition: all .3s; } .mi .search {
       border: 1px solid #ff6700; } .result-list {
       display: none; position: absolute; left: 0; top: 48px; width: 223px; border: 1px solid #ff6700; border-top: 0; background: #fff; } .result-list a {
       display: block; padding: 6px 15px; font-size: 12px; color: #424242; text-decoration: none; } .result-list a:hover {
       background-color: #eee; } </style>

</head>

<body>
    <div class="mi">
        <input type="search" placeholder=" Millet notebook ">
        <ul class="result-list">
            <li><a href="#"> All goods </a></li>
            <li><a href="#"> millet 11</a></li>
            <li><a href="#"> millet 10S</a></li>
            <li><a href="#"> Millet notebook </a></li>
            <li><a href="#"> Mi phones </a></li>
            <li><a href="#"> Black Shark 4</a></li>
            <li><a href="#"> Air conditioner </a></li>
        </ul>
    </div>
    <script> // 1.  Get elements  input  let search = document.querySelector('input[type="search"]') // Outer single and inner double quotation marks  let list = document.querySelector('.result-list') // 2.  Event monitoring   Get cursor event  focus search.addEventListener('focus', function () {
       //  Display the drop-down menu  list.style.display = 'block' //  The text box changes color  this.classList.add('search') }) // 3.  Event monitoring   Cursor loss event  blur search.addEventListener('blur', function () {
       //  Hide the drop-down menu  list.style.display = 'none' //  Text box decolor  this.classList.remove('search') }) </script>
</body>

</html>

Select all and choose the opposite case

Insert picture description here

<!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 " Microsoft YaHei "; 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"> Future generations </span>
      </th>
      <th> goods </th>
      <th> merchants </th>
      <th> Price </th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td> Mi phones </td>
      <td> millet </td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td> Millet water purifier </td>
      <td> millet </td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td> Millet TV </td>
      <td> millet </td>
      <td>￥5999</td>
    </tr>
  </table>
  <script> let checkall = document.querySelector('#checkAll') let cks = document.querySelectorAll('.ck') let all = document.querySelector('.all') // Listen to select all checkbox  checkall.addEventListener('click', function () {
       console.log(checkall.checked) for (let i = 0; i < cks.length; i++) {
       cks[i].checked = checkall.checked // Don't equal true Want to follow checkall The state is consistent  } if (checkall.checked) {
       // It's fine too checkall.checked === true all.innerHTML = ' Cancel ' } else {
       all.innerHTML = ' Future generations ' } }) // Listen to select all checkbox  for (let i = 0; i < cks.length; i++) {
       cks[i].addEventListener('click', function () {
       //  Just click on any small button , You have to traverse all the small buttons   for (let j = 0; j < cks.length; j++) {
       if (!cks[j].checked) {
       checkall.checked = false all.innerHTML = ' Future generations ' return } } checkall.checked = true all.innerHTML = ' Cancel ' }) } </script>
</body>

</html>

Shopping cart addition and subtraction

Insert picture description here

<!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>
    div {
    
      width: 80px;
    }

    input[type=text] {
    
      width: 50px;
      height: 44px;
      outline: none;
      border: 1px solid #ccc;
      text-align: center;
      border-right: 0;
    }

    input[type=button] {
    
      height: 24px;
      width: 22px;
      cursor: pointer;
    }

    input {
    
      float: left;
      border: 1px solid #ccc;

    }
  </style>
</head>

<body>
  <div>
    <input type="text" id="total" value="1" readonly>
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="reduce" disabled>

  </div>
  <script>
    let total = document.querySelector('#total')
    let add = document.querySelector('#add')
    let reduce = document.querySelector('#reduce')
    add.addEventListener('click', function () {
    
      total.value++
      if (total.value > 1) {
    
        reduce.disabled = false
      }
    })
    console.log(typeof total.value)    //total.value It's a string type 
    reduce.addEventListener('click', function () {
    
      total.value--
      if (total.value == 1) {
        // Comparison operators also have implicit conversions （total.value Convert to string ）
        reduce.disabled = true
      }
    })


  </script>
</body>

</html>