Hinweise zu JavaScript-Grundlagen
JavaScript
1. Die Beziehung zwischen JS und DOM
Der Browser hat die Funktion, HTML-Code zu rendern. Der HTML-Quellcode bildet ein DOM-Objekt im Speicher, das das Dokumentobjekt ist. Es gibt einen JS-Interpreter/eine JS-Ausführung / Innerhalb der Browser-Engine verwendet Chrome beispielsweise die v8-Engine
Wir schreiben einen JS-Code in HTML, der JS-Code wird von der Engine ausgeführt und das Ergebnis der Ausführung ist die Operation des DOM, bei der es sich um die von uns erstellten Spezialeffekte handelt B. schwebende Bilder und sich ändernde Textfarben.
Wenn der Browser darauf stößt, rendert er den HTML-Code und interpretiert und führt ihn aus, wenn er auf js trifft Am Ende der Seite wird im Allgemeinen js geschrieben, das heißt, die Seite wird zuerst gerendert und dann wird das DOM manipuliert -sensitive;
Variablenname: Zahlen, Buchstaben, Unterstriche können nicht als Anfang von Variablennamen verwendet werden (nicht empfohlen)
Die Nichtverwendung von var führt zu einer Verunreinigung globaler Variablen
Das Hinzufügen einer Variablen bedeutet, dass eine lokale Variable innerhalb der Funktion deklariert und ein Wert zugewiesen wird. Andernfalls wird nach der Variablen außerhalb gesucht.
Console.log(); document.write(string);
Alert(string);
3. Variablentyp
Drei Hauptkategorien (acht Datentypen)
- Traditioneller Typ
Zahl (numerischer Typ)
String (Zeichenfolgentyp)
Boolean (Boolescher Typ)
' ' s ‐ ‐ ‐ ‐ ‐ Zusammengesetzter Typ
verwenden verwenden verwenden verwenden aus verwenden durch durch aus aus aus ist ‐ ‐ ‐ ‐ ‐ zusammengesetzter Typ
bis }
Array (Array-Typ) Definitionstyp)
Wenn bei der Deklaration der Variablen kein Anfangswert zugewiesen wird, ist der Variablendatentyp undefiniert. Funktion
Ein Codesegment, das wiederholt ausgeführt werden kann.
1. Funktionsname
– Zahlen, Buchstaben, Unterstriche und Zahlen können nicht als Anfang von Funktionsnamen verwendet werden
- Der Funktionsname sollte so aussagekräftig wie möglich sein.
2. Parameter (optional), eine Funktion kann bis zu 255 Parameter haben .
4. Rückgabewert (optional)
Funktionsdeklaration
1. Funktionsfunktionsname ([Parameter...]){
Funktionskörper;
Rückgabewert;
}
2.var Funktionsname = neue Funktion (Parameter ... Funktionskörper);
3. Anonyme Funktion
var test = Funktion ([Parameter ...]) {
Funktionskörper; 1. Rufen Sie den Funktionsnamen direkt im Codesegment auf.
2. Rufen Sie die benutzerdefinierte Funktion in Form eines Hyperlinks auf. Zum Beispiel:
])'>Text</a>
3. Rufen Sie benutzerdefinierte Funktionen in Form von Ereignissen auf
Globaler Geltungsbereich und lokaler Geltungsbereich 1. Globaler Geltungsbereich
Außerhalb des Funktionskörpers Der Geltungsbereich der deklarierten Variablen ist der globale Geltungsbereich
2. Der lokale Geltungsbereich
Die im Funktionskörper deklarierten Variablen sind der lokale Geltungsbereich
. Operationen
werden nach den Operationsfunktionen unterteilt
- Arithmetische Berechnung + - * / % ++ - + (positiv) -(negativ)
-logische Operation (JS, logische Operation, der Wert, der zurückgibt Kann das Ergebnis des Ausdrucks frühestens beurteilen) && |. | !
.
aber Wenn wahr, exp2 ausführen, andernfalls exp3 ausführen. 分5. Verzweigungssatz
if
if ... else ...
if ... else if ....
switch ()
6 .
— not not not been“ — Der Schleifenkörper wird nicht ausgeführt, wenn die Schleifenbedingung nicht erfüllt ist. 7. In JavaScript integrierte Objekte Alles in js kann als Objekt verstanden werden aufgerufen wird, wird es in diesem Moment in ein Objekt verpackt 1. Objekt deklarieren var o = new Object(); var o = {}; var o = {name:'tom',age: 10} 2. Methoden für den Zugriff auf Mitglieder in Objekten Objektname. Mitglieder (Eigenschaften und Methoden) im Objekt - String-Objekt var s = new String(); var s = new String(" hello"); var s = "hello";Eigenschaften und Methoden Eigenschaft: length Ermittelt die Länge der Zeichenfolge Methode: Object.indexof (substring) Funktion: Bestimmen die Position, an der die Teilzeichenfolge zum ersten Mal im Objekt erscheint Großbuchstabe Object.toLowerCase(); Funktion: Konvertieren Sie das Objekt in Kleinbuchstaben Object.substr(start [,length]) Funktion: Abfangen der Länge von der Startposition Der optionale Parameter wird standardmäßig nicht bis zum Ende der Zeichenfolge abgefangen.
Object.slice(start[,end]) Funktion: Abfangen der Zeichenfolge ab der Startposition und Abfangen bis zur Endposition fängt standardmäßig nicht bis zum Ende der Zeichenfolge ab.
Object.replace(str1,str2)
- Array-Objekt
Deklaration:
var a = new Array();
var a = [];
var a = new Array('team',1) ;
var a = ['team',1...];
var a = new Array(7); //7 ist die Länge des Arrays
Ausgabe des Arrays:
document.write( Name des Arrays: Verbinden Sie zwei Arrays. Object.
Gibt zurück: das neu zusammengeführte Array. Die Reihenfolge der Elemente im neuen Array hängt von der Reihenfolge der beiden Arrays beim Zusammenführen ab Funktion: Das letzte Element im Array-Objekt einfügen.
Gibt zurück: das entfernte (gelöschte) Array-Element
Array-Objekt.push (Array-Element)
Funktion: Fügt Elemente am Ende des Arrays hinzu Rückgabe: Die Länge des Arrays, nachdem das Element hinzugefügt wurde.
Array Object.shift()
Funktion: Ein Element aus dem Kopf des Arrays entfernen.
Rückgabe: Das entfernte Array-Element.
Array object.unshift( Elementname)
Funktion: Fügen Sie ein Element zum Kopf des Arrays hinzu.
Rückgabe: Die Länge des Arrays, nachdem Elemente hinzugefügt wurden.
Array object.join(',')
Array object.split( ',') Array object.reverse()
Array object.sort()
- Datumsobjekt
var d = new Date()
Methode:
Object.getFullYear()
Funktion: Die vier abrufen -stelliges Jahr
Objekt. getMonth()
Funktion: Holen Sie sich den Monat, Monat (0~11)
Object.getDate()
Funktion: Holen Sie sich den Tag
Object.getHours()
Funktion : Stunden abrufen
Object.getMinutes()
Funktion: Minuten abrufen
Object.getSeconds()
Funktion: Sekundenwert abrufen
Funktion: Ermitteln Sie den aktuellen Wochenwert (0 Sonntag ~ 6 Samstag)
- Mathe-Objekt
Keine Instanziierung, äquivalent zum statischen Aufruf über den Klassennamen in PHP
Attribute:
PI-Wertzuweisung
Methode :
Math.ceil (Variable)
Funktion: Aufrunden
Math.floor (Variable)
Funktion: Abrunden
Math.round (Variable)
Funktion: Runden
Math.abs (Variable)
Funktion: Nimm den Absolutwert
Math.random()
Funktion: Gibt einen Pseudozufallswert zurück, der größer oder gleich 0 und kleiner als 1 [0,1) ist.
Math.max( Variable. .)
Funktion: Gibt die größere der Variablen zurück.
Math.min(Variable..)
Funktion: Gibt die kleinere der Variablen zurück.
8. Browserfensterobjekt
Hinweis: Das Fensterobjekt ist ein Browser-Hostobjekt und hat nichts mit der JS-Sprache zu tun
Die Methoden des Fensterobjekts:
window.alert(message);
window.confirm(message);
window.prompt();
window. open();
window.close();
window.print();
window.setInterval();
window.setTimeout();
window.clearInterval();
window .clearTimeout( ;
3.history History
4.screen screen object
5.document object (DOM object)
6. Storage object
Web Storage API. Bietet s sessionStorage ( Sitzungsspeicher) und localStorage (lokaler Speicher) zwei Speicherobjekte zum Hinzufügen, Löschen, Ändern und Abfragen der Daten auf der Webseite.
sessionStorage wird verwendet, um die Daten desselben Fensters (oder Tabs) vorübergehend zu speichern. Die Daten werden nach dem Schließen des Fensters oder Tabs gelöscht.
LocalStorage wird verwendet, um die Daten der gesamten Website für einen langen Zeitraum zu speichern. Die gespeicherten Daten haben keine Ablaufzeit, bis sie manuell entfernt werden.对 om 9.DOM Object Operation
DOM (DOCUME Object Model Document Object Model)
Document HTML/XML
XML
Extensionable Markup Language
.
Zurückgegeben: Ein aus Objekten bestehendes Array
- document.getElementsByName (Name-Attributwert des HTML-Tags)
Gibt zurück: Array von Objekten.
– document.getElementById (ID-Attributwert des HTML-Tags)
Gibt zurück: Objekt.
– document.getElementsByClassName (HTML-Tag-Klassenattribut value)
Gibt zurück: ein Array von Objekten.
Warum kann window.document das vorherige Fenster weglassen?
Antwort: Es ist immer noch ein Bereichsproblem, wenn Sie es nicht im Inneren finden können, suchen Sie es in der äußeren Ebene. Es gibt window.document global.
Knoten werden als Baumstruktur betrachtet Baumstruktur.
Hinweis: Ein Leerzeichen und ein Kommentar sind beide ein Knoten.
Knoten: Knotenname (nodeName), O Knotentyp (nodetype).
Einige Knoten haben einen Knotenwert
Unterknoten:
Knotenobjekt .Childnodes gab ein Array zurück (einschließlich leerem Knoten)
H-Knoten-Objekte.Kinder sind keine Standardattribute, aber gut kompatibel, ausgenommen leere Knoten
Knotenobjekt. Letzter untergeordneter Knoten:
Knotenobjekt. previousSibling
Vorheriger Geschwisterknoten 点
Knotenobjekt .nextSIBLING
Nächster Landsmann Knoten
document.createElement (HTML-TAG-Tags)
Funktion: Erstellen ein neues HTML-Objekt
Rückgabe: Objekt
Vater )
Funktion: Untergeordnetes Objekt zum übergeordneten Objekt hinzufügen
Übergeordnetes Objekt.removeChild (übergeordnetes Objekt.lastChild)
Funktion: Den letzten untergeordneten Knoten löschen des Objekts.
Operationsobjekt
Attribute
1. Lesen von Attributen
Objekt.Attributname
2. Ändern von Attributen
Objekt.Attributname = Attributwert
Text
1. Lesen
Object.innerText
Object.innerHTML // Alle HTML-Codes in Tags
2. Ändern
Object.innerText = Geänderter Text
Object.innerHTML = Geänderter Text
innerHTML analysiert HTML-Tags, innerText analysiert kein HTML Tags.
Stil
1 .Read (da auf das Stilattribut noch ein Objekt folgt, müssen Sie also . verwenden, um weiter darauf zuzugreifen, und Sie können nur den Wert des internen Stils lesen und den Wert nicht einlesen <style>)
Objektstil.
2. Ändern Sie
Object.style.Attribute name = Attributwert. Hinweis: Für die Hintergrundfarbe muss das „-“ entfernt und das erste großgeschrieben werden Buchstabe des nächsten Wortes, d. h. ein Attributname in Kleinbuchstabenform
3. Stile stapelweise ändern
Object.className = Klassenstilname
Rufen Sie das Stilobjekt zur Laufzeit ab:
Obj.currentStyle[attr] und getComputedStyle(obj, null)[attr] werden verwendet, um
Ersteres wird nur von IE und Opera unterstützt, und letzteres wird auch von Standardbrowsern mit IE9 und höher unterstützt. Der zweite Parameter ist ein Pseudoelement
10 .Events
1. Ereignisquelle
Alle HTML-Tags können als Ereignisquellen betrachtet werden
2. Ereignisse
Mausklick-Ereignis
dblclick-Doppelklick-Ereignis
Mouseover-Strich in
Durch aus mit der Maus. Y Taste nach oben Tastatur Tastatur hebt
Taste nach unten Tastatur Drücken Sie die Taste. Drücken Sie die Tastatur. Drücken Sie das Dokument. Dokument wird geladen.
3. Event-Handler
- <tag on event="event handler">
Der Event-Handler kann Javascript-Code oder ein automatischer Name der Funktion sein clearTimeout()-Methode Kann abbrechen die zeitgesteuerte Operation, die durch die Methode setTimeout() festgelegt wird.
Der Parameter der Methode clearTimeout() muss der von setTimeout() zurückgegebene ID-Wert sein.
Hinweis: Um die Methode „clearTimeout()“ zu verwenden, verwenden Sie beim Erstellen und Ausführen geplanter Vorgänge globale Variablen:
Ein Timer, der alle n Sekunden ausgeführt wird
Die Methode „setInterval()“ kann gemäß dem angegebenen Zeitraum (in) verwendet werden Millisekunden), um eine Funktion aufzurufen oder einen Ausdruck auszuwerten.
Die setInterval()-Methode ruft die Funktion so lange auf, bis clearInterval() aufgerufen oder das Fenster geschlossen wird. Der von setInterval() zurückgegebene ID-Wert kann als Argument für die Methode clearInterval() verwendet werden.
Tipp: 1000 Millisekunden = 1 Sekunde.
Tipp: Wenn Sie es nur einmal ausführen möchten, können Sie die Methode setTimeout() verwenden.
