Detaillierte Erklärung dieser Referenz und benutzerdefinierter Eigenschaften in JavaScript

Inhaltsverzeichnis

1. dieses Schlüsselwort
2. Benutzerdefinierte Attribute
3. Umfassender Fall 1: Implementierung der Registerkarte
Anhang
Zusammenfassen

1. dieses Schlüsselwort

Dies bezieht sich auf das aktuelle Element

Dies zeigt in der globalen Funktion auf das Fensterobjekt

Im Code wird eine globale Funktion deklariert, die zum Browserfensterobjekt gehört, diese stellt also das Browserfensterobjekt window dar

Funktion fn() {
	consolo.log(dies);
}
fn()

Dieses im Tag-Ereignisattribut verweist auf das Fensterobjekt

Wenn in einem Tag-Attribut eine globale Funktion aufgerufen wird, geht das wie folgt:

<button onclick="fn()">Klicken Sie hier, um es zu versuchen</button>

Funktion fn() {
	console.log(dies)
}

Dies zeigt in der Ereignisattributfunktion auf das Label der aktuellen Operation

Wenn eine Funktion auf dem Attribut des Tag-Objekts deklariert ist, dann gehört die Funktion zum Tag-Attribut, sodass dies innerhalb der Funktion auf das aktuelle Tag-Objekt verweist

<button id="btn">Klicken Sie hier, um es zu versuchen</button>

var btn = document.getElementById('btn');
btn.onclick = Funktion() {
	konsole.log(dies);
}

2. Benutzerdefinierte Attribute

Bei der Entwicklung von Front-End-Webseiten handelt es sich bei JavaScript-Syntaxoperationen hauptsächlich um Tag-Objekte. In bestimmten Situationen ist es erforderlich, Tags durch Festlegen benutzerdefinierter Attribute zu betreiben.
Grundlegende Syntax: Element.Attributname = Attributwert

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

3. Umfassender Fall 1: Implementierung der Registerkarte

Implementierungsschritte
1. Vervollständigen Sie zunächst das Design der statischen Seite (HTML- und CSS-Codes finden Sie im Anhang).

2. Holen Sie sich zuerst die Seitenelemente

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

3. Fügen Sie Elementen über eine For-Schleife Klickereignisse hinzu

für (var i = 0; i < uli.length; i++) {          
            uli[i].addEventListener('klicken', Funktion () {   
               } )
        }

4. Fügen Sie den Elementen benutzerdefinierte Attribute hinzu und fügen Sie den entsprechenden Registerkarten Indexnummern hinzu

  uli[i].index = i;

Fügen Sie den Klickereignissen entsprechende Stile hinzu (vollständiger Code)

für (var i = 0; i < uli.length; i++) {
            uli[i].index = i;
            uli[i].addEventListener('klicken', Funktion () {
                für (var j = 0; j < uli.length; j++) {
                    uli[j].className = '';
                    oli[j].className = '';
                }
                dieser.Klassenname = "aktuell";
                oli[this.index].className = "aktuell";
            })
        }

Hinweis: In diesem Fall werden die entsprechenden Registerkarten durch das Hinzufügen von Klassennamen angezeigt und ausgeblendet. Bevor den Elementen die entsprechenden Klassennamen hinzugefügt werden, müssen die Klassennamen aller Elemente gelöscht werden.

Anhang

<Stil>
        * {
            Rand: 0;
            Polsterung: 0;
            Listenstil: keiner;
        }
        .Kasten {
            Höhe: 250px;
            Breite: 300px;
            Rand: 2px durchgezogen;
        }
        ul {
            Anzeige: Flex;
            Inhalt ausrichten: Abstand dazwischen;
            Hintergrund: rot;
            Rahmen unten: 2px #ccc;
        }
        ul li {
            schweben: links;
            Breite: 100px;
            Farbe: #fff;
            Cursor: Zeiger;
            Höhe: 40px;
            Zeilenhöhe: 40px;
            Textausrichtung: zentriert;
        }
        ul li.aktuell {
            Rahmen unten: 5px grün durchgehend;
        }
        ol li {
            Rand: 30px;
            Anzeige: keine;
        }
        ol li.aktuell {
            Anzeige: Block;
        }
    </Stil>
    <div Klasse="Box">
        <ul>
            <li class="current">Erste Seite</li>
            <li>Seite 2</li>
            <li>Seite 3</li>
        </ul>
        <ol>
            <li class="current">Ich bin die erste Seite</li>
            <li>Ich bin die zweite Seite</li>
            <li>Ich bin die dritte Seite</li>
        </ol>
    </div>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:

Detaillierte Erklärung der JavaScript-Funktion dieses Zeigeproblems
Detaillierte Erklärung des this-Pointing-Problems von JavaScript-Prototypobjekten
Detaillierte Erklärung dieser Zeigerfunktion in JS
Das Schlüsselwort this in JavaScript bezieht sich auf

<<: So öffnen Sie Port 8080 auf dem Alibaba Cloud ECS-Server

>>: Praktische Aufzeichnung der Handhabung von MySQL-Problemen beim automatischen Herunterfahren