HTML5 führt viele neue Funktionen und Verbesserungen vor, von denen eine Semantik ist. HTML5 fügt neue Elemente hinzu, um die Semantik zu verbessern. Wir verwenden jetzt nur 2, Header und Fußzeile. Das <header> Tag definiert den Header (Einführungsinformationen) des Dokuments, und das <fouter> Tag definiert die Fußzeile des Abschnitts oder des Dokuments. In der Regel enthält dieses Element den Namen des Erstellers, das Datum der Erstellung des Dokuments und/oder Kontaktinformationen.
[Semantische Tags liefern aussagekräftige Informationen in HTML, nicht nur visuelle Effekte. ]
Der beste Ort, um den JavaScript -Code zu platzierenEs gibt einen Grund, warum wir den JavaScript -Code nach allen Seiteninhalten vor dem </body> -Tag und nicht im Bereich <Head> </head> vorlegen.
In der Regel laden und rendern Browser Inhalte von oben nach unten. Wenn der JavaScript -Code im Kopfbereich platziert ist, wird der Inhalt des HTML -Dokuments erst geladen, wenn der gesamte JavaScript -Code geladen wird. In der Tat werden alle Lade- und Rendering blockiert, wenn der Browser den JavaScript -Code auf der Seite lädt. Aus diesem Grund setzen wir JavaScript -Code am Ende des Dokuments ein, damit wir eine höhere Leistung liefern können.
Bei der Übersetzung dieses Buches lautet die neueste JQuery -Version 1.7 (die Originalwörter sind: Athetime des Schreibens dieses Buches, Thelatest JQuery -Version lautet 1.4.4. Aus diesem Grund lautet der Name der JQuery-Datei in unserem Code-Beispiel jQuery-1.7.min.js. Diese Versionsnummer funktioniert möglicherweise nicht, wie Sie es verwenden, aber die Verwendung ist dieselbe, es sei denn, JQuery enthält wichtige Änderungen, um die neue Version nicht mehr rückwärtskompatibel zu machen.
Führen Sie unseren Code aus, sobald die Seite fertig istWir müssen sicherstellen, dass die Seite fertig ist, bevor wir unseren JavaScript -Code ausführen. Andernfalls werden wir einen Fehler erhalten, wenn wir versuchen, auf Elemente zuzugreifen, die nicht geladen werden. JQuery bietet uns eine Methode, um sicherzustellen, dass die Seite geladen wird. Der Code ist wie folgt:
JQuery (Dokument) .Ready (function () {
// Codehere.
});
Tatsächlich müssen wir nur schreiben:
$ (function () {
// Codehere.
});
Dieses $ -T -Tag ist die Abkürzung von JQuery. Wenn wir anrufen (das Wort ist die Bedeutung von Call, Zhuangability) $ (etwas), nennen wir tatsächlich Jqery (etwas).
$ (function_callback) ist eine weitere Abkürzung für ReadyEvent.
Es ist dasselbe wie der folgende Code:
$ (Dokument) .Ready (function_callback);
Ebenso das gleiche wie folgt:
JQuery (DUCMENT) .READY (FUNKTION_CALLBAK);
Quiz1. Welcher Ort ist am besten zum Platzieren von JavaScript -Code geeignet?
A. Vor dem <kopf> tag
B. Einlegen Sie in die Mitte des Elements <Head> </head>.
C. Nach dem <body> Tag
d. </body> vor dem Tag
Erstellen Sie Elemente des PingPong -Spiels
Wir sind bereit, ein PingPong -Spiel zu erstellen.
Sich bewegen
1. Wir werden mit unserem JQuery -Installationsbeispiel fortfahren und Index.html im Editor öffnen.
2. Verwenden Sie dann den Div -Knoten im Körper, um eine Spielplattform mit 2 Schlägen und einem Ball in der Spielplattform zu erstellen:
<divid = "game">
<divid = "Playground">
<divid = "paddlea" class = "paddle"> </div>
<divid = "paddleb" class = "paddle"> </div>
<divid = "ball"> </div>
</div>
</div>
3. Wir haben jetzt die Spielobjekte gebaut und geben ihnen jetzt Stile. Geben Sie den Code in das Kopfelement ein:
<Styles>
#Spielplatz{
Hintergrund:#e0ffe0;
Breite: 400px;
Höhe: 200px;
Position: Relativ;
Überlauf: versteckt;
}
#Ball{
Hintergrund: #fbb;
Position: absolut;
Breite: 20px;
Höhe: 20px;
links: 150px;
Oben: 100px;
Border-Radius: 10px;
}
.paddeln{
Hintergrund: #bbf;
links: 50px;
Top: 70px;
Position: absolut;
Breite: 30px;
Höhe: 70px;
}
#paddleb {
links: 320px;
}
</style>
V. Wir schreiben es in eine separate Datei, weil unser Code immer größer wird. Daher müssen wir einen Ordner mit dem Namen html5/"> html5games.pingpong.js erstellen.
5. Nachdem wir die JavaScript -Dateien erstellt haben, müssen wir sie mit unserer HTML -Datei verbinden. Platzieren Sie den folgenden Code vor dem </body> Tag der Index.html -Datei:
<scriptSrc = "js/jQuery-1.7.min.js"> </script>
<scriptSrc = "js/html5games.pingpong.js"> </script>
[Freundlicher Tipp des Übersetzers: Probieren Sie es aus
<scriptSrc = "js/jQuery-1.4.4.js"/>
<scriptSrc = "js/html5games.pingpong.js"/>
Sie werden feststellen, dass das Schreiben gemäß den Spezifikationen viel Ärger vermeiden wird.
6. Wir haben die Spiellogik in html5games.pingpong.js eingelegt. Hier ist jetzt unsere einzige Logik, in der der Schläger initialisiert wird:
// Codeeinside $ (function () {} WillrunAfterThedOmisloaded und
bereit
$ (function () {
$ ("#paddleb"). CSS ("Top", "20px");
$ ("#paddlea"). CSS ("Top", "60px");
});
7. Testen wir jetzt unsere Ergebnisse im Browser. Öffnen Sie die Index.html -Datei im Browser, wir sollten einen Screenshot sehen, der dem folgenden Screenshot ähnelt:
was ist passiert?Es gibt 2 Schläger und 1 Ball in unserem Spiel. Wir haben auch die Position von 2 Schlägen mit JQuery initialisiert.
[Das ist alles heute, und im nächsten Teil handelt es sich um die Funktion JQuery Selector und CSS. Wenn Sie Fehler oder Fragen haben, hinterlassen Sie mir bitte eine Nachricht.
Ihre Kommentare zu sehen ist meine größte Motivation!