Anmeldung
Anmelden

Mindmap-Galerie HTML5-bezogene Wissenszusammenfassung, zusammenfassende Mindmap

HTML5-bezogene Wissenszusammenfassung, zusammenfassende Mindmap

Was ist HTML5? Wie man studiert? HTML5 ist eine Sprachbeschreibungsmethode zur Strukturierung von Webinhalten. HTML5 ist der Internetstandard der nächsten Generation und eine Sprachmethode zum Erstellen und Präsentieren von Internetinhalten. Sie gilt als eine der Kerntechnologien des Internets. HTML wurde 1990 erstellt und HTML4 wurde 1997 zum Internetstandard und wird häufig bei der Entwicklung von Internetanwendungen verwendet. Die folgende Karte fasst HTML5-bezogenes Wissen für Ihre Referenz und Ihr Studium zusammen.

Bearbeitet um 2018-12-19 12:05:18

Deu-Martina

Aktuelle Werke Weitere Werke anzeigen>>

HTML5-bezogene Wissenszusammenfassung, zusammenfassende Mindmap

Deu-Martina

Aktuelle Werke Weitere Werke anzeigen>>

Für Sie empfohlen
Gliederung

HTML-Basis-Tags
Deu-Martina
Die Grundstruktur von HTML
Deu-Martina
HTML5 CSS3 Webdesign und Produktion
Deu-Martina
HTML-Zusammenfassung
Deu-Martina
HTML-Elementar-Mindmap
Deu-Martina
HTML
Deu-Martina
Web-Mindmap
- 1
Deu-Martina

HTML5

<body>URL-Inhalt

Körpereigenschaften:

bgcolor: Hintergrundfarbe Hintergrund: Hintergrundbild Text: Schriftfarbe onload: Wird beim Laden aufgerufen

horizontale Linie

<hr>

Schriftartoperationen

Fettgedruckte Schriftart

<b>

Schriftart kursiv

<i>

Unterstreichen

<u>

durchgestrichen

<del>

Schriftart

<Schriftart>: Farbe: Schriftfarbe Größe: Schriftgröße 1~7

<mark>Hervorheben</mark>

Titel-Tag

<h1>~<h6> Machen Sie die Schrift fett, größer und in einer eigenen Zeile

Absatz-Tags

<p> Trennen Sie zwischen den Absätzen

Neue Zeile

<br>

Raum

Hyperlink

gewöhnlicher Link

<a href="address">Linkname</a>

Ankerlink

Definieren Sie zunächst das Standort-Tag: <a name="ding"></a> Verwenden Sie dann einen Hyperlink, um zu einer vordefinierten Position zu springen: <a href="#ding">Zurück zum Anfang</a>

funktioneller Zusammenhang

QQ-Popup-Fenster: Was als Remote-Chat-Schnittstelle von Tencent bezeichnet wird <a href="tencent://message/?uin=10001&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:10"/></a>

Bild-Tags

Liste

Bestellliste:

<ol type="value"> <li>Banane</li> <li>Kartoffel</li> <li>Yali</li> </ol>

Ungeordnete Liste:

<ul type="value"> <li>Peking</li> <li>Shanghai</li> <li>Guangzhou</li> </ul>

Schnelle Erstellung

ul>li*4 Tabulatortaste

Blatt

Tabelleneigenschaften

Rand: Tabellenrand, der Wert ist vom Typ int, je größer der Wert, desto dicker die Linie, 0 bedeutet keine bordercolor: Farbe des Tischgestells Zellabstand: der Abstand zwischen Zellen Breite: Breite der Tabelle, Pixel oder Prozentangaben Höhe: Höhe der Tabelle, Pixel oder Prozentsatz bgcolor: Hintergrundfarbe der Tabelle oder Zelle (gilt für Tabelle, tr, td) Hintergrund: Hintergrundbild

Schnelle Erstellung

Tabelle>tr*2>td*3

tr steht für Zeile td steht für Spalte

Zellen verbinden

colspan: horizontal mit parallel verschmelzen (horizontale/Links-Rechts-Richtung) rowspan: Zeilen zusammenführen (vertikale Richtung/Richtung nach oben und unten), vertikal zusammenführen Hinweis: Zusammenführen bedeutet, dass mehrere Elemente zu einem werden. Überzählige Elemente sollten daher gelöscht werden!

bilden

Formularattribute:

- Aktion: das Ziel der Formularübermittlung - Methode: Methode der Formularübermittlung, um Klartext (Standard)/Post-Chiffre-Text zu erhalten - enctype: Kodierungsmethode (es gibt spezielle Elemente im Formular: wird nur beim Hochladen von Bildern verwendet) onsubmit: Ereignisübermittlung

Eingang

<Eingabetyp="x" Name="y" Platzhalter="" deaktiviert="disabled"> Typ: Typ Name: Name des Eingabefelds Platzhalter; Eingabeaufforderungsfeld deaktiviert: deaktiviert

Der Wert des Typs: text: Texteingabefeld (Standardwert) Passwort: Passwort-Eingabefeld Kontrollkästchen: Kontrollkästchen/Mehrfachauswahlfeld <-aktiviert wählt das ausgewählte Element aus Radio: Optionsfeld Senden: Schaltfläche „Senden“ (Sie können den Standardnamen der Schaltfläche mit „Wert“ überschreiben) reset: Schaltfläche zum Zurücksetzen (Sie können den Wert verwenden, um den Standardnamen der Schaltfläche zu überschreiben) Taste: Taste -Im Formular: Entspricht der Schaltfläche „Senden“. - Außerhalb des Formulars: gewöhnlicher Button Farbe: Farbpalette Datum:Kalender Monat: Monatskalender Woche Wochenkalender Zahl: numerisches Feld -min Mindestwert -max Maximalwert -Schrittsprünge gemäß Vielfachen der Eingabe Bereich: Folie Suche Suchfeld

<wählen> <option>Dropdown-Menü</option> ... </select>

Scrollleiste

Lenovo-Eingabefeld

Seien Sie konsequent

Erweiterbarer Inhaltsbereich

rahmen

Verweise auf andere Seiten (mit Hyperlinks)

<a href="Seite oder Bild öffnen" target="xy">Kapitel 1</a> <br /><br /> <a href="Seite oder Bild öffnen" target="xy">Kapitel 2</a> <br /><br /> <a href="Seite oder Bild öffnen" target="xy">Kapitel 3</a> <br /><br /> <iframe name="xy" width="400px" height="300px"></iframe>

Ziel: Das Ziel beim Öffnen der Webseite ist die xy-Position

Medienetikett

<video>video

<Audio>Musik

Wiedergabesteuerung anzeigen

Kontrollen

Automatisches Abspielen

automatisches Abspielen

automatischer Zyklus

Schleife

Weg

src

Struktur-Tag div

Leiten Sie viele untergeordnete Div-Elemente basierend auf Div ab, und sie können als Divs verwendet werden Jedes untergeordnete Element hat einen eigenen Namen, um die „semantische“ Beschreibung des Div zu vervollständigen. Semantisierung: Ähnlich wie „Erkennen der Bedeutung durch Sehen des Namens“ in der Spezifikation der Benennung von Java-Variablen

Inhaltsbereich auf der Webseite

Artikel

Inhalt außerhalb des Artikels

Kombination aus Inhalt und Titel

<nav>

Navigation

Bilder und Texte

Kopfzeile der Webseite

<Fußzeile>

Seitenende

klarer Schwimmer: beide Seiten

Lösche beide;

<style>CSS-Stil

Verwenden Sie drei Methoden:

Inline-Stile

in das Eröffnungs-Tag geschrieben

innerer Stil

Geschrieben zwischen </head><body>

externes Stylesheet

Erstellen Sie eine CSS-Datei und schreiben Sie hinein

Definition:<link href="css/01.css" rel="stylesheet"/>

CSS-Priorität

Das Prinzip der Nähe

Wähler

Elementauswahl

Format:h2{}

Verwenden Sie den Tag-Namen als Ziel der Änderung

Klassenselektorklasse

Format: .Klassenname{}

Filtern Sie die Elementauswahl weiter

ID-Selektor-ID

Format: #id name{}

Wir gehen bei der Klassenauswahl noch einen Schritt weiter

Auswahlgruppe

Format:h1,h2,h3{}

abgeleiteter Selektor

Nachkommen-Selektor (alles auswählen)

Format:div p{}

Nachkommenselektor(Selektor)

Format:div>p{}

Pseudo-Klassenselektor

Nicht angeklickt

Format: a:link{}

Nach dem Klicken

Format:a:visited{}

schweben

Format: a:hover{}

Klicken und Halten

Format:a:aktiv{}

Die vier Pseudoklassen müssen in einer bestimmten Reihenfolge vorliegen, sonst sind sie ungültig

Hintergrund

Hintergrundfarbe

Hintergrundfarbe:rot;

Hintergrundbild

Hintergrundbild:url(img/1.jpg);

Hintergrundkacheln

Standardmäßig ist das Hintergrundbild auf der X- und Y-Achse „gekachelt“. Verwenden Sie „background-repeat“, um zu steuern, wie die Kachelung funktioniert:

wiederholen: Standardwert, Kacheln in x- und y-Richtung

wiederholen-x: Kacheln in x-Richtung

wiederholen-y: Kacheln in y-Richtung

no-repeat: keine Kacheln

Hintergrundschwenk

Hintergrundrolle

Hintergrundanhang: scrollen; Hintergrundscrollen (Standardwert)

Hintergrundanhang: behoben; Der Hintergrund bewegt sich nicht

Hintergrundgröße

enthalten: Auf die Größe des Hintergrundbereichs zoomen (das Hintergrundbild wird vollständig angezeigt) cover: Skalieren, um den Hintergrundbereich vollständig abzudecken (keinen Leerraum lassen)

Hintergrundposition

Hintergrund-Ursprung:

Grenzfeld;

padding-box: (Standard)

Inhaltsbox:

Hintergrundzuschnitt

Hintergrundclip:

Grenzfeld;

padding-box: (Standard)

Inhaltsbox:

Auf vier Seiten schneiden

rahmen

Vier Seiten, gleichzeitig eingestellt: border:3px solid red;

Behandlung von Textüberläufen

auto: Adaptiv, wenn der Grenzwert überschritten wird, werden Bildlaufleisten hinzugefügt, andernfalls werden keine Bildlaufleisten hinzugefügt.

versteckt: ausgeblendet, wenn überschritten

RGB-Farbe

http://tool.oschina.net/commons?type=3

Box-Modell

Marge Marge

oben drauf

Polsterung

links Links

Textstil

Schriftart

Schriftfamilie: „Microsoft Yahei“;

Schriftgröße

Schriftgröße:50px;

Schriftfarbe

Farbe:orangerot;

Textausrichtung (links, zentriert, rechts)

Textausrichtung: Mitte;

Fettgedruckte Schriftart

Schriftdicke: fett;

Mittellinie (Linie löschen)

Textdekoration: durchgestrichen;

Überstreichen

Textdekoration: Overline;

Hintergrundfarbe

Hintergrund: braun;

Höhe (Höhe des Hauses)

Höhe: 150px;

Zeilenhöhe des Textes (menschliche Körpergröße)

Zeilenhöhe:150px;

Vertiefung

Texteinzug: 30px;

Tischstil

Zellränder zusammenführen

border-collapse: Zusammenbruch;

Listenstil

entfernen

Listenstiltyp: keiner;

Nummer

Listenstiltyp: dezimal;

Kleinbuchstaben römisch

Listenstiltyp: niederromanisch;

Hauptstadt Roman

Listenstiltyp: Oberroman;

Dunkle Stellen

Listenstiltyp: Disc;

Block

Listenstiltyp: Quadrat;

Kreis

Listenstiltyp: Kreis;

Ersetzen Sie Listenelement-Tags durch Bilder

Listenstil-Bild: url(img/1.png);

Wechseln Sie über die Float-Positionierung in die Querformatausrichtung

Mausstil

Mauszeiger:

Standard: Zeiger

Zeigefinger

Fadenkreuz: Kreuz

Text: Fokus

warte warte

Positionierungsstil

Klassifizierung von Elementen

Alle Element-Tags haben ihre eigene Klassifizierung, Blockebene oder Zeilenebene

Elemente auf Blockebene:

h1~h6, p, div usw.

Von oben nach unten, vertikale Ausrichtung (Wortumbruch): Breite und Höhe können geändert werden

Inline-Elemente

a,b,span usw...

Von links nach rechts, horizontale Ausrichtung (kein Zeilenumbruch): Breite und Höhe können nicht geändert werden

Inline-Blockelemente:

Eingabe, Bild usw.

Von links nach rechts, horizontale Richtung (Wortumbruch): Breite und Höhe können geändert werden

Standard-Targeting

Anzeige von Elementen auf Blockebene

Bildschirmsperre;

Standardanzeige

Inline-Elementanzeige

Anzeige:inline;

Breite und Höhe können nicht geändert werden

Inline-Blockelementanzeige

display:inline-block;

Kann Breite und Höhe ändern

schwebende Positionierung

Ein schwebendes Element kann nach links oder rechts verschoben werden, bis seine Außenkante das übergeordnete Element berührt Pixel oder der Rand einer anderen schwebenden Box Schwebende Elemente befinden sich weiterhin innerhalb des übergeordneten Elements

nach links schweben

float:links

schweben rechts

relative Positionierung

Der Abstand zwischen diesem Element und benachbarten Elementen

Position: relativ

absolute Positionierung

Der Abstand zwischen diesem Element und dem Großvaterelement

Position: absolut

Feste Positionierung

Elementposition unverändert lassen

Position:fest;

Z-Achse (Overlay-Anzeige)

Je größer der Wert, desto näher am Gesicht (näher am Gesicht)

Z-Index: numerischer Wert

Versteckter Text

Anzeige:keine;

Versteckter Text

Funktion

Unterstreichung vom Hyperlink entfernen

Textdekoration: keine;

<style>css3-Stil

abgerundete Ecken

border-radius:50%;/*border abgerundete Ecken 50%*/(Kreis)

Randradius: px oben links, px oben rechts, px unten rechts, px unten links;

Randradius: oben links (oben rechts) px oben rechts (unten links) px;

Schatten

Box Schatten

Box-Shadow: horizontaler Versatz px vertikaler Versatz px Unschärfegröße px Schattengröße px Schattenfarbe;

Textschatten

Textschatten: Farbe des Schattens, horizontale Richtung px, vertikale Richtung px, Unschärfegröße px;

Gradient

linearer Farbverlauf

Hintergrund:linear-gradient([zur Richtung] Farbliste);

radialer Gradient

Hintergrund: radialer Farbverlauf (Farbliste);

Die Farbliste kann N Nummern haben

Animation

Übergangsanimation

Sie können nur den Anfang und das Ende kontrollieren, nicht aber den Prozess dazwischen.

Übergang: CSS-Attribut des Übergangs oder der Animationssimulation, Zeit, die zum Abschließen des Übergangs benötigt wird, Übergangsfunktion [Verzögerungszeit des Übergangsstarts];

Nicht alle Attribute unterstützen den Übergang, CSS3 entwickelt nur einige Attribute

Übergangsfunktion:

Leichtigkeit

Standard. Schnell bis langsam

linear

Gleichmäßige Geschwindigkeit

leichtgängig

beschleunigen

Entspannung

verlangsamen

Einfaches Ein- und Aussteigen

Beschleunigen Sie zuerst und bremsen Sie dann ab

Animation

Von einem Zustand zum anderen kann jeder Zeitpunkt im Prozess kontrolliert werden.

Animation definieren:

Name der @keyframes-Animation{ Beginnen Sie mit {Farbe, Form, Abstand...} bis{Farbe, Form, Abstand...} Ende }

Name der @keyframes-Animation{ 0%{Farbe, Form, Abstand...} ... 100 %{Farbe, Form, Abstand...} }

Animation binden

Elementselektor { Animation: Animationsname, Ausführungszeit s, Übergangsfunktion, Anzahl der Ausführungen [alternative Roundtrip-Ausführung]; }

unendlich

Drahtlose Ausführungszeiten

JS ist eine Webprogrammierungstechnologie, die zum Hinzufügen verwendet wird interaktives Verhalten

js ist eine interpretierte (Skript-)Sprache. Der Browser interpretiert und führt den Code ohne Vorverarbeitung aus. Kompilieren.

Verwenden Sie drei Möglichkeiten

Innerhalb der Branche

<input type="button" value="Brother click me" onclick="alert('嘤嘤嘤')";

onclick

Verbindliche Ereignisse

Alarm()

Pop-ups

intern

<Skript> alarm("helloworld!") </script>

extern

Erstellen Sie eine Datei mit dem Suffix „.js“

Definition:<script src="01.js"></script>

Priorität: Wer steht an der Spitze? Wer soll zuerst hingerichtet werden?

Variable

Da JavaScript eine schwach typisierte Sprache ist, werden beim Definieren von Variablen alle Datentypen mit var deklariert.

Numerischer Typ: Zahl

String: String verwendet doppelte oder einfache Anführungszeichen

Boolescher Typ: true=1 |. false=0 (im Betrieb in 1 und 0 umgewandelt)

automatische Typkonvertierung

Zahl string = string

Boolesche Zahl = Zahl

boolesche Zeichenfolge = Zeichenfolge

boolean boolean = Zahl

Konvertierungsfunktion

Konvertieren Sie einen beliebigen Typ in einen String

x.toSring();

Konvertieren Sie einen String in eine Ganzzahl

parseInt(x)

Konvertieren Sie eine Zeichenfolge in eine Dezimalzahl

parseFloat(x)

Fragen Sie den aktuellen Werttyp ab (beurteilen).

Typ(x)

Kann nicht konvertiert werden, gibt NaN zurück

Eingabeaufforderungs-Ausgabefeld

prompt()

Eingabeaufforderungsfeld

Alarm()

Pop-ups

console.info()

Konsolenausgabe

document.write()

Geben Sie den Inhalt der Seite aus

Operator/Flusskontrolle

Rechenoperationen

relationale Operationen

Streng gleich

===Gleicher Typ und gleicher Wert

nicht unbedingt gleich

!==

logische Operation

ternäre Arithmetik

Schleifenstruktur

Bedingtes Urteil

Gemeinsame Objekte

Zeichenfolge

Erstellen Sie ein String-Objekt

var str="helloworld";

var str=new String("helloworld");

Häufig verwendete Methoden:

ArrayArray

Egal welcher Datentyp, es ist ein Array

Drei Möglichkeiten, ein Array zu initialisieren

var arr1 = new Array(); arr1[0] = 10; arr1[1] = 20; arr1[2] = 30; console.info( arr1 );

var arr2 = new Array(10,'a',true); console.info( arr2 );

var arr3 = [5,'b',false]; console.info( arr3 );

Zweidimensionales Array

Die Elemente im Array sind ein Array.

Häufig verwendete Methoden für Arrays:

Numerische Mathematik

http://www.w3school.com.cn/jsref/jsref_obj_math.asp

Math.round(x)

Auf ganze Zahl runden

Math.floor(x)

Rundung

Math.random();

Gibt eine Zufallszahl zwischen 0 und 1 zurück.

max(x,y) gibt den höchsten Wert zwischen x und y zurück. min(x,y) gibt den niedrigsten Wert zwischen x und y zurück.

Zahlenkapselungsklasse

var-Daten = 23,56789; alarm(data.toFixed(2));//23.57

Konvertieren Sie einen numerischen Wert in eine Zeichenfolge und behalten Sie eine bestimmte Anzahl von Nachkommastellen bei

Datum datum

RegExpregulärer Ausdruck

Gängige Methoden

RegExp.test(string)

Gibt true zurück, wenn die Zeichenfolge string Text enthält, der mit RegExp übereinstimmt , andernfalls wird false zurückgegeben

null und undefiniert

nudefiniert

Es gibt einen Gegenstand, aber er ist wertlos

Null

Kein Ziel

Funktion (wie Java-Methode)

Funktionsdefinition

Definiert durch die Schlüsselwortfunktion

Die Definitionsregeln für Funktionsnamen stimmen mit Bezeichnern überein und berücksichtigen die Groß-/Kleinschreibung.

Sie können Variablen, Konstanten oder Ausdrücke als Argumente für Funktionsaufrufe verwenden

Der Rückgabewert muss return verwenden

Funktion Funktionsname (Parameter) { Funktionskörper; Rückgabewert zurückgeben; }

Funktion ohne Parameter

Funktion abc(){ for(var i = 1;i<=5;i){ console.info(i); } }

Funktion mit Parametern

Funktion he(a,b){ alarm(a b); }

Fügen Sie bei Funktionen mit Parametern beim Definieren keine Datentypen hinzu.

Funktion mit Rückgabewert

Argumente Parameterobjekt

Funktion he(a,b){ alarm(a b); console.info( arguments.length ); //Anzahl der Parameter console.info( arguments[0] ) ;//Der Wert von b }

arguments.length ermittelt die Anzahl der Parameterlisten arguments[subscript] ruft die Parameter an einer bestimmten Position ab

anonyme Funktion

Eine Funktion ohne Namen kann dieses Mal nur ausgeführt werden (ähnlich der anonymen inneren Klasse von Java).

globale Funktion

Sie sind alle vordefiniert und werden von js für uns vorbereitet. Verweisen Sie einfach direkt mit dem Methodennamen darauf.

gemeinsam

parseInt() |. parseFloat()

isNaN() ermittelt, ob es Zeichen enthält

eval(): wird zum Konvertieren von Operationen in Zeichenfolgen verwendet

encodeURI()

Codierung

decodeURI()

Dekodierung

DOM-Objekt

Elemente sind ein Mechanismus in JavaScript, der alle Elemente einer HTML-Seite in Objekte umwandelt. Dieser Mechanismus ist „DOM“ Jedes Dokument ist ein Dokumentobjekt.

So finden Sie Elementknoten:

Rufen Sie das eindeutige Objekt über den ID-Wert ab

document.getElementById(id-Wert)

Erhalten Sie mehrere übereinstimmende Objekte über den Namensattributwert

document.getElementsByName( Namenswert )

Erhalten Sie mehrere übereinstimmende Objekte über Tag-Namen

document.getElementsByTagName(Tag-Name)

Fall: Anmeldebestätigung

Fall: Interlaced-Farbwechsel

Fall: Alle Effekte auswählen

Knotenstil ändern:

Format: Element object.style.css attribute name="attribute value";

Zum Beispiel: node.style.color = "red"; node.style.fontSize = "10em"; Ändern Sie mehrere Stile gleichzeitig: className = "class name";

Fall: Klassenattribute

Hierarchischer Suchknoten

Da sich zwischen den zu analysierenden div- und p-Tags ein leerer Knoten befindet, wird #text angezeigt, der zum Textknoten gehört. Leerzeichen entfernen

Knotentyp:

Wählen Sie einen Elementvorgang aus

Tabelle Tabellenelementobjekt

Knoten erstellen

löschen und ersetzen

löschen

ersetzen

Stücklisten-Browserobjekt

Fensterfensterobjekt

Warnung (sofortige Nachricht)

Eingabeaufforderungsdialogfeld

bestätigen (prompte Nachricht)

Ob das Dialogfeld den booleschen Typ zurückgibt

prompt(Eingabeaufforderung,[Inhalt])

Eingabedialog

window.close()

Aktuelles Browserfenster schließen

window.open (Adresse der geöffneten Webseite, Fenstername, [Parameter])

Öffnen Sie ein neues Browserfenster

Parameter:

Fenster-Timer

setTnterval(1,2); 1: Wiederholte Aktionen (Funktionen) 2: Zeitintervall (Millisekunden)

periodischer Timer

clearInterval(Timer-Objekt)

Stoppen Sie geplante Aufgaben

setTimeout(1,2) 1. Auszuführende Funktion 2, Intervall (Millisekunden)

Einmaliger Timer, ähnlich dem Verzögerungseffekt

Bildschirmobjekt

Bildschirmbreite Bildschirmhöhe

Holen Sie sich die Bildschirmauflösung

historische Spurenobjekte

History.go(num)

Zurück zum vorherigen

Wenn num positiv ist, bedeutet dies, dass es vorwärts geht Wenn num negativ ist, bedeutet dies, dass zurückgegangen wird

History.back()

Zur vorherigen Seite zurückkehren

Standortobjekt

location.href=Das Ziel des Seitensprungs

Fallseitensprung

VeranstaltungEreignis

Mausereignisse

Mausklick-Ereignis

onclick

Maus-Doppelklick-Ereignis

ondblclick

Mouseover-Ereignis

onmouseover

Ereignis „Maus verlassen“.

onmouseout

Tastaturereignisse

Ereignis zum Drücken der Tastatur

onkeydown

Tastaturfreigabeereignis

onkeyup

Statusereignis

im Fokus

Konzentrieren Sie sich

onblur

den Fokus verlieren

bei Änderung

Wird bei Änderung ausgelöst

Fallbeispiel: Kaskadeneffekte auf Provinz- und Gemeindeebene

Der Standardmechanismus für Ereignisse

Die auslösende Abfolge der Ereignisse verläuft von innen nach außen, was den Blasenmechanismus darstellt.

Wenn zwei Schaltflächen zusammenfallen, werden standardmäßig beide Klicks ausgelöst.

Brechen Sie den Sprudelmechanismus ab:

event.stopPropagation();

Maus-Elektroschock-X- und Y-Koordinaten

event.chintX

event.chintY

event.target.nodeName

Ziel auftreten

Objektorientierte Grundlagen

Drei Möglichkeiten, Objekte zu erstellen

Objekt verwenden

Verwenden Sie den Konstruktor

Verwenden Sie Literale (JSNO-Objekte)

JSNO-Objekt

Erstellen Sie ein JSNO-Objekt

Erstellen Sie ein JSNO-Array

komplexes JSON-Objekt

JQuery-Framework

Einführung

1. Jquery wird von js entwickelt, daher ist JQuery selbst Javascript

jquery-3.3.1.js Entwicklungsumgebung jquery-3.3.1.min.js für die Produktionsumgebung

Einfacher Interlace-Farbwechsel

Leistungsstarker Selektor

Basisselektor

Tag-Selektor

$("p")

ID-Selektor

$("#er")

Klassenselektor

$(".si")

Selektor 1, Selektor 2. . .

$("#er,.si")

Ebenenauswahl

Nachkommenselektor

$("#d2 p")

p1 p2

Nachkommenselektor

$("#d2>p")

Nachbarbrüder

$("#d2 p")

nextp

alle Brüder dahinter

$("#d2~p")

Alle P's danach

Grundlegende Filterauswahl

erstes Element

$("p:first")

letztes Element

$("p:last")

Enthält keine Elemente in nicht (Filterung)

$("p:not(.si)")

Elemente mit ungeraden Indizes

$("p:odd")

Elemente mit geraden Indizes

$("p:gerade")

Elemente mit gleichen Indizes

$("p:eq(2)")

Element größer als Index

$("p:gt(2)")

Elemente kleiner als der Index

$("p:lt(2)")

Inhaltsfilterauswahl

Fuzzy-Abfrageinhalt Der Elementinhalt enthält alle p Elemente von is

$("p:enthält(ist)")

Wählen Sie Elemente mit leerem Inhalt aus

$(":empty")

Sichtbarkeitsauswahl

(Sekunden) Zeigt den verborgenen Text des p-Elements an

$("p:hidden").show(1000);

Formularauswahl

:input wählt alle Eingabefelder aus :text wählt alle Textfelder aus : Passwort wählt alle Passwortfelder aus : Radio wählt alle Optionsfelder aus : Kontrollkästchen Alle Kontrollkästchen auswählen :submit wählt alle Submit-Schaltflächen aus : Reset wählt alle Reset-Tasten aus : Schaltfläche wählt alle Schaltflächen aus : Datei wählt alle Dateifelder aus :hidden wählt alle ausgeblendeten Felder aus

Attributselektor

Attribute beginnen, xx zu enthalten

$("a[href^=xx]")

Das Ende des Attributs enthält xx

$("a[href$=xx]")

Das Attribut enthält xx

$("a[href*=xx]")

Formularfilter

Wählen Sie alle deaktivierten Elemente aus

:deaktiviert

Wählen Sie alle verfügbaren Elemente aus

:ermöglicht

Wählen Sie ausgewählte Elemente aus

:überprüft

Attributfunktion:

Erhalten

$("img").attr("title");

Rufen Sie den Titelattributwert von img ab

$("input").val();

Rufen Sie den Wert des Eingabefelds ab

$("div").text();

Holen Sie sich den Klartextinhalt innerhalb des div

$("div").html();

Holen Sie sich den gesamten Inhalt im div (HTML-Tag-Textwert)

aufstellen

$("img").attr("title","xxx");

Legen Sie den Titelattributwert von img fest

$("input").val("xxxx");

Legen Sie den Wert des Eingabefelds fest

$("div").text("xxxx");

Legen Sie den Klartextinhalt innerhalb des div fest

$("div").html("xxxx");

Legen Sie den gesamten Inhalt innerhalb des div (HTML-Tag-Textwert) fest.

Entfernen

$("img").removeAttr("title");

Entfernen Sie den Titelattributwert von img

Stilfunktion

$("p").addClass("class style");

Fügen Sie Klassenstile zu Elementen hinzu

$("p").removeClass("class style");

Klassenstil aus Element entfernen

$("p").toggleClass("class style");

Stil wechseln (ja->nein, nein->ja)

$("p").css("CSS-Attribut")

Rufen Sie den Wert des CSS-Attributs des p-Elements ab

$("p").css("property","value")

Legen Sie den Wert des CSS-Attributs des p-Elements fest

$("p").css({"width": "150px",...});

Legen Sie die Werte mehrerer CSS-Attribute des p-Elements (jsno) fest.

$("div").width()

Ermitteln Sie die Breite des Elements

$("div").height()

Ermitteln Sie die Höhe des Elements

$("div").width(value)

Legen Sie die Breite eines Elements fest

$("div").height(value)

Legen Sie die Höhe eines Elements fest

Der Unterschied zwischen h5 und h4

Dokumentationserklärung

Design der Zeichenkodierung

Groß- und Kleinschreibung wird nicht beachtet

boolesches Attribut

Zitate weggelassen

End-Tag weggelassen