当前位置：网站首页>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 .

原网站

版权声明
本文为[Dark horse programmer official]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/180/202206292349526498.html

边栏推荐

猜你喜欢

随机推荐