当前位置：网站首页>Web APIs environment object - dark horse programmer

Web APIs environment object - dark horse programmer

2022-06-30 00:04:00 【Dark horse programmer official】

Notes updated in the early stage ：Web API Basic cognition / obtain DOM Elements / Set up / modify DOM Element content and element attributes / Timer - Intermittent function / The basis of the event / Higher order function

One 、 Environment object

Environment objects refer to special objects inside functions Variable 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

<!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>
</head>

<body>
    <button> Click on </button>
    <script>
        //  Environment object  this  He is an object 
        function fn() {
            console.log(this)
        }
        // fn()
        window.fn()

        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            console.log(typeof this)
            //  because btn  Called this function , therefore  this  Point to btn
        })
    </script>
</body>

</html>

Two 、 Programming idea

Exclusive thoughts

The current element is A state , The other elements are B state

Use ：

1. Get rid of everyone

Use for loop

2. Resurrect himself

adopt this Or the subscript finds itself or the corresponding element

Exclusive thoughts ：

<!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')
                //  Get rid of everyone 
                for (let j = 0; j < btns.length; j++) {
                    btns[j].classList.remove('pink')
                }
                //  Resurrect myself 
                this.classList.add('pink')
            })
        }
    </script>
</body>

</html>

Exclusive thought upgrade ：

<!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 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 () {
                // this.classList.add('pink')
                // //  Get rid of everyone 
                // for (let j = 0; j < btns.length; j++) {
                //     btns[j].classList.remove('pink')
                // }
                //  I just need to find the one  pink class , Delete 
                document.querySelector('.pink').classList.remove('pink')
                //  my 
                this.classList.add('pink')
            })
        }
    </script>
</body>

</html>

Dark horse front-end column has a lot of dry goods , Focus on relearning , It's convenient ~

2022 Front end learning roadmap ： Course 、 Source code 、 note , Technology stack In addition, the circuit diagram is updated in real time ！ Friends who need after-school materials , You can tell me directly .