Zusammenfassung der grafischen JavaScript-Notizen mit 10.000 Wörtern

Variable

• Eine Variable ist nur definiert, aber kein Anfangswert zugewiesen.
• Wenn Sie eine Variable definieren, müssen Sie var schreiben (definieren Sie sie nicht mit var, sondern weisen Sie ihr den Wert direkt zu, was keinen Fehler verursacht). , führt aber zu Gültigkeitsproblemen.)

Verbesserung der Variablendeklaration

• Sie können eine später im Voraus deklarierte Variable verwenden, ohne eine Ausnahme auszulösen.
• Vor der Ausführung des gesamten Codes führt js eine Vorabanalysephase durch und liest die Definitionen aller Variablen vor.
• Hinweis: Die Variablendeklaration fördert nur die Definition, aber nicht den Wert

console.log (a); // Verwenden Sie zuerst die Variable var a = 12; // Definieren Sie

• dann

  • • den

    Basisdatentyp

Number

• • • groß oder klein, unabhängig von ganzzahlig oder gleitend und unabhängig von positiv oder negativ. Sie sind alle
    • größeren oder kleineren Zahlen des numerischen Typs (der absolute Wert ist kleiner). Es kann als wissenschaftliche 3e8 3^8 geschrieben
    • werden Der Binärwert beginnt mit 0b , der Oktalwert beginnt mit 0 und der Hexadezimalwert beginnt mit 0x .
    • NaN ist keine Zahl, also „keine Zahl“, sondern ein numerischer Wert (bei mathematischen Operationen, wenn das Ergebnis kann keine Zahl sein, das Ergebnis ist oft NaN, NaN == NaN, das Ergebnis ist falsch)
    • Unendlich Unendlich oder unendlich klein

  • String-

    • String gängige Methoden

    Methodenfunktion	charAt
    ()	ruft die angegebene Position ab. Zeichen (außerhalb der Grenzen) ist ein leerer String)
    Teilstring ()	extrahiert die Teilzeichenfolge.
    substr()	extrahiert die Zeichenfolge.
    Slice()	extrahiert die Teilzeichenfolge.
    toUpperCase()	ändert die Zeichenfolge in Großbuchstaben.
    toLowerCase()	ändert die Zeichenfolge in Kleinbuchstaben.
    indexOf()	ruft die Zeichenfolge ab (Mustervergleich)

    • . Teilzeichenfolge, die bei a beginnt und bei b endet, mit Ausnahme von b; wenn der zweite Parameter weggelassen wird, wird die zurückgegebene Teilzeichenfolge an das Ende der Zeichenfolge gesendet. Wenn a > b, wird sie automatisch an eine Dezimalzahl vor
    • substr(a)
    angepasst
    • ,
    • b), ein Teilstring der Länge b beginnt bei a; wenn der zweite Parameter weggelassen wird, wird der zurückgegebene Teilstring bis zum Ende des Strings gehen
    • Teilzeichenfolge, die bei a beginnt und bei b endet, außer b; beide Parameter müssen kleiner als b sein, andernfalls gibt es kein Ergebnis (leere Zeichenfolge)
  .

  • Boolean

  • Undefiniert

    • ist sowohl ein Wert als auch ein Typ nur einen eigenen Wert:

  • Null.

    • Wenn wir Objekte zerstören, Arrays zerstören oder Ereignis-Listener löschen müssen, setzen wir sie normalerweise auf Null.

• Komplexe Datentypen:

  • Object
  • Array
  • Function
  • RegExp
  • Date
  • Map
  • Set
  • ...

Der Typeof-Operator

kann sein Wird zum Erkennen von Werten oder Variablen verwendet.

// numbertypeof 'niubi'; // string

-Datentypkonvertierung

verwendet **Number ()**Function

// String --> Number Number('123'); // 123.4Number('123'); ('2e3'); // 2000Number(''); // 0Number('1 + 1'); // Boolescher Wert --> Number(true); // 0 // undefiniert und null - -> Number Number(undefiniert); // 0

**parseInt()**-Funktion wandelt einen String in eine Ganzzahl um

und schneidet automatisch alle Zeichen nach dem ersten nicht numerischen Wert ab Zeichen

parseInt('3.14'); // 3parseInt('3.14 ist pi'); // 3parseInt('Pi ist 3.14'); // 3

**parseFloat()** Funktion Konvertiert die Zeichenfolge automatisch in Gleitkommazahlen

und schneidet das erste nicht-numerische Zeichen und alle Zeichen nach dem Nicht-Dezimalpunkt ab

parseFloat('3.14'); // 3.14parseFloat('3.14 is pi'); // 3.14parseFloat('Pi ist 3,14'); // NaNparseFloat('3,99'); // 3,99// wird automatisch true und false in Strings umwandeln, und das Ergebnis ist

NaN

.

Zeichenfolge. Wissenschaftliche Notation und nichtdezimale Zahlen werden in Dezimalwerte umgewandelt

String(123); // '123'String(123.4); // '123.4'String(2e3); // 'NaN'String(Infinity); // 'Infinity'String(0xf); // 'true'String(false); // 'undefined'String(null); // 'null'

**Boolean()** function

// Numbers --> Boolesche Werte 0 und NaN werden in false konvertiert, andere werden in trueBoolean(123) konvertiert ; // trueBoolean(0); // falseBoolean(-Infinity); // trueBoolean(-Infinity); Werte werden in true umgewandelt; // falseBoolean('abc'); // trueBoolean('false'); // trueBoolean('false'); undefiniert); // falseBoolean(null) ; // false

Funktion

öffnet das Eingabefeld

var num = prompt('Bitte geben Sie die erste Zahl ein');

Implizite Typkonvertierung

des Operators

, wenn er an mathematischen Operationen beteiligt ist. Wenn ein Operand kein numerischer Typ ist, konvertiert JavaScript den Operanden automatisch in einen numerischen Typ.

Das Wesentliche der impliziten Konvertierung ist der interne Aufruf der Number()-Funktion

3 * '4' //. 12true + true // 2false + 2 // 23 * '2 Tage' // NaN

toFixed(a)-Methode behält eine Dezimalstelle

bei Math.pow(2, 3) // 2^3Math.sqrt(81) // 9Math. ceil() // Math.floor() aufrunden //

Vergleichsoperator

=== // Alle gleich!== // Nicht alle gleich // Zwei Gleichheitszeichen == Der Operator vergleicht den Typ des Werts nicht. Der Wert wird nach der impliziten Konvertierung verglichen. Ist er gleich? 1 == true // true1===true // false0 == false // true0 === false // false0 == undefiniert // false0 === undefiniert // falschundefiniert == null // wahrundefiniert == = null // falsch

**isNaN()**-Funktion bestimmt, ob der Variablenwert NaN ist,

aber isNaN() ist nicht einfach zu verwenden. Sein Mechanismus ist: solange Das Ausführungsergebnis der an Number() übergebenen Variablen ist NaN, dann erhält die Funktion isNaN() eine wahre

Kurzschlussauswertung:

a && ba ist wahr, der Wert ist b, a ist falsch, der Wert ist a,

a||ba ist wahr, der Wert ist a, a ist falsch, der Wert ist b

Priorität der logischen Operation : nicht -> und -> Oder

umfassende Operation Operationssequenz : nicht -> Mathematische Operation -> Relationale Operation ->

Ablauf

Steueranweisung

Zufallszahlenfunktion Math.random()

erhält eine Ganzzahl im Intervall [a, b], die Formel lautet parseInt(Math .random() * (b - a + 1)) + a;

array

var arr = [' A', 'B', 'C', 'D']; var arr = new Array('A', 'B', 'C', 'D');var arr = new Array(4); Mit der Länge 4 ist jedes Element undefiniert.

Wenn

auf

den Index außerhalb der Grenzen zugegriffen wird, wird undefiniert zurückgegeben

Diesmal liegt der Index außerhalb des zulässigen Bereichs, es wird kein Fehler gemeldet, aber das Array wird erweitert, Index 6 ist 4 und die Mitte ist leer.

Die Methode Array.isArray() kann verwendet werden, um

die Funktionsdefinition

-Funktionen

// reguläre Funktion fun() {
    //Funktionskörperanweisung}//Anonyme Funktion var fun = function () {
    // Funktionskörperanweisung}

Heraufstufung der Funktionsdeklaration

fun(); function fun() { // Wird in der Voranalysephase heraufgestuft alarm("Funktion wird ausgeführt");}// Wenn die Funktion mit einer Funktion definiert ist Ausdruck, es gibt keine Werbefunktion fun(); // ein Fehler wird ausgelöst var fun = function () {
    alarm("Funktion wird ausgeführt");}

Funktionsprioritätsförderung

// Funktionsprioritätsförderung // Förderung nach Funktionsausdruck; Variablendeklaration kann die geförderte Funktion nicht überschreiben fun( // Popup Bvar fun = function () {
    alarm('A');}function fun() {
    Alert('B');}fun(); // Popup A.

Die Anzahl der tatsächlichen Parameter ist unterschiedlich

1. . Es werden keine
2. formalen Parameter empfangen ist kleiner als die formalen Parameter. Der formale Parameterwert des Parameters ist undefined

Argumentarray -Objektfunktion

1. stellen die tatsächliche Parameterliste dar, die sie
2. empfängt Natürliche Zahlenfolgen beginnen bei 0 und haben ein Längenattribut und ein Array. Ebenso können Sie eckige Klammern verwenden, um auf einen bestimmten Attributwert eines Objekts zuzugreifen, aber Sie können die Methode des Arrays nicht

aufrufen

deklarierten

Variablen sind globale Variablen, und die ohne var deklarierten Variablen sind globale Variablen

in der Funktion. Mit var deklarierte Variablen sind lokale Variablen, und ohne var deklarierte Variablen sind globale

Variablen , und beide sind eines der Attribute des Fensterobjekts. Mit var deklarierte Variablen können nicht gelöscht werden, und ohne var deklarierte Variablen können gelöscht werden!

Rückgabewertfunktion

sum(a, b) {
    

b

;}var result = sum(3, 5); // Der Rückgabewert kann von einer Variablen empfangen werden.

Wenn die Funktion keinen Wert zurückgibt, ist das darauf gedruckte Ergebnis undefiniert

) stellen

in dieser Funktion die vorderen und hinteren Elemente im Array dar. Wenn sie ausgetauscht werden müssen, wird eine beliebige positive Zahl zurückgegeben; andernfalls wird eine negative Zahl zurückgegeben

. 55]; arr.sort(function ( a, b) {
    wenn (a > b) {
        Rückgabe 1;
    }
    return -1;});

Variablenzuweisung

,

d = [1, 2, 3, [4, 5]]; function deepClone( arr) {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            result.push(deepClone(arr[i]));
        } anders {
            result.push(arr[i]);
        }
    }
    return result;}

Eine innerhalb einer Funktion definierte lokale Funktion

fun() {

aufgerufen

werden

    Funktion inner() {
        console.log('Hallo');
    }
    inner(); // Aufruf der inneren Funktion} fun();

Funktionsverschachtelung

sucht die Variable Schicht für Schicht von innen nach außen

var a = 20; () {
    var c = 30;
    Funktion inner() {
        var a = 40;
        var d = 50;
        console.log(a, b, c, d); // Bei der Verwendung von Variablen beginnt js auf der aktuellen Ebene und sucht Schicht für Schicht nach Definitionen}
    inner();}fun();

Der Abschluss

ist eine Kombination aus der Funktion selbst und dem Umgebungsstatus, in dem die Funktion deklariert wurde.

Die Funktion kann sich an die Umgebung „merken“, in der sie definiert wurde, auch wenn die Funktion nicht vorhanden ist Beim Aufruf können Sie auch auf die Variablen der Umgebung zugreifen, in der sie definiert wurde.

In js wird bei jeder Erstellung einer Funktion ein Abschluss erstellt, die Funktion erfordert jedoch häufig einen Abschluss

„an einem anderen Ort“ ausgeführt werden, um

die Funktion des Abschlusses

beobachten zu können

:

1. Speicher: Wenn ein Abschluss generiert wird, wird der Zustand der Umgebung, in der sich die Funktion befindet, immer im Speicher gehalten und nicht automatisch gespeichert wird gelöscht, nachdem die äußere Funktion aufgerufen wurde.

   Funktion fun() {
       var name = 'niubi';
       Funktion innerFun() {
           Warnung(Name);
       }
       return innerFun;}var inn = fun();inn(); // Die interne Funktion wurde in die externe Ausführung verschoben,

2. um die private Variablenfunktion

   fun() {

   zu simulieren

       var a = 0;
       Rückgabefunktion() {
           Warnung(a);
       }}var getA = fun();getA();

function fun() {
    var a = 0;
    zurückkehren {
        getA: Funktion () {
            gib a zurück;
        },
        hinzufügen: Funktion () {
            a++;
        }, 
        pow: Funktion () {
            ein *= 2;
        }
    };}var obj = fun();console.log(obj.getA());obj.add();

Hinweis : Schließungen können nicht missbraucht werden, da es sonst zu Leistungsproblemen auf der Webseite kommt, in schwerwiegenden Fällen sogar zu Speicherverlusten führen.

Rufen Sie die Funktion sofort mit der

speziellen IIFE-Schreibmethode auf. Nach der Definition

muss die sofort aufgerufene Funktion in einen Funktionsausdruck umgewandelt werden, bevor sie aufgerufen werden kann

(function () { // Wandeln Sie die Funktion durch Klammern in einen Ausdruck um // Anweisungen})() ;+ Funktion() {
    alarm(1);}();-function() {
    Alert(1);}();

1. kann verwendet werden, um Variablen Werte zuzuweisen

   var age = 12; var sex = 'Male' (function () {
       wenn (Alter < 18) {
           „Kinder“ zurückgeben;
       } anders {
           if (sex == 'männlich') {
               return 'Herr';
           } anders {
               return 'Ms';
           }
       }})();

2. In manchen Situationen (z. B. in einer for-Schleife) werden globale Variablen in lokale Variablen umgewandelt und die Syntax ist kompakter

für (var i = 0; i < 5; i++) {
    arr.push(function () {
        alarm(i);     
    });}arr[2](); // Pop-up-5-

Lösung:

var arr = [];for (var i = 0; i < 5; i++) {
    (Funktion (i) {
        arr.push(function() {
            alarm(i);
        });
    })(i);}arr[2](); // Popup 2

DOM

nodeType gemeinsamer Attributwert

Knoten nodeType-Attribut kann den spezifischen Typ dieses Knotens anzeigen

Das Dokumentobjekt

greift hauptsächlich auf das Dokumentobjekt zu.

Das

Dokumentobjekt stellt auch das gesamte HTML-Dokument dar Knotenbaum.

Allgemeine Methoden

document.getElementById()

Wenn auf der Seite Elemente mit derselben ID vorhanden sind, können Sie nur das erste

<p id = "Feld

">Ich bin eine Box</p><p id = "para">Ich bin ein Absatz</p>

var box = document.getElementById('box'); var para = document.getElementById('para');

Das getElementsByTagName()

-Array eignet sich zum Durchlaufen, sodass Elementknoten stapelweise manipuliert werden können,

selbst wenn auf der Seite nur ein angegebener Tag-Name vorhanden ist. Knoten, Sie erhalten auch ein Array mit einer Länge von 1.

Jedes Knotenelement kann dies auch Rufen Sie die Methode getElementsByTagName() auf, um den darin enthaltenen Elementknoten einer bestimmten Klasse abzurufen.

<p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p><p>Paragraph</p>

var ps = document.getElementsByTagName('p');

getElementsByClassName()

<p class ="spec">Box</p><p class ="spec ">Box</p><p class = "spec">Box< /p><p class = "spec">Box</p>

var spec_ps = document.getElementsByClassName('spec');

querySelector()

diese Methode Sie können nur ein Element auf der Seite abrufen, wenn mehrere Elemente zusammentreffen Unter den Bedingungen können Sie nur das erste Element

<p id = "box1">

    <p>Absatz</p>
    <p class = "spec">Absatz</p>
    <p>Absatz</p>
    <p>Absatz</p></p>

var the_p = document.querySelector('#box1 .spec');

querySelectAll()

Array

der Länge 1, auch wenn es nur einen Knoten auf der Seite gibt, der mit übereinstimmt Verwenden

zum Ausführen

das Ereignis window.onload = function() {} (fügen Sie dem Fensterobjekt einen Ereignis-Listener hinzu, onload zeigt an, dass die Seite geladen wurde), sodass nach dem Laden der Seite der angegebene Code angezeigt wird

Die

​

​

Textknoten gehören ebenfalls zu Knoten, daher schließen wir im Allgemeinen Textknoteninterferenzen aus (nur Elementknoten verwenden),

um allgemeine Knotenbeziehungsfunktionen

<body>

    <p id = "box1">
        <p>Absatz</p>
        <p class = "spec">Absatz</p>
        <p>Absatz</p>
        <p>Absatz</p>
	</p>
    <Skript>
        var box = document.getElementById('box1');
        var spec = document.getElementsByClassName('spec');
        // Kapseln Sie eine Funktion, die alle untergeordneten Elementknoten des Elements zurückgibt, ähnlich der untergeordneten Funktion getChildren(node) {
            var Kinder = [];
            // Alle untergeordneten Knoten des Knotens durchlaufen und feststellen, ob das NodeType-Attribut jedes Bytes 1 ist
            // Wenn es 1 ist, schiebe das Ergebnisarray for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i] == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            Kinder zurückgeben;
        }
       
        // Kapseln Sie eine Funktion, die den Geschwisterknoten des vorherigen Elements des Elements zurückgeben kann, ähnlich der Funktion previousElementSibling getElementPrevSibling(node) {
            var o = Knoten;
            while (o. previousSibling != null) {
                if (o.prebiousSibling.nodeType == 1) {
                    // Beende die Schleife und finde return o. previousSibling;
                }
                o = o. previousSibling;
            }
            null zurückgeben;
        }
        
        // Kapseln Sie eine Funktion, die alle Element-Geschwisterknoten der Elementfunktion zurückgeben kann getAllElementSibling(node) {
            var prev = [];
            var next = [];
            var o = Knoten;
            while (o. previousSibling != null) {
                if (o. previousSibling.nodeType == 1) {
                    prevs.unshift(o. previousSibling);
                }
                o = o. previousSibling;
            }
            o = Knoten;
            while (o.nextSibling != null) {
                if (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }
            return prevs.concat(nexts);
        }
    </script></body>

Ändern Sie den Inhalt im Elementknoten.

Sie

• können den Inhalt im Elementknoten mithilfe

  von

• innerHTML

  festlegen der Knoten in Form von

Klartext
    <p id = "box"></p>
    <Skript>
        var oBox = document.getElementById('box');
        oBox.innerHTML = '<ul><li>Milk</li></ul>'; // Kann HTML-Syntax analysieren // oBox.innerText = 'niub'; // Kann nur be plain text</script></body>

Das Ändern des CSS-Stils eines Elementknotens

entspricht dem Festlegen des Inline-Stilattributs

oBox.style.backgroundColor = 'red'; // CSS-Attribute sollten in Kamel-Schreibweise geschrieben werden oBox.style .backgroundImage = ' url(images/1.jpg)';oBox.style.fontSize = '32px';

Ändern Sie die HTML-

Attribute von Elementknoten in Standard-W3C-Attribute wie src, href usw., klicken Sie einfach direkt darauf changes

oImg.src = ' images/2.jpg';

Für Attribute, die nicht den W3C-Standards entsprechen, verwenden Sie setAttribute() und getAttribute(), um

<body>

    <p id = "box"></p>
    <Skript>
        var box = document.getElementById('box');
        box.setAttribute('data-n', 10); // data-n-Attribut mit einem Wert von 10 hinzufügen
        var n = box.getAttribute('date-n');
        alarm(n);
    </script></body>

Die Methode document.createElement() zur

Knotenerstellung

. var op = document.createElement('p');

Der neu erstellte Knoten ist ein „verwaister Knoten“. und Es ist nicht im DOM-Baum gemountet und kann nicht gesehen werden. Sie

müssen weiterhin die Methode appendChild() oder insertBefore() verwenden, um den verwaisten Knoten in den DOM-Baum

einzufügen appendChild()-Methode, die den Waisenknoten darin mounten und zu seinem letzten untergeordneten Knoten werden kann,

übergeordneter Knoten.appendChild (Waisenknoten);

jeder Knoten, der sich bereits im DOM-Baum befindet, kann die Methode insertBefore() aufrufen, die den Waisenknoten mounten kann

übergeordneten

Knoten des Knotens vor seinem „Benchmark-Kindknoten“

. .insertBefore(Waisenknoten, Benchmark-Knoten)

; () Parameter, dieser Knoten wird in den neuen übergeordneten Knoten verschoben.appendChild

(Knoten, der bereits einen übergeordneten Knoten hat, Benchmark-Kindknoten); dass sich ein Knoten nicht gleichzeitig im DOM-Baum befinden kann. 
Knoten an zwei Orten löschen
 .

Knoten eines untergeordneten

aus dem DOM.removeChild

untergeordneten Knoten

cloneNode()

Die Methode kann den Knoten klonen.

Der Parameter ist ein boolescher Typ, der angibt, ob das tiefe Klonen verwendet werden soll. Bei „false“ wird nur der Knoten geklont selbst wird geklont.

• =

node = old Node.cloneNode(true)

;

sprudelt „onmouseenter“ nicht, „onmouseover“ sprudelt

• häufig, Ereignisname der Tastaturereignisüberwachung,

• Gemeinsames Formularereignis Listening-

• gemeinsame Seitenereignis-Listener

, wenn die Box ausgeführt wird. Reihenfolge der Ereignisüberwachung, wenn sie verschachtelt ist

<p id = "box1">
    <p id = "box2">
        <p id = "box3"></p>
    </p></p><script>
    var oBox1 = document.getElementById('box1');
    var oBox2 = document.getElementById('box2');
    var oBox3 = document.getElementById('box3');
    
    oBox1.onclick = function () {
        console.log('box1');
    };
    
    oBox2.onclick = function () {
        console.log('box2');
    };
    
    oBox3.onclick = function () {
        console.log('box3');
    };
    // Klicken Sie auf das innerste Feld. Die Ausbreitungsrichtung ist von innen nach außen.</script>

Ereignisausbreitung

Die Ausbreitung von Ereignissen erfolgt: zuerst von außen nach innen und dann von innen nach außen (die innerste Schicht wird nicht zuerst erfasst und dann gesprudelt, sondern anhand der Reihenfolge beim Schreiben des Codes bestimmt. Boxen mit demselben Namen beziehen sich auf dieselbe Stufe und Reihenfolge. Wenn zwei oder mehr Ereignisse mit demselben Namen vorhanden sind, überschreibt das später in der DOM0-Ebene geschriebene Ereignis das zuerst geschriebene und die DOM2-Ebene wird der Reihe nach ausgeführt.

onxxxx (Ereignisüberwachung auf DOM0-Ebene) kann nur die Blasenphase überwachen, daher sind die beobachteten Ergebnisse von innen nach außen

addEventListener()-Methode (Ereignisüberwachung auf DOM-Ebene 2)

oBox.addEventListener('click', function() {
 // Hier ist die Ereignisverarbeitungsfunktion}, true); // Wenn der dritte Parameter wahr ist, wird die Erfassungsphase überwacht. Wenn er falsch ist, wird

Ereignisverarbeitungsfunktion

des Ereignisobjekts

ein formaler Parameter, bei dem es sich um ein Objekt handelt, das die Details dieses Ereignisses kapselt.

Dieser Parameter wird normalerweise durch das Wort Ereignis oder den Buchstaben e dargestellt

oBox.onmousemove = function (e) {
 //Objekt e ist das „Ereignisobjekt“ dieses Ereignisses};

Objektbezogene

Attribute der Mausposition, wenn dieses Ereignis ausgelöst wird Attributattributbeschreibung

• clientX

• e .charCode- und e.keyCode-Attribute

Das e.charCode-Attribut wird normalerweise im onkeypress-Ereignis verwendet, um den „Zeichencode“ des vom Benutzer eingegebenen Zeichens darzustellen .

Zeichencode	Nummer
0 ~ Nummer 9	48 ~ 57
Großbuchstabe A ~ Z	65 ~ 90
Kleinbuchstabe a ~ z	97 ~ 122

Das e.keyCode-Attribut wird normalerweise in onkeydown- und onkeyup-Ereignissen verwendet, um den „Tastencode“ der gedrückten Taste darzustellen durch den Benutzer

40

Tastencode	Nummer
0 ~ Nummer 9	48 ~ 57
Buchstabenteil Groß- und Kleinschreibung a ~ z	65 ~ 90
Vier Richtungstasten ← ↑ → ↓	37, 38, 39,
Eingabetaste	13
Leertaste	32

Verhindern Sie das Standardereignis

e Die Methode .preventDefault() wird verwendet, um die vom Ereignis generierte „Standardaktion“ zu verhindern

Die Methode e.stopPropagation() wird verwendet, um zu verhindern, dass sich Ereignisse weiter ausbreiten

. Beim Hinzufügen von Ereignissen

• wird bei der Registrierung von Ereignissen eine bestimmte Menge verbraucht Das Hinzufügen von Ereignissen in Stapeln führt zu einem großen Speicherverbrauch.

Ereignisregistrierung

verbraucht eine bestimmte Menge an Systemspeicher Speicherverbrauch (wenn eine große Anzahl ähnlicher Elemente stapelweise hinzugefügt werden muss, kann die Ereignisdelegierung den Speicheraufwand reduzieren. Verwenden Sie

den Ereignis-Bubbling-Mechanismus, um Ereignisse von untergeordneten Elementen an zu delegieren. Hinweis für Vorfahrenelemente

: Sie können keine Nicht-Elemente delegieren.

)

Wenn dem Baum ein dynamischer Elementknoten hinzugefügt wird, kann die Ereignisdelegierung verwendet werden, um den neu hinzugefügten Elementen

ereignisbezogene

Attribute

Die Timer-

Funktion setInterval() kann eine Funktion wiederholt aufrufen, mit einem festen Intervall zwischen jedem Aufruf

setInterval(function () {
    // Diese Funktion wird automatisch in einem festen Intervall aufgerufen}, 2000); // Der zweite Parameter ist das Intervall in Millisekunden // Diese Funktion kann den 3., 4.... Parameter empfangen und sie werden der Reihe nach übergeben Geben Sie die Funktion setInterval(function (a, b) {
    // Der Wert des formalen Parameters a ist 88 und der Wert des formalen Parameters b ist 66}, 2000, 88, 66); // Beginnend mit dem dritten Parameter stellt er die an die Funktion übergebenen Parameter dar. // Benannte Funktionen können kann auch in setIntervalvar a = 0; function fun() { übergeben werden
    console.log(++a);};setInterval(fun, 1000);

Löschen Sie den Timer. Die

Funktion „clearInterval()“ kann einen Timer löschen.

// Setzen Sie den Timer und verwenden Sie die Timer-Variable, um den Timer zu empfangen. var timer = setInterval(function ( ) {
    }, 2000);//Wenn auf die Schaltfläche geklickt wird, löschen Sie den Timer oBtn.onclick = function () {
    clearInterval(timer); };

Die Funktion „delayer“

angegebene

Zeit abgelaufen ist, wird die Funktion nicht wiederholt ausgeführt.

    // Diese Funktion wird einmal nach 2 Sekunden ausgeführt}, 2000); // Den Verzögerer

asynchron

: Die Ausführung anderer Anweisungen wird nicht blockiert " wird ausgeführt. (Rückruf)

setInterval() und setTimeout() sind zwei asynchrone Anweisungen

setTimeout(function () {
    console.log('A');}, 2000); // Asynchrone Anweisung console.log('B'); // Asynchrone Anweisung blockiert nicht die normale Ausführung des Programms // Das Ausführen der Ergebnis-BA-

Funktion drosselt

die Ausführung von Eine Funktion ist schließlich erst dann zulässig, wenn der Ausführungszyklus länger ist als der festgelegte Ausführungszeitraum.

Funktion, die gedrosselt werden muss () {;
    // Wenn die Sperre geschlossen ist, wird if(!lock) nicht ausgeführt return;
    // Kernaussage der Funktion // Lock lock = false;
    
    //Öffnen Sie die Sperre nach der angegebenen Anzahl von Millisekunden setTimeout(function () {
        lock = true;
    }, 2000);}

BOM

BOM (Browser Object Model, Browser-Objektmodell) ist die Schnittstelle für JS zur Interaktion mit dem Browserfenster.

Fensterobjekt

ist das Fenster, in dem das aktuelle JS-Skript ausgeführt wird, und dieses Fenster enthält das DOM

1. Tab

-

Funktionalität verfügt jede Registerkarte über ein eigenes Fensterobjekt

1. var a = 10; console.log(window.a == a); // true

   Dies bedeutet, dass mehrere JS-Dateien den globalen Bereich teilen, d. h., JS-Dateien verfügen

2. im Allgemeinen über keine integrierte Funktion von Windows Methoden

   wie setInterval (), alarm () und andere integrierte Funktionen sind im Allgemeinen Fenstermethoden.

Eigenschaften im Zusammenhang mit der Fenstergröße

Um die Breite des Fensters ohne Bildlaufleisten zu erhalten, verwenden Sie document.documentElement.clientWidth

Größenänderungsereignis

im Fenster Nach der Größenänderung wird das Größenänderungsereignis ausgelöst. Sie können window.onresize oder window.addEventListener('resize') verwenden, um den Ereignishandler zu binden.

scroll height

stellt den Pixelwert dar

document.documentElement, das in vertikaler Richtung gescrollt wurde, stellt auch die Scrollhöhe des Fensters dar

.

Zur besseren Browserkompatibilität werden die beiden normalerweise zusammen geschrieben.

var scrollTop = window.scrollY ||

documentElement.scrollTop ist nicht schreibgeschützt und window .scrollY ist ein schreibgeschütztes

Scroll-Ereignis.

Nachdem das Fenster gescrollt wurde, wird das Scroll-Ereignis ausgelöst. Sie können window.onscroll oder window.addEventListener('scroll') verwenden Binden Sie das Navigator-Objekt der Event-Handler-Funktion

,

das die relevanten Attribute und Identifikationsattribute des Browsers des Benutzers für diese Aktivität enthält

Verlaufsobjektfenster

Das .history-Objekt bietet eine Schnittstelle zum Bedienen des Browser-Sitzungsverlaufs.

Eine übliche Operation besteht darin, die Zurück-Schaltfläche

des

history.go

(

)

;

= 'http: //www.baidu.com';

• window.location

  .

Parameter

,

• dass

  das

• Fenster

  .

diesem

Element

positionierten

Vorfahren

.

Eine Sammlung von "Schlüsselwertpaaren", die die Zuordnungsbeziehung zwischen Attributen und Werten darstellt

.
    Name: 'Xiao Ming',
    Alter: 12,
    Sex: 'männlich',
    

'

, 'Programming']

• }

• ;

• Der Attributname entspricht nicht der JS -Identifikator -Benennungskonvention. Sie müssen quadratische Klammern zum Zugriff

• verwenden

  .

      A: 1,
      B: 2,
      c: 3}; var key = 'b'; console.log (obj.key

)

;
    A: 10}; OBJ.B

=

40

;

    A: 1,
    

}

;

obj.a

;

    Name: 'Xiao Ming',
    Alter: 12,
    Sex: 'männlich',
    Hobbys: ["Fußball", "Schwimmen", "Programmierung"],
    'Lieblingsbuch': 'Shuke und Beta',
    Sayhello: function () {
        console.log ('Hallo');
    

}

}

;

​

    console.log ('Der Wert von' Attribut ' + k +' ist ' + obj [k]);}

Deep -Klon des Objekts

var obj1 = {
    A: 1, 
    B: 2, 
    C: [33, 44, {
        M: 55,
        N: 66,
        P: [77, 88]
    }]}; Funktion DeepClone (o) {
    if (array.isarray (o)) {
        var result = [];
        für (var i = 0; i <o.Length; i ++) {
            result.push (Deepclone (o [i]));
        }
    } else if (typeof o == 'Objekt') {
        var result = {};
        für (var k in o) {
            Ergebnis [k] = DeepClone (o [k]);
        }
    } anders {
        var result = o;
    }
    Rückgabeergebnis;}

kann

Kontextfunktion

der

Funktion

Die

Funktion

wird

)

;

​
    alert (this.c + this.m + this.e + b1 + b2);} sum.call (Xiaoming, 5, 3); 3];

1. (
2. Dies

3. )
   

   zeigt auf dieses Objekt

. / {} Dies zeigt auf dieses leere Objekt this.a = 3;
    this.b = 5; // {a: 3, b: 5}
    // Automatisch zurückgeben;} var obj = new Fun (); console.log (

obj

)

;

    this.name = Name;
    this.age = Alter;
    this.sex = sex;} var xiaoming = neue Leute ('小明', 12, 'männlich'); var xiaoming = neue Leute ('小红', 10, 'weiblich'); var xiaogang = neue Leute ('小红 'Gang', 13, "männlich

• "
• .
• Konstruieren Sie ein neues Objekt ", die Aussagen darin fügen dem neuen Objekt mehrere Eigenschaften und Methoden hinzu, vervollständigen Sie die Initialisierung des Objekts

und fügen die Methodenfunktion

Personen hinzu (Name, Alter, Sex) {
    this.name = Name;
    this.age = Alter;
    this.sex = sex;
    this.sayhello = function () {
        console.log ('I Am' + this.name);
    };} var xiaoming = neue Personen ('Xiaoming', 12, 'männlich'

)

; Standardmäßig zeigt das Konstruktorattribut zurück in die Funktion

Der Prototyp des Konstruktors ist der Prototyp der Instanz

Prototyp -Kettensuche

Eigenschaften

und Methoden seines Prototyps zugreifen.

    this.name = Name;
    this.age = Alter;
    this.sex = sex;} people.prototype.nationality = 'China'; (Xiaoming .Nationalität);

HasownProperty ()

,

ob das Objekt eine bestimmte Eigenschaft oder Methode besitzt.

(

'

'

);

/ true'age 'in xiaoming // true'sex' in xiaoming // true'nationality 'in Xiaoming // True

Add -Methoden für Prototypen

Nachteile des Hinzufügens direkt zu den Instanzen: Jede Instanz und die Methodefunktion jeder Instanz sind Speicherunterschied Funktionen in der Methode verursachen eine Speicherverschwendung, die durch das Schreiben der Methode auf den Prototyp gelöst werden kann.

Funktion people (Name, Alter, Geschlecht) {
    this.name = Name;
    this.age = Alter;
    this.sex = sex;} people.prototype.sayhello = function () {
    console.log ('I Am' + this.name);}; var xiaoming = new People ('xiaoming', 12, 'männlich'); Xiaoming.sayhello ()

;

Array -Prototyp -Kette

Die Vererbung

1. wird mit Hilfe der Prototypkette implementiert,

wodurch der Prototyp -Attribut des Schülers auf die Instanz der übergeordneten Klasse hinweist und dann die Schülermethode zum Prototyp des Schülers hinzugefügt wird.

• Das
• Problem

der Vererbung durch die Prototyp -Kette.

• Viele Attribute, die von der Superklasse definiert sind.

2. der Konstruktor

• der Unterklasse ist nicht elegant genug geschrieben

.

Normalerweise

verwendet

.
    this.name = Name;
    this.sex = sex;
    this.age = Alter;
    this.arr = [1, 2, 3];} Funktion Student (Name, Sex, Alter, Schule, SID) {
    People.call (this, Name, Sex, Alter);
    this.school = schule ';
    this.sid = sid;} var xiaoming = neuer Student ('Xiao Ming', 'männlich', 12, 'Schule', 123456

)

3. .

Vererbung .

​

​

Der Prototyp erbt

das Objekt.Create () -Methode, mit dem ein neues Objekt basierend auf dem angegebenen Objekt als Prototyp (IE9)

var obj2 = Object.create (OBJ1) erstellen kann; , {// Nein. Die beiden Parameter sind ein Objekt, und die zu hinzugefügten Attribute sind darin geschrieben. D: {// Der Wert des Attributs ist immer noch ein Objektwert: 99 // Der Wert ist 99
    } // Sie können Eigenschaften mit demselben Namen im Prototyp maskieren});

Wenn es nicht erforderlich ist, "viel Mühe zu verbringen", um einen Konstruktor zu erstellen, aber Sie möchten nur, dass das neue Objekt "ähnlich" wie das vorhanden Prototypaler Vererbungsobjekt.Create

() Die eindeutige Schreibmethode

implementiert Object.create () in Browsern der unteren Version

// Eine von Douglas Crockford geschriebene Funktion // Die Funktionsfunktion besteht darin, O als Prototyp zum Erstellen eines neuen Objektfunktionsobjekts (o ) {
    // Erstellen Sie eine temporäre Konstruktorfunktion f () {}
    // Lassen Sie den Prototyp dieses temporären Konstruktors auf o zeigen, damit das neue Objekt, das er erstellt, __Proto__ auf o verweist
    F.Prototyp = o;
    Neue f ();}

parasitärem Vererbung

, die "das Objekt verbessern" kann.

Objekt

neue Objekte zu.

    var p = Object.create (o);
    P. -Display = function () {
        console.log (111);
    }
    Rückgabe p;}

Nachteile:

Die

Effizienz wird aufgrund der Unfähigkeit zur Wiederverwendung von Funktionen reduziert (Methoden werden nicht auf den Prototyp geschrieben

)

. , SuperType) {
    var Prototype = Object.create (SuperType.Prototype);
    subtyp.Prototype = Prototyp;
}

// Elternklassenfunktion Personen (Name, Sex, Alter) {
    this.name = Name;
    this.sex = sex;
    this.age = Alter;
}

People.prototype.sayhello = function () {
    console.log ("Hallo");
}
People.prototype.sleep = function () {
    console.log ("schlaf");
}

// Unterklassefunktion Schüler (Name, Sex, Alter, Schule, SID) {
    People.call (this, Name, Sex, Alter);
    this.school = Schule;
    this.sid = sid;
}

InheritPrototype (Student, Personen);
    console.log ("prüfung");
};

var xiaoming = neuer Schüler ('xiao ming', 'männlich', 12, 'schule', 123456);

Der Instanzoperator

,

um festzustellen, ob ein Objekt eine Instanz einer bestimmten Klasse ist.

Es ist

ein integrierter Konstruktor

viele

integrierte Konstruktoren.

Alle Methoden dieses Typs sind in seinem integrierten Konstruktor auf dem Prototyp der Funktion definiert. Wir können diesem Objekt neue Methoden hinzufügen, um bestimmte Funktionen zu erweitern.

Die Beziehung zwischen integrierten Konstruktoren:

Objekt.Prototyp ist der Endpunkt der Prototyp-Kette aller Dinge.

Jede Funktion kann als Funktion "neu" angesehen werden.

Wrapper -Klasse

-Mathobjekt

-Mathematik zu erhalten. Pow ()

vom Prototyp ihres Konstruktors

Math.sqrt ()
Math.ceil () // runden Sie math.floor () // runden Sie math.round () // runden Sie math.max () // Maximaler Wert der Parameterliste math.min () zusammen auf.

// Berechnen Sie den Maximalwert des Array var arr = [3, 6, 9, 2];

math.max.apply

(

null, arr);

2020-12-01 ')

Common Method

Zeitstempel

.

TIMESTAMP

.

​

​

​(regulärer Ausdruck) beschreibt das "Konstruktionsmuster" häufig, um

zu

1. /内容/

{6} $/; if (regxp.text (str)) {
	alert ('entspricht Regeln');} else {
	alert ('erfüllt die Regeln nicht');}

2. Form von neuem Regexp ('Inhalt')

var regxp2 = new Regexp ('^\ d {6} $')

Metacharacter

Nummer

Bedeutung

gibt, können Sie ein vor ihm hinzufügen, um sicherzustellen, dass das Symbol selbst ausdrückt

. Quadratklammern

.

^ -

Quantifizierer

modifikatoren,

ebenfalls Flags genannt, werden verwendet, um

implementieren

.

-Zeichenfolge zurückgibt.

.
     
// Die such- () -Methode gibt, ähnlich wie indexof (), den ersten gefundenen Index zurück oder -1, wenn es nicht gefunden werden kann.
var result1 = str.Search (/ d+/g);
var result2 = str.Search (/m/g);
console.log (result1);
console.log (result2);

// Die match () -Methode gibt das gefundene Array zurück.
var result3 = str.match (/ d+/g);
console.log (result3); // ["123", "4567", "89"]

// ersetzen () Methode, var result4 = str.replace (/[az] +/g, '*'); ; //*123*4567*89

// split () Methode, teilen Sie die Zeichenfolge in ein Array var result5 = str.split (/ d+/g);
console.log (result5);