Detailed explanation of this reference and custom properties in JavaScript

1. this keyword
2. Custom attributes
3. Comprehensive case 1: implementation of tab
appendix
Summarize

1. this keyword

this refers to the current element

This in the global function points to the window object

A global function is declared in the code, which belongs to the browser window object, so this represents the browser window object window

function fn() {
	consolo.log(this);
}
fn()

This in the tag event attribute points to the window object

If a global function is called in a tag attribute, as follows:

<button onclick="fn()">Click me to try</button>

function fn() {
	console.log(this)
}

This in the event attribute function points to the label of the current operation

If a function is declared on the attribute of the tag object, then the function belongs to the tag attribute, so this inside the function points to the current tag object

<button id="btn">Click me to try</button>

var btn = document.getElementById('btn');
btn.onclick = function() {
	console.log(this);
}

2. Custom attributes

In the development of front-end web pages, JavaScript syntax operations are mainly tag objects. In some specific situations, it is necessary to operate tags by setting custom attributes.
Basic syntax: element.attribute name = attribute value

var btn = document.getElementById('btn');
btn.index = 1;

3. Comprehensive case 1: implementation of tab

Implementation steps
1. Complete the design of the static page first (see the appendix for HTML and CSS codes)

2. Get the page elements first

 var uli = document.querySelector('ul').querySelectorAll('li');
 var oli = document.querySelector('ol').querySelectorAll('li');

3. Add click events to elements through for loop

for (var i = 0; i < uli.length; i++) {          
            uli[i].addEventListener('click', function () {   
               } )
        }

4. Add custom attributes to the elements and add index numbers to the corresponding tabs

  uli[i].index = i;

Add corresponding styles to click events (complete code)

for (var i = 0; i < uli.length; i++) {
            uli[i].index = i;
            uli[i].addEventListener('click', function () {
                for (var j = 0; j < uli.length; j++) {
                    uli[j].className = '';
                    oli[j].className = '';
                }
                this.className = 'current';
                oli[this.index].className = 'current';
            })
        }

Note: In this case, the corresponding tabs are displayed and hidden by adding class names. Before adding the corresponding class names to the elements, the class names of all elements need to be cleared.

appendix

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            height: 250px;
            width: 300px;
            border: 2px solid;
        }
        ul {
            display: flex;
            justify-content: space-between;
            background: red;
            border-bottom: 2px #ccc;
        }
        ul li {
            float: left;
            width: 100px;
            color: #fff;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        ul li.current {
            border-bottom: 5px green solid;
        }
        ol li {
            margin: 30px;
            display: none;
        }
        ol li.current {
            display: block;
        }
    </style>
    <div class="box">
        <ul>
            <li class="current">First page</li>
            <li>Page 2</li>
            <li>Page 3</li>
        </ul>
        <ol>
            <li class="current">I am the first page</li>
            <li>I am the second page</li>
            <li>I am the third page</li>
        </ol>
    </div>

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of JavaScript function this pointing problem
Detailed explanation of the this pointing problem of JavaScript prototype objects
Detailed explanation of this pointing in JS arrow function
The this keyword in JavaScript refers to

<<: How to open port 8080 on Alibaba Cloud ECS server

>>: Practical record of handling MySQL automatic shutdown problems