Javaweb Learning Notes Targeting (Must Read)

Autor：Eve Cole Aktualisierungszeit：2025-04-09 04:32:01

Benutzerdefinierte Liste

<dl> </dl>: repräsentiert den Bereich der Liste

** Inside <dt> </dt>: Oberer Inhalt

** Innen <dd> </dd>: niedrigerer Inhalt

Bestellte Liste

<ol> </ol>: Bereich der geordneten Liste

-ATTRIBUTE TYP: Legen Sie die Sortiermethode fest, 1 (Standard), a, i,

** Im OL -Tag <li> spezifischer Inhalt </li>

Ungeordnete Liste

<ul> </ul>: Bereich der ungeordneten Liste

-ATTRIBUTE TYP: Kreis (Hohlkreis), Scheibe (Standard-Festkreis), quadratisch (festes Quadrat)

** Im UL -Tag <li> spezifischer Inhalt </li>

Bild -Tags

-Attributes: SRC, Breite, Höhe, Alt (der auf dem Bild angezeigte Text, verschieben Sie die Maus auf das Bild, bleiben Sie für eine Weile, um den Inhalt oder den Text anzuzeigen, wenn das Bild falsch angezeigt wird. Einige Browser zeigen ihn jedoch nicht an und es gibt keinen Effekt.

** <img src = "Seite des Bildes"/>

Einführung in die Pfade

*Kategorie: Zwei Kategorien

** Absolutes Pfad zB. http://www.baidu.com/b.jpg

*** Drei relative Pfade Der Speicherort einer Datei relativ zu einer anderen Datei

-Die HTML-Datei und das Bild befinden sich im selben Pfad (Verzeichnis), und der Dateiname kann direkt geschrieben werden

-Verwenden Sie in der HTML-Datei die A.JPG-Datei unter dem IMG-Ordner unter demselben Pfad wie sie: IMG/A.JPG

** d: /htmlstudy/code/4.html

** d: /htmlstudy/code/img/a.jpg

-Das Bild befindet sich im oberen Verzeichnis der HTML-Datei. Zu diesem Zeitpunkt repräsentiert die Bildnutzungsmethode: ../c.png ../ den oberen Weg

Hyperlink -Tags

** Link Ressourcen

- <a href = "Pfad zum Verknüpfen zur Ressource"> Inhalt auf der Seite </a> angezeigt. </a>

** HREF: Die Adresse der verknüpften Ressource

** Ziel: Setzen Sie die Öffnungsmethode, die Standardeinstellung muss auf der aktuellen Seite geöffnet werden

--_ leer: Öffnet in einem neuen Fenster

--_ Selbst: Öffnen Sie die Standardseite

-<a href = " #"> Linktitel </a>: Wenn der Hyperlink nicht zur Seite springen muss, fügen Sie einfach # (Platzhalter) zum HREF hinzu

** Standortressourcen

-Wenn Sie Ressourcen finden möchten: Definieren Sie einen Standort

-Back zu diesem Ort

<a href = "#top"> zurück nach oben </a>

-AS-Is-Output-Tag: <Pre> Inhalt, die eingegeben werden müssen as-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-i-i s-is-iis-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is -is-iis-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is- is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is

Tabellen -Tags

* Funktion: Es kann die Daten formatieren, damit die Daten klarer angezeigt werden

*Attribute Rand (Tabellenliniendicke) Bordercolor (Tabellenleitungsfarbe) Zellpaket (Zellentfernung) Breite Höhe

*<table> </table>: Zeigt den Bereich der Tabelle an

** In der Tabelle bedeutet dies eine Zeile <tr> </tr>

-Setzen Sie die Ausrichtung aus: linke Mitte rechts

*** In TR zeigt es die Zelle in einer Zeile <td> </td> an

** Verwenden Sie TH kann auch Zellen darstellen: Es kann Zentrieren und Fettdruck erreichen

*Der Titel der Tabelle ist in der Tabelle <caption> </caption> platziert

*Betriebsfähigkeiten:

** Zählen Sie zuerst, wie viele Zeilen es gibt, und zählen Sie, wie viele Zellen in jeder Reihe dort sind

*Zellen zusammenführen

** Rowspan: Kreuzreihe (vertikale Zusammenführung)

** colspan: Kreuzspalte (horizontaler Zusammenschluss)

<td colspan = "3" align = "center"> Formulionen </td>

Form -Tags

*Bei der Registrierung von kaixin.com können Sie beispielsweise Daten an den Server von Kaixin.com senden. Dieser Prozess kann mithilfe von Formular -Tags implementiert werden.

* <form> </form>: Definieren Sie einen Formularbereich

*Eigentum:

** Aktion: Die an eingereichte Adresse, die Standardeingabe auf die aktuelle Seite

** Methode: Die Formularübermittlungsmethode

-Es gibt zwei häufig verwendete: Get and Post, was die Standard-Get-Anfrage ist

** Der Unterschied zwischen Get und Post

1) In der Get -Request -Adressleiste werden die eingereichten Daten übertragen, und der Beitrag wird sie nicht übertragen (die Daten befinden sich in der Anforderungsbehörde).

2) Die Sicherheitsstufe des Anfrage ist niedriger und der Post ist höher

3) Die Datengröße der GET -Anforderung ist begrenzt, aber es gibt keine Begrenzung des Posts

** ENCTEPE: Diese Eigenschaft ist für Anforderungen nicht erforderlich, und diese Eigenschaft muss beim Hochladen von Dateien eingerichtet werden.

** Eingabelement: Der Teil, in dem der Inhalt eingegeben oder ausgewählt werden kann

- Die meisten Eingangselemente können mit <Eingabe type = "Eingabeelementtyp"/> verwendet werden

********** In dem Eingabelement müssen Sie ein Namensattribut haben

*** Normale Eingabe: <Eingabe type = "text"/>

*** Kennworteingabelement: <Eingabe type = "Passwort"/>

*** Ein-Choice-Eingabe: <Eingabe type = "Radio"/>

-Der Name des Attributs ist im Inneren erforderlich

-Der NAME-Attributwert muss der gleiche sein

- Es muss einen Wertwert geben

**** Implementieren Sie die ausgewählten Standardeigenschaften

*** geprüft = "geprüft"

*** Eingabe überprüfen: <Eingabe type = "CheckBox"/>

** Der Attributname ist im Inneren erforderlich

** Name Attributwert muss der gleiche sein

** Es muss einen Wertwert geben

**** Implementieren Sie die ausgewählten Standardeigenschaften

---- checked = "geprüft" "

*** Dateieingangselement: <Eingabe type = "Datei"/>

*** Pulldown-Eingangselement (nicht im Eingangs-Tag)

<Option Value = "0"> Bitte wählen Sie </Option>

</select>

**** Implementieren Sie die ausgewählten Standardeigenschaften

---- Selected = "ausgewählt"

*** Textfeld (z. B.: Füllen Sie das Feld für das Profil der persönlichen Informationen bei der Registrierung eines Kontos aus)

*** Verstecktes Element (nicht auf der Seite angezeigt, aber im HTML -Code vorhanden)

*** Schaltfläche Senden

-Address vor der Einreichung: c: /users/happydog/desktop/index.html

** Wenn das Namensattribut im Eingabeelement geschrieben ist

---File: /// c: /users/happydog/desktop/index.html? Telefon = 123123 & pwd = 12321312 & sex = man & love = y & love = pp & birth = 1992 & tex = 1231245

**? Der Wert des Eingabelementnamens = der Wert der Eingabe &

** Die Parameter ähneln dem Schlüsselwertformular

*** Verwenden Sie (klicken Sie auf) Bilder zum Senden

*** Schaltfläche Zurücksetzen: Kehren Sie zum Ausgangszustand des Eingangselements zurück

*** Normale Tasten (mit JS verwendet)

Fall: Verwenden Sie Formular Tags, um die Registrierungsseite zu implementieren

Wenn der Inhalt einer Tischzelle leer ist, werden Platzhalter ((entkommene Räume)) im Allgemeinen gefüllt.

Verwendung anderer gemeinsamer Tags in HTML

** B (BOLD) S (Streiklinie) u (Untersteuerung) i (italic) pre (output so) sub (subscript) sup (superscript) div (line wrap) span (angezeigt in einer line) p (Absatzetikett)

Verwendung von HTML -Header -Tag

** HTML Zwei Teile bilden Kopf und Körper

** Das Etikett im Kopf ist das Kopfetikett

** Title -Tag: Zeigt den auf dem Tag angezeigten Inhalt an

** <Meta> Tag: Einige verwandte Inhalte der Einstellungsseite

-<meta name = "keywords" content = "" />

-<meta http-äquiv = "aktualisieren" content = "10; url = test_form.html" /> Geschwindigkeit für die angegebene Seite regelmäßig

** Basis -Tag: Setzen Sie grundlegende Einstellungen für Hyperlinks

-Die Hyperlink-Öffnungsmethode kann einheitlich eingestellt werden <Base target = "_ leer" />

** Link Tag: Führen Sie externe Dateien ein

Verwendung von Frame -Tags

** <PrameSet>

** Zeilen: Teilen Sie durch Zeile

<Argrameset rows = "80,*"> In zwei Teile, Top 80, unten 80, unterteilen

** COLS: Teilen Sie durch die Spalte

<Rameet cols = "80,*"> Unterteilen Sie in zwei Teilen, links und rechts bei 80, links und rechts jederzeit eine

** <Reframe> Die spezifische Seite angezeigt

** <Frame name = "lower_left" src = "b.html">

*Bei Verwendung von Frame -Tags können sie nicht in Kopf und Körper geschrieben werden. Wenn das Rahmen -Tag verwendet wird, muss der Körper außerhalb des Kopfes entfernt und geschrieben werden.

*Wenn der Hyperlink auf der Seite links und der Inhalt auf der Seite rechts angezeigt werden soll, können Sie die Zieleigenschaft im Hyperlink festlegen und den Wert des Ziels auf den Namen im Rahmen festlegen.

** <a href = "http://www.baidu.com" target = "right"> baidu </a> <br/>

</Frameset>

Wissenszusammenfassung

1) HTML -Betriebsidee: Verwenden Sie Tags, um die zu bedienenden Daten zu wickeln, und ändern Sie den Datenstil im Tag, indem Sie den Attributwert des Tags ändern.

2) Schriftzeichen Attribut: Größenwertbereich 1-7 Farbe: Hexadezimalzahl #ffffff

3) Titel -Tag <H1> </h1> ...... <H6> </h6>: Von H1 nach H6 wird die Schriftart immer kleiner und die Linie wird automatisch geändert

4) Kommentare

Einführung in CSS

** CSS: Kaskadierstilblatt

** Schicht: Schicht für Schicht

** Stylesheet: Viele Attribute und Attributwerte

** Machen Sie die Seite besser anzeigen

** CSS trennt Webseiteninhalte und Anzeigestil und verbessert die Anzeigefunktion

Wie man CSS und HTML kombiniert (vier Möglichkeiten, um zu kombinieren)

1) Auf jedem HTML -Tag gibt es einen Eigenschaftsstil, der CSS und HTML miteinander kombiniert

-<div style = "Hintergrundfarbe: Rot; Farbe: Grün; ID = ""> Der Weg des Himmels reduziert den Überschuss und macht den Mangel wieder wett. Daher besiegt die Leere die Realität und die unzureichende Überschüsse überwindet den Überschuss. </div>

2) Verwenden Sie ein Tag von HTML, um das <style> -Tag zu implementieren und in den Kopf zu schreiben

- <style type = "text/css">

CSS -Code;

</style>

--- Code-Implementierung <kopf>

div {

Hintergrundfarbe: Blau;

Farbe: Rot;

}

</style>

</head>

<body>

Der Weg des Himmels reduziert den Überschuss und macht den Mangel wieder wett. Daher überwindet die Leere die Realität und der mangelnde Mangel überwindet den Überschuss.

</div>

</body>

3) Verwenden Sie Aussagen im Style -Tag

@import URL (Pfad der CSS -Datei);

- Schritt 1: Erstellen Sie eine CSS-Datei

--- <style type = "text/css">

@import URL (Div.css);

</style>

4) Verwenden Sie den Header -Tag -Link, um die externe CSS -Datei einzuführen und in <Head> </head> zu platzieren

- Schritt 1: Erstellen Sie eine CSS-Datei

- <link rel = "stylesheet" type = "text/css" href = "Pfad der CSS-Datei"/>

**** Der Nachteil der dritten Kombinationsmethode: In einigen Browsern funktioniert sie nicht und die vierte Methode wird im Allgemeinen verwendet

**** Priorität (allgemein)

Von oben nach unten, von innen nach außen, Priorität von niedrig bis hoch.

Die Priorität der Postladung ist hoch

**** Format: Auswahlname {Attributname: Attributwert; Attributname: Attributwert; ......}

Grundauswahl für CSS (drei Typen)

** Betreiben Sie die Daten in diesem Tag

1) Tag Selector Div {CSS -Code}

-Verwenden Sie den Labelnamen als Name des Selektors

<kopf>

div {

Hintergrundfarbe: Blau;

Farbe: Rot;

}

</style>

</head>

<body>

<div> aaaaa </div>

</body>

2) Klassenauswahl. Name {}

** Jedes HTML -Tag hat eine Eigenschaftsklasse

** <kopf>

Div.test {

Hintergrundfarbe: Blau;

Farbe: Rot;

}

P.Test {

Hintergrundfarbe: Blau;

Farbe: Rot;

}

Es kann abgekürzt werden als:

.prüfen{

Hintergrundfarbe: Blau;

Farbe: Rot;

}

</style>

</head>

** <body>

<div> aaaaa </div>

<p> BBBBBBBBBBBB

</body>

3) ID -Selektor #Name {}

** Jedes HTML -Tag hat eine Attribut -ID

-<div id = "test"> CCCCCCCCCCCC </div>

-<kopf>

Div#Test {

Hintergrundfarbe: Blau;

Farbe: Rot;

}

P#Test {

Hintergrundfarbe: Blau;

Farbe: Rot;

}

Es kann abgekürzt werden als:

#prüfen {

Hintergrundfarbe: Blau;

Farbe: Rot;

}

</style>

</head>

-<body>

<div id = "test"> aaaaa </div>

<p id = "test"> BBBBBBBBBBBB </p>

</body>

** Prioritätsstil> ID -Selektor> Klassenauswahl> Tag -Selektor

CSS -Erweiterungsauswahl (lernen)

1) Einstellungen von Stilen für verschachtelte Etiketten für Assoziationsauswahlern

** <Viv> <p> wwwwwwwww </p> </div>

** Stellen Sie den Stil des P -Tags im Div -Tag und den Stil des verschachtelten Tags ein

-<kopf>

div p {

Hintergrundfarbe: Blau;

Farbe: Rot;

}

</style>

</head>

-<body>

<div> <p> wwwwwwwww </p> </div>

<p> aaaaa </p>

</body>

2) Kombinieren des Selektors Verschiedene Etiketten setzen den gleichen Stil

** <Div> 1111 </div>

** Setzen Sie Div- und P -Tags auf denselben Stil und setzen Sie verschiedene Tags auf denselben Stil fest

-<kopf>

div, p {

Hintergrundfarbe: Blau;

Farbe: Rot;

}

</style>

</head>

-<body>

</body>

3) Pseudo (Klasse) Element Selector

** CSS bietet einige gut definierte Stile, die verwendet werden können

** Zum Beispiel Hyperlink

** Status von Hyperlinks

-Nach Klicken und Klicken auf den ursprünglichen Status

: link: schwebe: aktiv: besucht

Code -Implementierung:

<kopf>

/*Originalstatus*/

A: Link {

Hintergrundfarbe: Rot;

}

/*Hoom Status*/

A: Hover {

Hintergrundfarbe: Grün;

}

/*Klicken Sie auf Status*/

A: aktiv {

Hintergrundfarbe: Blau;

}

/*Status nach Klick*//

A: besucht {

Hintergrundfarbe: Grau;

}

</style>

</head>

<body>

<a href = "http://www.baidu.com"> Klicken Sie auf den Link zur Baidu -Webseite </a>

</body>

Das CSS -Boxmodell (Verständnis), um Daten zu betreiben, müssen Sie die Daten in einen Bereich (DIV) einfügen.

1) Grenzgrenze: Einheitliche Einstellungen

Sie können es auch separat einstellen: obere Grenztoper unter: Grenzboden links: Grenz-links rechts: Grenzrechte

-<kopf>

div {

Breite: 200px;

Höhe: 100px;

Grenze: 2px solide blau;

}

#div12 {

Grenzrechte: 2PX gestrichelt gelb;

}

</style>

</head>

-<body>

<div id = "div11"> aaaaaaaaaaa </div>

<div id = "div12"> BBBBBBBBBBB </div>

</body>

2) Innenrandpolsterung: Stellen Sie den Abstand zwischen dem Inhalt von oberen, unteren, linken und rechten Seiten ein

Sie können es auch separat einstellen: nach oben, unten, links und rechts

<kopf>

div {

Breite: 200px;

Höhe: 100px;

Grenze: 2px solide blau;

}

#div21 {

Polsterung: 20px;

}

#div22 {

Padding-Links: 30px;

}

</style>

</head>

<body>

<div id = "div21"> aaaaaaaaaaa </div>

<div id = "div22"> BBBBBBBBBBB </div>

</body>

3) Rand: Stellen Sie den Abstand zwischen dem Div von den äußersten vier Seiten ein

Sie können es auch separat einstellen: nach oben, unten, links und rechts. . .

CSS 'Layout Float (verstehen) Schwimmer: links rechts

Positionierung des CSS -Layouts (verstehen)

*Position

** Attributwert:

--static: Standardwert, keine spezielle Positionierung

--Absolute:

Ziehen Sie das Objekt aus dem Dokumentstrom und verwenden Sie links, rechts, oben, unten und andere Eigenschaften, um es absolut zu lokalisieren

-Relativ: Das Objekt wird nicht aus dem Dokumentstream herausgezogen. Das Objekt kann nicht gestapelt werden, aber es wird im normalen Dokumentstrom basierend auf den Eigenschaften wie links, rechts, oben, unten usw. ausgeglichen.

Fall: gemischtes Bild und Text

** Bilder und Texte werden zusammen angezeigt

Fall: Bildsignatur

Einführung in JavaScript: Es handelt sich um eine objektgesteuerte Skriptsprache, die hauptsächlich im Client verwendet wird

*Objektbasiert: Viele Objekte werden bereitgestellt, Sie können sie direkt verwenden

* Ereignisgesteuert: HTML macht Website statische Effekte, JavaScript dynamische Effekte

*Kunde: bezieht sich speziell auf den Browser

* Merkmale von JS:

1) Dynamische Interaktion interaktiver Informationen

2) Sicherheit JS kann auf lokalen Festplatten nicht auf Dateien zugreifen

3) plattformübergreifende Java, virtuelle Maschinen; Solange Browser, die JS unterstützen können, können sie laufen lassen

*Unterschied zwischen JavaScript und Java: Es gibt keine Beziehung zwischen den beiden

1) Java ist Sun Company, jetzt Oracle; JS ist Netscape Company

2) Java ist objektorientiert und JS ist objektbasierte

3) Java ist eine stark typisierte Sprache, und JS ist eine schwach getippte Sprache

-Zum Beispiel: int i = "10" in Java; meldet einen Fehler

-Js: var i = 10; var i = "10"; Es werden keine Fehler gemeldet

4) JS muss nur analysiert werden, um auszuführen, während Java zuerst in eine Bytecode -Datei zusammengestellt werden muss und sie dann ausführen muss

*JS -Komposition (drei Teile):

1) ECMascript

- ECMA: Europäische Computervereinigung

-JS-Syntax und von ECMA organisierte Aussagen ...

2) bom

-Broswer-Objektmodell: Browser-Objektmodell

3) Dom

-Dokumentobjektmodell: Dokumentobjektmodell

So kombinieren Sie JS und HTML (zwei Typen)

1) Verwenden Sie ein Tag <script type = "text/javaScript"> js code; </script>

2) Verwenden Sie Skript -Tags, um eine externe JS -Datei vorzustellen

- Erstellen Sie eine JS-Datei und schreiben Sie JS-Code

- <script type = "text/javaScript" src = "js path"> </script>

Hinweis: Wenn Sie die zweite Methode verwenden, schreiben Sie nicht JS -Code in das Skript -Tag, sondern wird nicht ausgeführt.

JS 'primitive Typen und deklarieren Variablen

*Grundlegende Datentyp von Java: Byte Short Int Long Float Double char bolean

*JS definiert Variablen mit Schlüsselwort var

*JS ursprünglicher Typ (fünf)

-STRING STRING VAR STR = "ABC";

-number numer numerischer Typ var m = 123;

-Boolean True und False Var Flag = True;

-null var date = new Date ();

** Erhalten Sie den Verweis auf das Objekt. Null bedeutet, dass die Objektreferenz leer ist und alle Verweise auf das Objekt auch Objekt sind.

-findefiniert definiert eine Variable, weist jedoch nicht VAR AA zu;

* Typeof (Variablenname) Zeigen Sie den Datentyp der aktuellen Variablen an

JS -Aussage

** Die Aussage, wenn das Urteil in Java ("=" bedeutet, Zuweisung; "==" gleich, bedeutet das Urteilsvermögen) Switch-Anweisung Schleife Anweisung (für während der Zeit)

** JS 'Aussagen

-Wenn die Urteilsaussage

-Switch (a) {

Fall 5: ...

brechen;

Fall 6: ...

brechen;

Standard:...

...........

}

** Schleife Anweisung für während der Zeit

--var i = 5;

während (i> 0) {

Alarm (i);

ich--;

}

-für (var i = 0; i <= 5; i ++) {

Alarm (i);

}

JS -Operator

** JS unterscheidet nicht zwischen Ganzzahlen und Dezimalstellen

-Var J = 123;

Alarm (J/1000*1000);

** J/1000*1000 Das Ergebnis in Java ist 0

** In JS gibt es keine Unterscheidung zwischen Ganzzahlen und Dezimalstellen, 123/1000*1000 = 0,123*1000 = 123

** Fügen und Subtrahieren von String -Operationen hinzu

-var str = "123";

Alarm (str + 1); Das Ergebnis von Java und JS ist 1231, eine String -Verbindung

Alarm (str - 1); Führen Sie beim Subtrahieren den Subtraktionsvorgang durch. Wenn STR keine Nummer ist, fordert dies Nan auf: Es ist keine Nummer

** Der Bolean -Typ kann ebenfalls betrieben werden

*** Wenn es auf True gesetzt ist, entspricht es 1; Wenn es auf False gesetzt ist, entspricht es 0;

** == und === Unterschied

** Es geht nur darum, Urteile zu fällen

** == Vergleich ist nur der Wert; === Vergleich ist der Wert und der Typ

** Sätze, die direkt auf die Seite ausgegeben werden (der Inhalt kann auf der Seite angezeigt werden) können Variablen, feste Werte und HTML -Code auf der Seite ausgeben. Document.write ("") enthält doppelte Anführungszeichen, und wenn Sie die Attribute des Etiketts festlegen, müssen Sie einzelne Zitate verwenden.

- document.write ("aaaa");

- document.write ("<hr/>");

*** document.write ("<table border = '1' borderColor = 'rot'>");

*** document.write ("</table>");

Übung: Implementierung der 99 Multiplikationstabelle

JS -Array

*Die Array -Definition in Java int [] arr = {1,2,3};

*JS -Array -Definitionsmethode (drei Typen)

1) var arr = [1,2,3]; var arr = [1, "2", 3]; var arr = [1,2, true];

2) Verwenden Sie ein integriertes Objekt-Array-Objekt

var arr1 = Neuarray (5); // Definieren Sie ein Array, die Länge des Arrays beträgt 5

arr1 [0] = "1";

......

3) Verwenden Sie ein integriertes Objekt-Array-Objekt

var arr2 = Neuarray (3,4,5); // Definieren Sie ein Array, die Elemente im Array sind 3,4,5

* Es gibt eine Eigenschaftslänge im Array: Holen Sie sich die Länge des Arrays

* Die Länge des Arrays ist variabel und das Array kann Daten unterschiedlicher Datentypen speichern.

JS -Funktion (Methode)

** Definieren Sie Funktionen (Methoden) in JS. Es gibt drei Möglichkeiten, Funktionen zu definieren. In der Parameterliste von Funktionen müssen Sie nicht var schreiben, sondern den Parameternamen schreiben.

1) Verwenden Sie eine Schlüsselwortfunktion

*** Funktionsmethodenname (Parameterliste) {

Methodekörper;

Der Rückgabewert ist optional (abhängig von den tatsächlichen Bedürfnissen);

}

Code -Implementierung: // Funktion mit der ersten Methode erstellen

Funktionstest () {

Alert ("qqqqqq");

}

// Rufmethode

prüfen();

// Definieren Sie eine Methode mit Parametern, um das Hinzufügen von zwei Zahlen zu implementieren

Funktion add1 (a, b) {

var sum = a+b;

Alarm (Summe);

}

Add1 (3,5);

Funktion add2 (a, b, c) {

var sum1 = a+b+c;

Rückgabe sum1;

}

Alarm (add2 (7,8,9));

2) Anonyme Funktionen

var add = Funktion (Parameterliste) {

Methode Körper- und Rückgabewert;

}

Code -Implementierung: var add3 = function (m, n) {

Alarm (M+n);

}

// Rufmethode

Add3 (8,9);

3) Es wird auch allgemein als dynamische Funktion bezeichnet. Wenn Sie es weniger verwenden, verstehen Sie es einfach.

*Verwenden Sie eine integrierte Objektfunktion in JS

var add = new Function ("Parameterliste", "Methode Body and Return Value");

var add4 = neue Funktion ("x, y", "var sum; sum = x+y; return sum;");

Alarm (add4 (9,10));

// oder der folgende Code

var canshu = "x, y";

var fangfati = "var sum; sum = x+y; return sum;";

var add4 = neue Funktion (Canshu, Fangfati);

Alarm (add4 (5,3));

Globale und lokale Variablen von JS

** Globale Variable: Definieren Sie eine Variable im Skript -Tag, die im JS -Teil der Seite verwendet werden kann

-Verwenden Sie außerhalb der Methode innerhalb der Methode in einem anderen Skript-Tag

** Lokale Variable: Definieren Sie eine Variable innerhalb einer Methode und können nur innerhalb der Methode verwendet werden.

-Es kann nur innerhalb der Methode verwendet werden. Wenn diese Variable außerhalb der Methode aufgerufen wird, wird ein Fehler angezeigt

--ie wird mit einem Debugging-Tool geliefert. In der Version von IE8 oder höher, f12 auf der Tastatur, und am Ende der Seite angezeigt wird, um den Fehler beim Betrachten der Konsole anzuzeigen.

Wo sollten Skript -Tags platziert werden

** Es wird empfohlen, Skript -Tags hinter </body> zu setzen

** Wenn jetzt eine Anforderung besteht:

-In JS müssen Sie den Wert in der Eingabe erhalten. Wenn Sie das Skript -Tag in den Kopf stellen, wird es Probleme geben

-Die HTML-Parsen wird von oben nach unten analysiert. Das Skript -Tag wird in den Kopf platziert und nimmt den Eingabwert direkt an. Da die Seite noch nicht an die Eingangslinie analysiert wurde, kann sie sie definitiv nicht bekommen.

JS -Überladen von JS hat keine Überladung, kann aber simuliert und implementiert werden.

Beispiel: Funktion add11 (a, b) {

Return a+b;

}

Funktion add11 (a, b, c) {

Return a+b+c;

}

Funktion add11 (a, b, c, d) {

Rückgabe a+b+c+d;

}

Alarm (add11 (2,2)); // nan

Alarm (add11 (2,2,3)); // nan

Alarm (add11 (2,2,4,5)); // 13

String -Objekt von JS

** String -Objekt erstellen var str = "abc ';

** Methoden und Eigenschaften (Dokument)

-ATTRIBUTE Länge: Länge der Zeichenfolge

--Verfahren

1) Methoden im Zusammenhang mit HTML

- BOLD (): BOLD FONTCOLOR (): Setzen Sie die Farbe der String fontSize (): Stellen

2) Ähnliche Methoden wie Java

-Concat (): Schließen Sie den String charat () an: RECHTEN SIE DIE STRING INDEXOF (): Geben Sie die Zeichenfolgeposition des String-Splits zurück (): Schneiden Sie die Zeichenfolge in ein Array-Ersatz ("", ""): Ersetzen Sie den String-Pass zwei Parameter: Der erste Parameter ist das ursprüngliche Zeichen, und der zweite Parameter ist das Zeichen, das durch Substr (5,3) ersetzt werden soll. Beginnen Sie vom fünften Bit und Abfangen von drei Zeichen rückwärts Substring (3,5) beginnen vom dritten Bit, einschließlich des dritten Bits bis zum fünften Bit, ohne das fünfte Bit [3,5)

Array -Objekt für JS

** Drei Möglichkeiten, um ein Array zu erstellen

1) var arr1 = [1,2,3];

2) var arr1 = Neuarray (3); // Die Länge beträgt drei

3) var arr1 = Neuarray (1,2,3); // Das Element ist 1,2,3

var arr = []; // Erstellen Sie ein leeres Array

** Attributlänge: Zeigen Sie die Länge des Arrays an

**Verfahren

concat (); verbinden(); Teilen Sie das Array gemäß den angegebenen Zeichen taste (); Fügen Sie Elemente zum Ende des Arrays hinzu, geben Sie die neue Länge des Arrays zurück ** Wenn das hinzugefügte Array ein Array ist, fügen Sie das Array als ganzer String -Pop () hinzu. das letzte Element des Array Reverse () löschen und zurückgeben; Wechseln Sie die Reihenfolge der Elemente im Array um

Datum Objekt von JS

** Holen Sie sich die aktuelle Zeit in Java

Datum Datum = neuer Datum ();

// Format // Tolocalestring ()

** Erhalten Sie die aktuelle Zeit in JS

var date = new Date ();

// in das übliche Formatdatum konvertieren.tolocalestring ();

Mathe -Objekt Mathematikoperation von JS

** Alles innen sind statische Methoden, Sie können Mathematik verwenden. method () direkt bei der Verwendung;

Globale Funktionen von JS

** Da es keinem Objekt gehört, schreiben Sie den Namen direkt, um ihn zu verwenden

** eval (); Führen Sie den JS -Code aus (wenn der Zeichenfolge ein JS -Code ist, verwenden Sie die Methode, um ihn direkt auszuführen).

- var str = "alert ('1234');";

// alarm (str); // alert ('1234');

eval (str); // 1234

** .....

Überladung von JS -Funktionen Was ist Überladen? Der Methodenname ist der gleiche, die Parameter sind unterschiedlich

*JS hat keine Überladung von Funktionen, und nur die letzte Methode wird aufgerufen, aber die Überladung kann auf andere Weise simuliert werden. Die JS -Funktion speichert die übergebenen Parameter in das Argumentearray. Sie können das Urteil über die Länge des Argumentearrays verwenden, um verschiedene Verarbeitungsergebnisse entsprechend zurückzugeben.

Simulieren Sie die Implementierung des Reload -Effektcodes:

Funktion add1 () {

if (Argumente.length == 2) {

Argumente zurückgeben [0] + Argumente [1];

} else if (Argumente.length == 3) {

Argumente zurückgeben [0] + Argumente [1] + Argumente [2];

} else if (Argumente.length == 4) {

Argumente zurückgeben [0] + Argumente [1] + Argumente [2] + Argumente [3];

} anders {

Rückkehr 0;

}

// Anruf

Alarm (add1 (1,2)); // 3

Alarm (add1 (1,2,3)); // 6

Alarm (add1 (1,2,3,4)); // 10

Alarm (add1 (1,2,3,4,5)); // 0

JS BOM -Objekt

** BOM: Broswer -Objektmodell: Browser -Objektmodell

** Was sind die Objekte?

- Navigator: Kundeninformationen abrufen (Browserinformationen)

- Bildschirm: Bildschirminformationen abrufen

- Ort: Die angeforderte URL-Adresse

*** HREF -Attribut

1) Holen Sie sich die angeforderte URL -Adresse

--document.write (Ort.href);

2) Stellen Sie die URL -Adresse ein

-Eine Schaltfläche ist auf der Seite platziert und ein Ereignis ist an die Schaltfläche gebunden. Wenn Sie auf diese Schaltfläche klicken, kann die Seite zu einer anderen Seite springen

<body>

Funktion href1 () {

// alarm ("aaaa");

location.href = "http://www.baidu.com";

}

</script>

</body>

- Geschichte: Die Geschichte der angeforderten URL

- Erstellen Sie drei Seiten (simulieren Sie den Effekt der Auf und Ab-Geschichte)

1) Erstellen Sie eine Seite a.html und schreiben Sie einen Hyperlink an b.html

2) Erstellen Sie einen B.html -Hyperlink mit C.html

3) C.HTML erstellen

- auf die vorherige Seite besucht

Geschichte.back ();

Geschichte, gehen Sie (-1);

- Gehen Sie zur nächsten Seite, die Sie besucht haben

Geschichte.forward ();

history.go (1);

-Fenster (Schlüsselmeister) oberes Objekt des Fensterobjekts (alle BOM-Objekte werden im Fenster betrieben)

**Verfahren

- window.alert (); Abkürzung ist: alert (); Auf der Seite wird ein Fenster angezeigt, um den Inhalt anzuzeigen

- Bestätigen ("Nachrichteninhalt anzeigen"); Das Bestätigungs -Eingabeaufforderung -Feld hat den Rückgabewert True und FALSE

- prompt (); Das Dialogfeld Eingabe (jetzt werden jetzt nicht viele verwendet) enthält zwei Parameter: Inhalt und Standardwert anzeigen

- Öffnen ("URL-Adresse", "," Fensterfunktionen wie Fensterbreite und Höhe "); Öffnen Sie ein neues Fenster

-- schließen(); Fenster schließen (die Browserkompatibilität ist relativ schlecht)

- Machen Sie einige Timer

*** setInterval ("JS Code", Millisekunden); window.setInterval ("alert ('123');", 3000); Zeigt an, dass die Warnmethode alle drei Sekunden ausgeführt wird

*** setTimeout ("JS Code", Millisekunden); bedeutet, dass es nach Millisekunden ausgeführt wird, aber es wird nur einmal ausgeführt.

*** ClearInterval (); Löschen Sie den durch setInterval festgelegten Timer

- var id1 = setInterval ("alert ('123');", 3000);

ClearInterval (ID1);

*** Clearimeout (); Löschen Sie den Timer -SetTimeout

JS DOM -Objekt

** DOM: Dokumentobjektmodell: Dokumentobjekttyp

** Dokument: Hypertext -Dokument (Hypertext Tagged Dokument) HTML, XML

** Objekt: Bereitstellung von Eigenschaften und Methoden

** Modell: Verwenden Sie Eigenschaften und Methoden, um hypertext -markierte Dokumente zu manipulieren

*** Sie können die in der DOM in JS bereitgestellten Objekte verwenden, die Eigenschaften und Methoden dieser Objekte verwenden, um auf Markup -Dokumenten zu arbeiten.

*** Um mit einem Taggedokument zu arbeiten

- Sie müssen die Tags, Attribute und Textinhalte in der HTML in Objekte zusammenfassen

*** Um Markierungsdokumente zu betreiben, analysieren Sie Marker -Dokumente

*** Analyseprozess: Gemäß der hierarchischen Struktur des HTML wird eine Baumstruktur im Gedächtnis zugewiesen, und jeder Teil des HTML muss in ein Objekt eingekapselt werden

*Nur ein Stammknoten

Unter dem Stammknoten können mehrere untergeordnete Knoten vorhanden sein. Knoten ohne Kinderknoten werden als Blattknoten bezeichnet

- Dokumentobjekt: Das gesamte HTML-Dokument

- Elementobjekt: Tag-Objekt

- Attributobjekt

- Textobjekt

** Knotenknotenobjekt: Ist das übergeordnete Objekt dieser Objekte

DHTML: Es ist die Abkürzung vieler Technologien

** HTML: Daten zusammenfassen

** CSS: Verwenden Sie Attribute und Attributwerte zum Stil

** DOM: Betreiben Sie HTML -Dokumente (gekennzeichnete Dokumente)

** JavaScript: Bezieht sich speziell auf die Syntax -Anweisung von JS (ECMascript)

Das Dokumentobjekt repräsentiert das gesamte Dokument

** Gemeinsame Methoden

- Schreiben () Methode: 1) Ausgabevariablen zum Seite 2) Ausgabe des HTML-Code

- GetElementById (); Mittel, um Element (Etikett) durch ID zu erhalten

<body>

// Verwenden Sie GetElementById, um das Eingabetik -Objekt abzurufen

var input1 = document.getElementById ("nameId");

// Erhalten Sie den Wertwert in der Eingabe

Alert (input1.Value);

// Setzen Sie einen Wert in die Eingabe ein

input1.Value = "BBBBBBBBB";

</script>

</body>

- GetElementsByName (); Das Namensattribut des Tags ist des Tags würdig, und die Rückgabe ist eine Sammlung (Array)

<body>

var input1 = document.getElementsByName ("name1"); // Der übergebene Parameter ist der Wert des Namens im Etikett

für (var i = 0; i <input1.length; i ++) {// Durch Traversal erhalten Sie den spezifischen Wert in jedem Tag

var inputs = input1 [i]; // Jede Schleife erhält das Eingabeobjekt und weist den Wert den Eingängen zu

alarm (inputs.value); // Erhalten Sie den Wertwert in jedem Eingabe -Tag

}

</script>

</body>

- GetElementsByTagName ("Name des Tags"); Gibt eine Sammlung zurück (Array)

<body>

var inputs1 = document.getElementsByTagName ("input"); // Der übergebene Parameter ist der Name des Tags

für (var i = 0; i <inputs1.length; i ++) {

var input1 = inputs1 [i];

Alert (input1.Value);

}

</script>

</body>

**** HINWEIS: Es gibt nur ein Etikett, und diese Beschriftung kann nur unter Verwendung des Namens erhalten werden. Zu diesem Zeitpunkt gibt die Verwendung von GetElementsByName ein Array zurück, aber jetzt gibt es nur noch ein Element. Zu diesem Zeitpunkt besteht keine Notwendigkeit, durch den Wert des Arrays direkt zu durchlaufen.

var input1 = document.getElementsByName ("name1") [0];

Alert (input1.Value);

Fall: Fensterpop-up-Fall

** Implementierungsprozess: 1) Sie müssen eine Seite erstellen: zwei Eingabeelemente und eine Schaltfläche, und auf der Schaltfläche befindet sich ein Ereignis, bei dem es sich um ein neues Fensterpopup handelt

2) Erstellen Sie eine Popup-Seite: Jede Zeile der Tabelle hat eine Schaltfläche, eine Nummer und einen Namen; Auf der Schaltfläche befindet sich ein Ereignis: Weisen Sie die aktuelle Nummer und den Namen der entsprechenden Position der ersten Seite zu.

** Cross-Page-Operation Opener: Sie können das Fenster erhalten, das dieses Fenster erstellt, dh, Sie können das übergeordnete Fenster erhalten

Fall: Fügen Sie am Ende den Knoten hinzu

1) Erstellen Sie ein Li -Tag

2) Text erstellen

3) Fügen Sie den Text zu Li hinzu

4) Fügen Sie Li zu UL hinzu

<body>

</ul> <br/>

Funktion add1 () {

// Holen Sie sich das UL -Tag

var ul1 = document.getElementById ("ulid");

// Tags erstellen

var li1 = document.createelement ("li");

// Text erstellen

var tex1 = document.createTextNode ("4444");

// Text zu Li hinzufügen

li1.Appendchild (tex1);

// li zu UL hinzufügen

UL1.AppendChild (li1);

}

</script>

</body>

Element -Objekt (Elementobjekt): Um das Element zu bedienen, müssen Sie zuerst das Element mit der entsprechenden Methode im Dokument erhalten, um es zu erhalten.

**Verfahren

**** den Wert im Attribut GetArttribute ("Attributname");

**** Setzen Sie den Wert des Attributs setAttribute (Name, Wert);

**** entfernen Attribut removeTtribute ("Attributname"); Wert kann nicht gelöscht werden

// Erhalten Sie zuerst das Eingabetik

var input1 = document.getElementById ("inputID");

// alarm (input1.Value);

alert (input1.getAttribute ("value")); // den Wert im Attribut erhalten

alert (input1.getAttribute ("Klasse"));

input1.Setattribute ("Klasse", "haha"); // Legen Sie den Wert des Attributs fest

alert (input1.getAttribute ("Klasse"));

input1.removeAttribute ("Name");

</script>

** Möchten Sie den Untertitel unter das Tag unter dem Tag bringen

** Verwenden Sie Attribut Childnodes, aber dieses Attribut hat eine schlechte Kompatibilität

** Die einzig effektive Möglichkeit, die Tags unter das Tag zu erhalten

<body>

<li> aaaaaa </li>

<li> bbbbbb </li>

<li> CCCCCCCC </li>

</ul>

// Holen Sie sich das UL -Tag

var ul1 = document.getElementById ("ulid1");

// Holen Sie sich den Untertitel unter ul

// var lis = ul1.childnodes; // schlechte Kompatibilität

// alarm (lis.length); // Einige Anzeigen 3 einige Anzeigen 7

var lis = ul1.getElementsByTagName ("li");

Alarm (Lis.Length);

</script>

</body>

Eigenschaften des Knotenobjekts

** Knotenname

** nodetyp

** NodeValue

** Beim Parsen von HTML mit DOM müssen die Tags, Attribute und Text in der HTML in Objekte eingekapselt werden

** Der Wert, der dem Tag -Knoten entspricht

Nodetyp: 1

Knotenname: Caps -Tag -Name, wie z. B. Span

NodeValue: NULL

** Der Wert, der dem Attributknoten entspricht

Nodetyp: 2

KnodeName: Attributname

NodeValue: Der Wert der Eigenschaft

** Der Wert, der dem Textknoten entspricht

Nodetyp: 3

NODEHAME: #Text

NodeValue: Textinhalt

** <body>

<span id = "spanid"> textinhalt </span>

// das Tag -Objekt abrufen

var span1 = document.getElementById ("spanid");

// alarm (span1.nodetype); // 1

// alarm (span1.nodename); // SAPN

// alarm (span1.nodealue); // null

// Attribute

var id1 = span1.getAttributenode ("id");

// alert(id1.nodeType); // 2

// alert(id1.nodeName); //Ausweis

// alert(id1.nodeValue); // spanid

//获取文本

var text1 = span1.getfirstChild;

// alert(text1.nodeType); // 3

// alert(text1.nodeName); //#Text

// alert(text1.nodeValue); // 文本内容

</script>

</body>

Node对象的属性二

<ul>

<li>aaaaaa</li>

<li>bbbbb</li>

</ul>

**父节点ul是li的父节点

*** parentNode ：父节点

**子节点li是ul的子节点

*** childNodes : 得到所有子节点，但是兼容性很差

*** firstChild : 获取第一个子节点

*** lastChild : 获取最后一个子节点

**同辈节点li与li之间是同辈节点

**nextSibling : 返回一个给定节点的下一个兄弟节点

**previousSibling : 返回一个给定节点的上一个兄弟节点

<body>

<li id="li1">aaaaa</li>

<li id="li2">bbbbb</li>

<li id="li3">ccccc</li>

<li id="li4">ddddd</li>

</ul>

/* // 得到li1

var li1 = document.getElementById("li1");

// 得到ul

var ul1 = li1.parentNode;

alert(ul1.id); */

/* // 获取ul的第一个子节点

// 得到ul

var ul1 = document.getElementById("ulid");

// 第一个子节点

var li1 = ul1.firstChild;

alert(li1.id);

var li4 = ul1.lastChild;

alert(li4.id); */

//获取li的id是li3的上一个和下一个兄弟节点

var li3 = document.getElementById("li3");

var li4 = li3.nextSibling;

var li2 = li3.previousSibling;

alert(li4.id);

alert(li2.id);

</script>

</body>

操作dom树

** appendChild方法：

*** 添加子节点到末尾

*** 特点：类似于剪切粘贴的效果

** insertBefore(newNode,oldNode);

*** 在某个节点之前插入一个新的节点通过父节点添加

*** 两个参数1）要插入的节点2)在谁之前插入

*** 插入一个节点，节点不存在，创建

1）创建标签

2）创建文本

3）把文本添加到标签下面

**代码实现：（在<li>貂蝉</li>之前添加<li>董小宛</li>）

<body>

</ul>

// 在<li>貂蝉</li>之前添加<li>董小宛</li>

function insert1() {

// 1、获取到li13标签

var li13 = document.getElementById("li13");

// 2、创建li

var li15 = document.createElement("li");

// 3、创建文本

var text15 = document.createTextNode("董小宛");

// 4、把文本添加到li下面

li15.appendChild(text15);

// 5、获取ul

var ul21 = document.getElementById("ulid21");

// 6、把li添加到ul下面（在<li>貂蝉</li>之前添加<li>董小宛</li>）

ul21.insertBefore(li15,li13);

}

</script>

</body>

**removeChild方法：删除节点

***通过父节点删除，不能自己删除自己

**代码实现: 删除<li id="li24">杨玉环</li>

<body>

</ul>

// 删除<li id="li24">杨玉环</li>

function remove1() {

// 1、获取到li24标签

var li24 = document.getElementById("li24");

// 2、获取父节点ul标签

// 有两种方式1）通过id获取2）通过属性parentNode获取

var ul31 = document.getElementById("ulid31");

// 3、执行删除（通过父节点删除）

ul31.removeChild(li24);

}

</script>

</body>

** replaceChild(newNode,oldNode); 替换节点

***两个参数：1）新的节点（替换成的节点） 2）旧的节点（被替换的节点）

***不能自己替换自己，通过父节点替换

** cloneNode(boolean) : 复制节点

**代码实现：把ul列表复制到另外一个div里面

<body>

</ul>

</div>

// 把ul列表复制到另外一个div里面

1、获取到ul

2、执行复制方法cloneNode方法复制参数true

3、把复制之后的内容放到div里面去

** 获取到div

** appendChild方法

function clone1() {

// 1、获取ul

var ul41 = document.getElementById("ulid41");

// 2、复制ul，放到类似剪切板里面

var ulcopy = ul41.cloneNode(true);

// 3、获取到div

var divv = document.getElementById("divv");

// 4、把副本放到div里面去

divv.appendChild(ulcopy);

}

</script>

</body>

**操作dom总结：

**获取节点使用方法

getElementById() : 通过节点的id属性，查找对应节点

getElementsByName() : 通过节点的name属性，查找对应节点

getElementsByTagName() : 通过节点名称，查找对应节点

**插入节点的方法

insertBefore方法: 在某个节点之前插入

appendChild方法: 在末尾添加，类似于剪贴粘贴

**删除节点的方法

removeChild方法: 通过父节点删除

**替换节点的方法

replaceChild方法: 通过父节点替换

innerHTML属性（重点）

** 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

** 第一个作用：获取文本内容

var span1 = document.getElementById("sid");

alert(span1.innerHTML);

** 第二个作用：向标签里面设置内容（可以是html代码）

<body>

</div>

// 获取span标签

var span1 = document.getElementById("sid");

//alert(span1.innerHTML); // 测试文本

// 向div里面设置内容<h1>AAAAA</h1>

// 获取div

var div11 = document.getElementById("div11");

div11.innerHTML = "<h1>AAAAA</h1>"; // 设置内容

</script>

</body>

** 练习：向div里面添加一个表格

var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";

div11.innerHTML = tab;

案例：动态显示时间

** 得到当前时间

var date = new Date();

var d1 = date.toLocaleString();

** 需要让页面每一秒获取时间

setInterval方法定时器

** 显示到页面上

每一秒向div里面写一次时间使用innerHTML属性

** 代码实现动态显示时间

<body>

</div>

function getD1() {

// 当前时间

var date = new Date();

// 格式化

var d1 = date.toLocaleString();

// 获取div

var div1 = document.getElementById("times");

div1.innerHTML = d1;

}

// 使用定时器实现每一秒写一次时间

setInterval("getD1();",1000);

</script>

</body>

案例：全选练习

** 使用复选框上面一个属性判断是否选中

** checked 属性

** checked = true; 选中

** checked = false; 未选中

** 创建一个页面

** 复选框和按钮

***四个复选框表示爱好

***还有一个复选框操作全选和全不选有一个事件

***三个按钮全选全不选反选每个按键都分别有事件

**代码实现

<body>

<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选

<br/>

<input type="checkbox" name="love"/>篮球

<input type="checkbox" name="love"/>排球

<input type="checkbox" name="love"/>羽毛球

<input type="checkbox" name="love"/>乒乓球

<br/>

// 实现全选操作

function selAll() {

1、获取要操作的复选框使用getElementsByName();

2、返回的是数组

**属性checked 判断复选框是否选中

** checked = true; // 表示选中

** checked = false; // 表示未选中

**遍历数组，得到的是每一个checkbox

** 把每一个checkbox属性设置为true 即checked = true;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = true; // 设置属性为true

}

// 实现全不选操作

function selNo() {

1、获取到要操作的复选框

2、返回的是数组，遍历数组

3、得到每一个复选框

4、设置复选框的属性checked = false;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = false; // 设置属性为true

}

function selOther() { // 实现反选

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

if(love1.checked == true) {

love1.checked = false;

}

anders {

love1.checked = true;

}

function selAllNo() { // 一个多选框实现全选全不选切换

1、得到上边的复选框通过id来获取

2、判断该复选框是否选中if条件checked == true

3、如果是选中，下面是全选

4、如果不是选中，下面是全不选

var box1 = document.getElementById("boxid");

if(box1.checked == true) {

selAll();

}

anders {

selNo();

}

</script>

</body>

案例：下拉列表左右选择

** 下拉选择框

</select>

** 创建一个页面

** 两个下拉框设置属性multiple

** 四个按钮，都有事件

** 代码实现：

<body>

<div>

</select>

</div>

<div>

</div>

<div>

<option>AAAAAAAA</option>

<option>BBBBBBBB</option>

</select>

</div>

<div>

</div>

// 实现选中添加到右边

function selToRight() {

1、获取select1 里面的option

* 使用getElementsByTagName(); 返回的是数组

* 遍历数组，得到每一个option

2、判断option是否被选中

* 属性selected ，判断是否被选中

** selected = true; 选中

** selected = false;未选中

3、如果选中，把选择的添加到右边去

4、得到select2

5、添加选择的部分

* appendChild 方法

// 获取到select1 里面的option

// 得到select1

var select1 = document.getElementById("select1");

// 得到select2

var select2 = document.getElementById("select2");

// 得到option

var options1 = select1.getElementsByTagName("option");

// 遍历数组

for(var i=0;i<options1.length;i++) {

// 第一次循环i=0 length:5

// 第二次循环i=1 length:4

// 第三次循环i=2 length:3

// 再往后就不满足条件了后边的都循环不到了

var option1 = options1[i]; // 得到每一个option对象

// 判断是否被选中

if(option1.selected == true) {

// 添加到select2 里面

select2.appendChild(option1);

ich--; // Pay attention to this point, if you don’t write it, you will have problems

}

// 全部添加到右边

function allToRight() {

var select2 = document.getElementById("select2");

var select1 = document.getElementById("select1");

var options1 = select1.getElementsByTagName("option");

for(var i=0;i<options1.length;i++) {

var option1 = options1[i];

select2.appendChild(option1);

ich--;

}

// 右边的添加到左边的操作类似

</script>

</body>

案例：下拉框联动效果(省市联动)

** 创建一个页面，有两个下拉选择框

** 在第一个下拉框里面有一个事件：改变事件onchange事件

** 方法add1(this.value); 表示当前改变的option 里面的value值

** 创建一个二维数组，存储数据

** 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

**代码实现：

<body>

</select>

</select>

// 创建一个数组存储数据

// 使用二维数组

var arr = new Array(4);

arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];

arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];

arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];

arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];

function add1(val) {

/* 实现步骤：

1、遍历二维数组

2、得到的也是一个数组（国家对应关系）

3、拿到数组中的第一个值和传递过来开的值作比较

4、如果相同，获取到第一个值后面的元素

5、得到city 的select

6、添加过去使用appendChild 方法

** 需要创建option （三步操作）

// 由于每次都要向city里面添加option，第二次添加，前边第一次的会保留，追加

// 所以每次添加之前，判断一下city里面是否有option，如果有，删除

// 获取city 的select

var city1 = document.getElementById("cityid");

// 得到city 里面的option

var options1 = city1.getElementsByTagName("option");

// 遍历数组

for(var k=0;k<options1.length;k++) {

// 得到每一个option

var op = options1[k];

// 删除这个option 通过父节点删除

city1.removeChild(op);

k--;// 每次删除长度都会减一k都会增加一不执行此操作会出错

}

// 遍历二维数组

for(var i=0;i<arr.length;i++) {

// 得到二维数组里面的每一个数组

var arr1 = arr[i];

// 得到遍历之后的数组的第一个值

var firstvalue = arr1[0];

// 判断传递过来的值和第一个值是否相同

if(firstvalue == val) { // 相同

// 得到第一个值后面的元素

// 遍历数组arr1

for(var j=1;j<arr1.length;j++) {

var value1 = arr1[j]; // 得到国家之后城市的名称

// alert(value1);

// 创建option

var option1 = document.createElement("option");

// 创建文本

var text1 = document.createTextNode(value1);

// 把文本添加到option里面

option1.appendChild(text1);

// 添加值到city 的select 里面

city1.appendChild(option1);

}

</script>

</body>

The above JavaWeb Learning Notes Sharing (must-read) is all the content I share with you. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.