Tutoriales • jQuery
jQuery - Un marco de JavaScript con muchas ventajas - Parte 1: El "nivel de entrada" - un pequeño ejemplo primero
1996 ("web-Edad de Piedra"), que han comenzado a crear los primeros sitios en Internet - un momento en que soñé con las oportunidades de hoy en día ni siquiera tienen ".
Casi 15 años después (ok me ne '"web abuela" de la mañana :-)) ha cambiado mucho la WWWelt. La combinación de (X) HTML, CSS (3) y JavaScript y el soporte del navegador correspondiente ofrecen posibilidades casi ilimitadas en la apariencia y funcionalidad.
Un gran alivio y asistencia también son distintos marcos de Javascript.
Provocó una serie de artículos sobre el framework javascript jQuery
Las secciones de este post:
<Ejemplo> <HTML <Código <CSS <Código <jQuery <Código <Descargar> <otras Beispiele>
¿Qué es un marco de JavaScript y qué ventajas tiene el uso?
Marcos (estructura del marco, el tono, la estructura básica ...) en términos de lenguajes de programación o de scripting, las bibliotecas, las tareas und-/oder recurrentes básicos se resumen en funciones.
Facilita el uso de un marco y acelera el desarrollo de sus propias secuencias de comandos y funciones, porque se puede recurrir a sus pre-probadas funciones sin "reinventar la rueda" a tener.
Frameworks de JavaScript tiene que tener por lo general una sola implementación de la función de los diferentes navegadores.
Esto proporciona a los desarrolladores y diseñadores web un gran alivio y ahorro de tiempo en las pruebas de sitios web en distintos navegadores web.
¿Por qué es jQuery?
En esta serie de artículos que tengo para el jQuery JavaScript marco elegido porque tiene al lado de su actuación también tiene una prevalencia muy elevada, esto implica las siguientes ventajas.:
- Hay una gran variedad de acabados, que puedan utilizarse sin plug-ins (por ejemplo, regulador de la imagen forma-tester, clasificadores de mesa, etc) que pueden utilizarse directamente
- Las altas tasas también proporciona una mejora constante, (informe de error)
- Hay un montón de información y tutoriales sobre jQuery
- jQuery es también para las personas sin conocimientos de programación para aprender rápida y fácilmente
Para empezar, estos son en los ojos (junto con la velocidad y funcionalidad), los tres aspectos más importantes. Además, todos los marcos javascript trabajar en un principio similar. Entonces, ¿quién se ocupa de jQuery y aprenderá más tarde en un marco diferente umsteigt como en casa.
Personalmente, yo trabajo de acuerdo a proyectos y tareas con diferentes marcos (por ejemplo, ExtJS para el desarrollo de aplicaciones y soluciones de intranet), pero en la creación de sitios de los clientes más a menudo asociados con jQuery muy alto debido a la propagación.
Para empezar, el primer ejemplo pequeño de jQuery
<haga HTML <Código <haga CSS <Código <haga jQuery <Código <haga download>
Para que os hagáis una idea de cuáles son las oportunidades que puede hacer jQuery proporciona un ejemplo sencillo primero a continuación.
El código de jQuery:
$ (Document). Ready (function () { $ ('# Demo_button1'). Haga clic en (function () { $ ('Div.demo_absatz1') AddClass ('marrón') show ("lento") ..; }); });
DEMO - ejecutar código DEMO reinicio
Hola, soy un DIV HTML con clase "demo_absatz1" después de pinchar en el botón DEMO es visible.
Si hace clic en el botón Demo, me sale una nueva clase CSS que se en primer lugar (marrón) y, finalmente, aparecerán en una animación lenta.
No se ve? Simplemente "restablecer DEMO" y vuelve a intentarlo!
El código en detalle
Este ejemplo consta de 3 partes:
- El código HTML (por ejemplo, en el demo1.html archivo)
- El código CSS para el diseño (en el demos.css archivo)
- El código de jQuery (en archivo de demos.js)
Nota:
Va a encontrar los ejemplos de cada uno de el código completo para que pueda entender van juntos.
Yo no soy un defensor para que escriban el código CSS y Javascript en el documento. Externalizar sus proyectos web en el código en archivos separados.
El código HTML
<haga Beispiel> <haga CSS <Código <haga jQuery <Código <haga download>
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http :/ / www.w3.org/1999/xhtml "dir =" ltr "lang =" es-ES "> La primera <head> <title> jQueryBeispiel </ title> <link rel = 'estilo' href = '/ texto '= tipo' demos.css / css "media =" all "/> </ head> <a id="demo_button1" class="demo_button" href="#"> DEMO - ejecutar código </ a > <div class="demo_absatz1"> <strong> Hola, soy un HTML DIV con el id "demo_absatz1" después de pinchar en el botón DEMO es visible. </ strong> </ p> Si hace clic en el botón Demo, me sale una nueva clase CSS Usted primero (marrón) y, finalmente, aparecerán en una animación lenta. No </ p> visto? "Restablecer DEMO" Basta con hacer clic y vuelva a intentarlo </ p> </ div> <tipo de script = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4. 2/jquery.min.js "> </ script> <script type='text/javascript' src='/demos.js'> </ script> </ body> </ html>
Considere el código HTML de un poco más de cerca:
Línea 5: Esta línea de código CSS externalizado de las demos.css archivo cargado. Dependiendo de dónde se almacenan los archivos, debe establecer el "src" URL puede cambiar todavía.
Dentro de las etiquetas del cuerpo (líneas 8-14), ver las etiquetas HTML para el siguiente ejemplo.
Línea 8: Comienza con un "<a>" día (un vínculo), que se le ha asignado id "demo_button1". Este debe ser un ID identificador único en su documento HTML. Esta identificación es más adelante en el código de jQuery para encontrar claramente relevante para el enlace.
El enlace también se ha asignado una clase CSS (clase). "Demo_button" en este caso. Esta clase estará en el código CSS utilizado para crear el elemento.
Línea de 10/Zeile 14: Aquí se encuentra un "<div>" días (una caja) de la clase CSS "demo_absatz1" se le asignó. Esta clase se utiliza en el código CSS para el diseño del elemento y el código jQuery para su identificación.
Líneas 11-13: He aquí el texto que más tarde se muestra en el cuadro. Es el formato en 3 párrafos <p>). Este es el contenido puro, que no es para el código CSS y jQuery de significado.
Línea 16: Aquí es muy importante, porque una vez activado, el framework jQuery. En este ejemplo, estoy fuera del marco a través de Liberaciones de Google ha decidido integrar. Puede, por supuesto, la versión actual de jQuery en su copia de la tela, sino que debe ser el "src" dirección URL correspondiente.
Línea 17: Aquí está el archivo JavaScript "demos.js" en el que se carga el código jQuery de mi servidor web. Dependiendo de dónde se almacenan los datos, usted debe ajustar el "src" URL si es necesario.
Los archivos se cargan sólo al final, porque las acciones se ejecutan con jQuery después de cargar el código HTML y CSS. Carga de los archivos javascript terminar ahorrando tiempo de carga antes de la construcción del documento HTML.
El código CSS:
<haga Beispiel> <haga HTML <Código <haga jQuery <Código <haga download>
. Demo_absatz1 { display: none; padding: 10px 20px; border: 1px solid # ccc; color: # 000; -Moz-border-radius: 15px; -Webkit-border-radius: 15px; border-radius: 15px; } . Brown { color: # FFF; background-color: # 847d6b; border-top: 15px sólidos # 212 421; } {A.demo_button padding: 10px 4px 4px 8px; background-color: # c6c700; color: # FFF; font-weight: bold; border: 1px solid # ccc; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; border-radius: 5px; text-decoration: none; }
El código CSS bajo el microscopio:
Línea 1-10: Aquí está la clase "demo_absatz1" definido. Además del diseño atribuye a encontrar una entrada correspondiente en la línea 2: "display: none". Esto significa que todos los elementos de los cuales se les ha asignado esta clase en la pantalla no son visibles (en el código HTML ya).
Nuestra caja es también la carga de documentos HTML invisible.
Línea 11-15: La clase "marrón" aparecido previamente en el documento HTML no es así. Más tarde se utiliza para colocar la caja en el Salón del más distinto.
Línea 16-28: Aquí se encuentran los atributos de diseño del enlace "DEMO - ejecutar código", que era la clase de "demo-botón" asignado.
Los atributos de diseño individuales que me gustaría en primer lugar, no va más allá. Principiantes de CSS puede buscar los atributos por ejemplo, en www.css4you.de.
Como un recordatorio, una vez más el código jQuery
<haga Beispiel> <haga HTML <Código <haga CSS <Código <haga download>
$ (Document). Ready (function () { $ ('# Demo_button1'). Haga clic en (function () { $ ('Div.demo_absatz1') AddClass ('marrón') show ("lento") ..; }); });
Ahora se pone interesante: El código de jQuery con mayor precisión en cuenta:
Lo que cada uno pueda darse cuenta de inmediato que el código es relativamente corto - el lema jquery equivalente "Escribe menos, hacer más".
jQuery es Javascript. Todas las características del marco son llamados a partir de "jQuery" o la abreviatura "$".
Línea 1 y 5: ". $ (Document) listos" significa "Si se carga el documento (todos los elementos HTML) ejecutar la siguiente función ..."
En esta función se debe incluir de cualquier código de jQuery se define en los elementos en el documento HTML se refiere.
Línea 2 y 4: "Si el elemento HTML con id" demo_button1 "se hace clic, ejecutar la siguiente función ..."
"# Demo_button1" es un selector - de los cuales hay una gran cantidad de jQuery, que pasará a otras partes de esta serie de artículos en más detalle.
# Es la identificación de una identificación
Con este selector se puede identificar claramente un elemento de su código HTML.
Línea 3: "... Todas las cajas DIV con la clase" demo_absatz1 "obtener una nueva clase de CSS llamado" marrón "y aparecerá poco a poco."
En esta línea, un selector más se utiliza "div.demo_absatz1". En contraste con la anterior, esto no es único, no puede ser asignado en nuestro documento HTML también varias cajas div class "demo_absatz1" (esto no es así, pero podría ser :-)).
En este caso, la acción se aplica a todos estos elementos.
"AddClass" ha encontrado los elementos de otra clase llamada "marrón" a (Ver línea de código CSS 11-15) y cambia el color de la caja.
Eso es todo ...
Unas pequeñas modificaciones ...
Efecto ... y otro!
En lugar de "espectáculo" que usamos "slideIn"
$ (Document). Ready (function () { $ ('# Demo_button2'). Haga clic en (function () { $ ('Div.demo_absatz2') AddClass ('marrón') se deslizan hacia abajo ("lento") ..; }); });
DEMO - ejecutar código DEMO reinicio
Hola, soy un DIV HTML con clase "demo_absatz2" después de pinchar en el botón DEMO es visible.
Si hace clic en el botón Demo, me sale una nueva clase CSS que se en primer lugar (marrón) y, finalmente, aparecerán en una animación lenta.
No se ve? Simplemente "restablecer DEMO" y vuelve a intentarlo!
En lugar de "espectáculo" que se vaciamiento "fadeIn"
$ (Document). Ready (function () { $ ('# Demo_button3'). Haga clic en (function () { $ ('Div.demo_absatz3') AddClass ('marrón') fadeIn ("lento") ..; }); });
DEMO - ejecutar código DEMO reinicio
Hola, soy un DIV HTML con clase "demo_absatz3" después de pinchar en el botón DEMO es visible.
Si hace clic en el botón Demo, me sale una nueva clase CSS que se en primer lugar (marrón) y, finalmente, aparecerán en una animación lenta.
No se ve? Simplemente "restablecer DEMO" y vuelve a intentarlo!
"Tres a la vez"
En este ejemplo hay 3 secciones ocultas son todos la misma clase "demo_absatz4" tienen.
Con un clic en "Ejecutar código de demostración" por esta razón todos los Open de la existencia en el selector de tres ve para la clase.
$ (Document). Ready (function () { $ ('# Demo_button4'). Haga clic en (function () { $ ('Div.demo_absatz4') AddClass ('marrón') fadeIn ("lento") ..; }); });
DEMO - ejecutar código DEMO reinicio
Hola, yo soy el primero HTML DIV con la clase "demo_absatz4" después de pinchar en el botón DEMO es visible.
Si hace clic en el botón Demo, me sale una nueva clase CSS que se en primer lugar (marrón) y, finalmente, aparecerán en una animación lenta.
No se ve? Simplemente "restablecer DEMO" y vuelve a intentarlo!
Sí que es el segundo ventas ocultas?
Hola, yo soy el segundo HTML DIV con la clase "demo_absatz4" después de pinchar en el botón DEMO es visible.
Sí que es la tercera ventas ocultas?
Hola, yo soy el tercero HTML DIV con la clase "demo_absatz4" después de pinchar en el botón DEMO es visible.
No se ve? Simplemente "restablecer DEMO" y vuelve a intentarlo!
Conclusión:
<haga Beispiel> <haga HTML <Código <haga CSS <Código <haga jQuery <Código <haga download>
jQuery, CSS y HTML están estrechamente vinculadas y ...
.... eso no es todo tan difícil 
Puedo encontrar algunas ideas buenas que tiene con este ejemplo de jQuery simple, el principio y algunos son ventajas reales a la WWWelt cambio.
Descargar:
Usted puede utilizar el código de las secciones de código anteriores o directamente copiar un archivo zip con los 3 archivos (. HTML. CSS y JS.) Aquí.
hpv24_jquery_beispiel1 (224)
Dale una oportunidad!
1 voto / s, grado medio: 6,00 estrellas de máx. 6 estrellas posibles
Cargando ... 
