HTML5 presenta muchas características y mejoras nuevas, una de las cuales es la semántica. HTML5 agrega nuevos elementos para mejorar la semántica. Ahora estamos usando solo 2, encabezado y pie de página. La etiqueta <Header> define el encabezado (información de introducción) del documento, y la etiqueta <Tooter> define el pie de página de la sección o documento. Por lo general, este elemento contendrá el nombre del creador, la fecha de creación del documento y/o información de contacto.
[Las etiquetas semánticas proporcionan información significativa en HTML, no solo definen los efectos visuales. ]
El mejor lugar para colocar el código JavaScriptHay una razón por la que colocamos el código JavaScript después de todo el contenido de la página antes de la etiqueta </body>, en lugar de en el área <BEAD> </Et Head>.
Por lo general, los navegadores cargan y representan contenido de arriba a abajo. Si el código JavaScript se coloca en el área de la cabeza, el contenido del documento HTML no se cargará hasta que se cargue todo el código JavaScript. De hecho, toda la carga y la representación están bloqueadas si el navegador carga el código JavaScript en la página. Es por eso que ponemos el código JavaScript al final del documento para que podamos proporcionar un mayor rendimiento.
Al traducir este libro, la última versión de jQuery es 1.7 (las palabras originales son: a la hora de escribir este libro, Thelatest JQuery versión es 1.4.4. JQuery tiene una versión y versión de desarrollo, puede elegir como desee). Es por eso que el nombre del archivo jQuery en nuestro ejemplo de código es jQuery-1.7.min.js. Es posible que este número de versión no funcione como usa, pero el uso es el mismo a menos que jQuery tenga modificaciones importantes para que la nueva versión ya no sea compatible con retroceso.
Ejecute nuestro código una vez que la página esté listaNecesitamos asegurarnos de que la página esté lista antes de ejecutar nuestro código JavaScript. De lo contrario, recibiremos un error cuando intentemos acceder a elementos que no están cargados. JQuery nos proporciona un método para garantizar que la página esté cargada. El código es el siguiente:
jQuery (documento) .Ready (function () {
// CodeHe.
});
De hecho, solo necesitamos escribir esto:
$ (function () {
// CodeHe.
});
Esta etiqueta $ es la abreviatura de jQuery. Cuando llamamos (la palabra es el significado de llamada, zhuangability) $ (algo), en realidad estamos llamando a Jqery (algo).
$ (function_callback) es otra abreviatura para ReadyEvent.
Es lo mismo que el siguiente código:
$ (documento) .Ready (function_callback);
Del mismo modo, lo mismo que el siguiente:
jQuery (Ducment) .ready (function_callbak);
Prueba1. ¿Qué ubicación es más adecuada para colocar el código JavaScript?
a. Antes de la etiqueta <Head>
b. Inserte en el medio del elemento <HEAD> </head>.
do. Después de la etiqueta <body>
d. </body> antes de la etiqueta
Crear elementos del juego de Pingpong
Estamos listos para crear un juego de Pingpong.
Moverse
1. Continuaremos con nuestro ejemplo de instalación jQuery y abriremos index.html en el editor.
2. Luego, use el nodo Div en el cuerpo para crear una plataforma de juego, con 2 latidos y una pelota en la plataforma de juego:
<divid = "juego">
<divid = "parqueatario">
<divid = "paddlea" class = "paldy"> </div>
<divid = "paddleb" class = "paldy"> </div>
<divid = "ball"> </div>
</div>
</div>
3. Ahora hemos construido los objetos del juego y ahora les damos estilos. Pon el código en el elemento de la cabeza:
<estilo>
#patio de juegos{
Antecedentes:#e0ffe0;
Ancho: 400px;
Altura: 200px;
Posición: relativo;
desbordamiento: oculto;
}
#pelota{
Antecedentes: #fbb;
Posición: Absoluto;
Ancho: 20px;
Altura: 20px;
Izquierda: 150px;
arriba: 100px;
Border-Radius: 10px;
}
.paleta{
Antecedentes: #bbf;
Izquierda: 50px;
Arriba: 70px;
Posición: Absoluto;
Ancho: 30px;
Altura: 70px;
}
#paddleb {
Izquierda: 320px;
}
</style>
4. En la última parte, colocamos la lógica de JavaScript detrás de la referencia jQuery. Lo escribimos en un archivo separado porque nuestro código se hará cada vez más grande. Por lo tanto, necesitamos crear una carpeta llamada html5/"> html5games.pingpong.js.
5. Después de haber preparado los archivos JavaScript, necesitamos conectarlos a nuestro archivo HTML. Coloque el siguiente código frente a la etiqueta </body> del archivo index.html:
<scriptsrc = "js/jQuery-1.7.min.js"> </script>
<scriptsrc = "js/html5games.pingpong.js"> </script>
[Consejo amistoso del traductor: pruébalo
<scriptsrc = "js/jQuery-1.4.4.js"/>
<scriptsrc = "js/html5games.pingpong.js"/>
Encontrará que escribir de acuerdo con las especificaciones evitará muchos problemas]
6. Pusimos la lógica del juego en html5games.pingpong.js. Aquí está nuestra única lógica ahora, inicializando la raqueta:
// CodeInside $ (function () {} Willrunafterthedomisloadedand y
listo
$ (function () {
$ ("#PaddleB"). CSS ("Top", "20px");
$ ("#Paddlea"). CSS ("Top", "60px");
});
7. Ahora probemos nuestros resultados en el navegador. Abra el archivo index.html en el navegador, deberíamos ver una captura de pantalla similar a la siguiente captura de pantalla:
¿qué pasó?Hay 2 raquetas y 1 pelota en nuestro juego. También inicializamos la posición de 2 raquetas usando jQuery.
[Eso es todo hoy, y la siguiente parte es sobre JQuery Selector y la función CSS. Si tiene algún error o pregunta, déjame un mensaje]
¡Ver tus comentarios es mi mayor motivación!