Detaillierte Erläuterung der Skript -Beschriftung und Zugriff auf die HTML -Seite

Autor：Eve Cole Aktualisierungszeit：2025-03-15 18:00:04

Kopieren Sie den Code -Code wie folgt:

<img src = "1_nder1000.jpg" id = "img2" onclick = "alert ('Onclick');

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

Alarm (img2.onmouseover);

// Die folgenden Bilder ausgeben

</script>

Dh Output:

Firefox:

Kopieren Sie den Code -Code wie folgt:

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

img1.onmouseover = drehen;

Funktion rotate () {) {

this.src = '1_yylklshmyt20090217.jpg';

}

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

img1.onmouseover = onmouseover;

Funktion onmouseover (Ereignis) {

this.src = '1_yylklshmyt20090217.jpg';

}

// Tatsächlich ist das Dokument.

/* var img1 = {src: "1_nder1000.jpg" ,,

ID: "IMG1",

Alt: "" ,,

Titel: "Umkehrbild"

}*/

</script>

Kopieren Sie den Code -Code wie folgt:

< %@Page Language = "C#" autoeEventwireUp = "true" codeBehind = "webform1.aspx.cs" inherits = "webapplication1.webform1" %>

<title> Nicht -Title -Seite </title>

// Alle Attribute des Cycle IMG -Bildes sehen Sie viele unspezifische Attribute, die nicht definiert sind

Window.onload = repeat;

Function repep () {) {)

var img1 = document.getElementById ('img1');

für (var i in img1) {

alarm (i+":"+img1 [i]);

}

</script>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

Skriptbezeichnung und Zugriff auf HTML -Seite

Skript -Tag

Das Skript -Tag wird in der HTML -Seite verwendet, die in einige offensichtliche Skripte eingebettet ist

// Ein Skript geht hierher

</Script> Skriptkennzeichnung enthält drei spezielle Attribute (natürlich auch Attribute wie ID, Klasse und fast jedes Element auf der HTML -Seite kann Klasse, ID -Attribute))))

// Es hat drei gemeinsame Werte JavaScript, Jscript, VBScript

// Ein Skript geht hierher

</script>

// Nur der IE kann für Jscript erkannt werden, und andere Browser ignorieren den Inhalt dieses Etiketts

// Für VBScript kann nur der IE unter Windows erkannt werden, ausgeführt werden

// Das Sprachattribut wurde jedoch später durch das Typattribut in XHTML ersetzt

<skript type = "text/javaScript"> //

// Ein Skript geht hierher

</Script> In dem Webbrowser werden wir nur JavaScript verwenden, um die Eigenschaft in Text/JavaScript zu geben. JavaScript

Alarm ("Hallo!");

</script>

// Der obige Code wird in der Art und Weise ausgeführt, wie JavaScript in JavaScript ausgeführt wird

// Auch wenn es IE gibt, wird der Skriptblock ohne Deklarationen als JavaScript durchgeführt, nicht als VBScript

msgbox "Hallo!"

</script>

// 上面的代码在 dh 中也会报错, dh 也会将其当成 JavaScript 执行以前在 html 页面中, 一些标签常会加一些诸如 Onclick, Onmouseover 这样的属性, 这是一种事件绑定 (关于事件,, Wir werden in Zukunft ausführlich erklären, mach dir keine Sorgen). )

<img src = "../ bilder/stack_heap.jpg" onclick = "alert ('Sie haben mich verletzt!"/> Der Code zeigt ein Bild auf der HTML -Seite an, wenn Sie auf die Mausklicks klicken. Zu diesem Zeitpunkt. Es wird ein Pop -UP -Fenster geben, in dem Sie "Sie verletzen" zeigen, der Wert des Onclick -Attributs ist tatsächlich ein JavaScript -Code.

Onclick führen Sie es einmal aus, wenn die Maus geklickt wird

Onmouseover, einmal ausführen, wenn die Maus aufgestellt wird

Onmouseout einmal ausführen, wenn sich die Maus auszieht

Onmousetown, führen Sie es einmal aus, wenn die Maus gedrückt wird

OnmouseUp, einmal ausführen, wenn die Maus veröffentlicht wird (Sprungbrett)

OnmousedBlclick, einmal ausführen, wenn die Maus doppelte Klick

Online führen Sie einmal aus, wenn das Objekt geladen wird

Der Effekt, im Internet zuvor beliebt zu sein

<img src = "../ Bilder/ stack_heap.jpg"

onmouseover = "this.src = '../images/over.jpg'"

onmouseout = "this.src = '../ Bilder/out.jpg'"/> Sie wissen vielleicht, String in Attributen wie OnmouseOver wird zum Zeitpunkt des Vorfalls als Skript ausgeführt, der obige Code ist jedoch abhängig von der Code oben ist sehr vage

// Um es einfach zu sehen, werden wir sie unten extrahieren

this.src = '../images/over.jpg'

This.src = '../images/out.jpg' analysiert den obigen Code Dieses Objekt ist ein Objekt, das immer existiert. Für das folgende IMG -Tag wird es in das folgende Objekt analysiert:

// Beachten Sie, dass dies tatsächlich nicht manuell zugewiesen oder manuell deklariert werden kann.

this = {

SRC: "../ Bilder/ stack_heap.jpg" ,,

Alt: "Speicherstapel",

Onclick: "Alert ('Hallo!')",

Tagname: "Img"

};

// Tatsächlich werden nicht nur diese Attribute, IMG -Tags als Objekt mit Attributen wie SRC, ALT, SRC, ALT -Attributen in HTML geschrieben, und TagName wird automatisch vom System angezeigt. Der Label -Label -Name!

<img src = "../ Bilder/stack_heap.jpg" onclick = "alert (this.src); alert (this.tagname); Der Bildeffekt des Bildes war einfach erfolgreich

Es gibt eine gewisse Beachtung einer solchen In -line -Ereignisbindung.

<kopf>

Funktion myfn () {

alarm ("Das Bild ist geladen!");

}

</script>

</head>

// ................ Nach mehreren Code

<img src = "../ Bilder/stack_heap.jpg" online = "myfn ()" /// Wenn das Bild erfolgreich geladen wird

Die obige Codeausführung ist in Ordnung, aber die Bestellung wird umgedreht (Skript kann an jedem rechtlichen Ort platziert werden)

<img src = "../ Bilder/stack_heap.jpg" online = "myfn ()" /// Wenn das Bild erfolgreich geladen wird

// ................ Nach mehreren Code

Funktion myfn () {

alarm ("Das Bild ist geladen!");

}

</Script> HTML -Seite wird von oben nach unten geladen und ausgeführt. ; Deshalb ist das Skript -Etikett das Skriptteil in den Kopfteil, da der Kopf vor dem Körper, wenn das Element im Körper geladen ist, das Skript im Kopf definitiv geladen wird.

Aber dann gab es XHTML, mit "drei Schichten der Trennung", W3C, DOM2, wir müssen Ereignisse auf andere Weise binden und HTML -Seitenelemente erhalten.

<kopf>

var img = document.getElementById ("myimg");

//document.getElementById -Methode hat einen Parameter, eine String -ID

// dann bedeutet IMG dieses Bildbezeichnungsobjekt

img.onclight = myfn;

/*Geben wir den JavaScript -Code nicht mit dem Zeichenfolge -Zeichenwert an seine Onclick -Eigenschaft an

Es ist direkt zugewiesen, um ihm einen Funktionsnamen zu geben

Sie werden auch sagen, warum nicht img.onclick = myfn ();

Weil es jetzt im Bereich JavaScript -Code ist

Fügen Sie "()" hinzu, um diese Funktion anzugeben, und geben Sie dann den Rückgabewert dieser Funktion an iMg.onclick*/ an

Funktion myfn () {

alarm ("Das Bild ist geladen!");

}

</script>

</head>

// .......

// Wir fügen das Onclick -Attribut nicht mehr hinzu, sondern geben ihm eine ID an

Der obige Code macht jedoch noch einen Fehler, da HTML beim Laden in das Skript nicht geladen wird. Der Körperteil wird nicht nach unten geladen, und JavaScript wird beim Surfen automatisch ausgeführt. Noch geladen, gibt es Fehler. Ein leeres Objekt, so dass es hier einen Fehler betrifft!

// .................... Nach mehreren Code

var img = document.getElementById ("myimg");

// Zu diesem Zeitpunkt wird das IMG -Tag beim Laden in das Skript definitiv geladen, da die Position des Skripts im IMG -Tag definitiv geladen wird

img.onclight = myfn;

Funktion myfn () {

alarm ("Das Bild ist geladen!");

}

</Script> aber der Standard wird immer noch empfohlen, das Skript auf den Kopf zu setzen!

Window.onload = initall;

// Fenster repräsentiert das Fensterobjekt.

Funktion initial () {

var img = document.getElementById ("myimg");

img.onclight = myfn;

Funktion myfn () {

alarm ("Das Bild ist geladen!");

}

} Also ist der Code nicht falsch.

Besuchen Sie die HTML -Seite: HTML DOM

HTML DOM verwendet die gesamte Seite als Dokumentobjekt.

<p id = "p1"> Wir verwenden ein P -Tag, um </p> in das folgende Objekt konvertiert zu werden

// Erinnerst du dich immer an die wörtliche Grammitätsgrammatik des Objekts, oder?

{{{{

Tagname: "P",

Klassenname: "Demo",

Titel: "Der erste Absatz: Dom Tree",

ID: "P1",

Innerhtml: "Wir verwenden ein P -Label, um zu demonstrieren"

}

// Sie können seltsam sein, warum das Klassenattribut des Etiketts zum ClassName -Attribut des Objekts anstelle der Klasse wird.

// Klasse ist JavaScript reservierte Wörter !!!

// tagname repräsentiert seinen Labelnamen, und Innerhtml bedeutet, dass der HTML -Code darin durchsucht wird, die HTML Greifen Sie auf dieses Objekt zu !!

// Fügen Sie zuerst eine ID zum Etikett hinzu und verwenden Sie dann das Dokument.GetElementById -Methode, um darauf zuzugreifen

Window.onload = initall;

Funktion initial () {

var p = document.getElementById ("p1");

Alert (P.ClassName);

Alert (P.tagname);

Alarm (p.tital);

Alarm (p.id);

Alarm (P.innerhtml);

} Zugriff auf die HTML -Seite ist so einfach!

Window.onload = initall;

Funktion initial () {

var p = document.getElementById ("p1");

P.Title = "JavaScript";

P.ClassName = "Load";

} Verwenden Sie diese, wir können bereits etwas Aufregendes tun!

// einige CSS

.oder {

Farbe: Rot;

Hintergrund: Blau;

Schriftgröße: größer;

}

.aus {

Farbe: Schwarz;

Hintergrund: weiß;

Schriftgröße: kleiner;

}

.click {{{

Farbe: Gelb;

Hintergrund: Gelb;

Schriftgröße: 12px;

}

// HTML -Code

<p id = "p1"> Eine große Textzeile, sie sind alle gewöhnliche Text

// JavaScript -Code

Window.onload = initall;

Funktion initial () {

var p = document.getElementById ("p1");

p.onclick = clickFn;

p.onmouseover = overfn;

p.onmouseout = outfn;

}

Funktion ClickFn () {

This.className = "Click";

// Beachten Sie, dass es Klassenname ist, keine Klasse

}

Funktion overfn () {

this.className = "Over";

}

Funktion outfn () {

this.className = "out";

} Natürlich können Sie Seitenelemente nicht nur diese Methode erhalten. Name des ID -Namens ist der einzige, und die meisten Labelnamen sind gleich. Die GetElementsByTagName Elemente ähnlich einem Array.

Window.onload = initall;

Funktion initial () {

var plist = document.getElementsByTagName ("p");

// Warum müssen Sie ein Kapital P verwenden?

Alarm (Plist.Length);

Alarm (plist [0] .ernerhtml);

} Zusätzlich können Sie für das Dokument.

Window.onload = initall;

Funktion initial () {

var allthings = document.body.getElementsByTagName ("*");

// Sie können die GetElements -Bytagname -Methode auf einem DOM -Element aufrufen.

ALERT (ALLTHINGS.LANGE);

Alarm (Allthings [3] .ernerhtml);

} Other-JavaScript: Pseudo-Protokoll

Das Pseudo -Protocol unterscheidet sich von der tatsächlichen Existenz im Internet, wie z. B. http: //, https: //, ftp: //, aber für zugehörige Anwendungen. :

Wir können "JavaScript: Alert ('JS!') Eingeben. und der Ergebniswert wird auf die aktuelle Seite zurückgegeben

In ähnlicher Weise können wir das JavaScript -Pseudo -Protokoll im HREF -Attribut des A -Tags verwenden

// Klicken Sie auf den Link auf dieser Seite.

<A href = "javaScript: window.prompt ('Eingabinhalt ersetzt die aktuelle Seite!', '');"> A </a> Lösung ist sehr einfach

// Fügen Sie dem Ende undefiniert, obwohl das JavaScript -Pseudo -Protokoll eine gewisse Flexibilität bietet, aber versuchen Sie, es nicht auf der Seite zu verwenden!