Introducción
HTML, CSS y JavaScript son los tres lenguajes fundamentales de la web. Estructuramos nuestros sitios web con HTML, los diseñamos con CSS y agregamos funcionalidad interactiva con JavaScript. De hecho, la mayoría de las animaciones y cualquier acción que ocurre como resultado de un usuario haciendo clic, flotando o desplazándose se construyen con JavaScript.
jQuery es la biblioteca JavaScript» escribir menos, hacer más». No es un lenguaje de programación, sino más bien una herramienta utilizada para hacer que la escritura de tareas comunes de JavaScript sea más concisa., jQuery tiene el beneficio adicional de ser compatible con varios navegadores, lo que significa que puede estar seguro de que la salida de su código se renderizará según lo previsto en cualquier navegador moderno.
comparando un simple » Hello, World!»programa en JavaScript y jQuery, podemos ver la diferencia de cómo ambos están escritos.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");en Este ejemplo se muestra cómo jQuery se puede lograr el mismo resultado final en formato JavaScript de manera sintetizada.,
objetivos
esta guía no asume ningún conocimiento previo de jQuery, y cubrirá los siguientes temas:
- Cómo instalar jQuery en un proyecto web.
- Las definiciones de conceptos importantes de desarrollo web como API, DOM y CDN.
- Selectores, eventos y efectos comunes de jQuery.
- Ejemplos para probar los conceptos aprendidos a lo largo del artículo.
requisitos previos
antes de comenzar esta guía, necesitará lo siguiente:
- Un conocimiento básico de HTML y CSS., Usted ya debe saber cómo configurar un sitio web simple, y tener una comprensión de los selectores CSS como ids, clases y pseudo elementos.
- Una comprensión de los fundamentos de la programación. Si bien es posible comenzar a escribir jQuery sin un conocimiento avanzado de JavaScript, la familiaridad con los conceptos de variables y tipos de datos, así como las matemáticas y la lógica ayudará significativamente.
configurar jQuery
jQuery es un archivo JavaScript al que enlazará en su HTML. Hay dos formas de incluir jQuery en un proyecto:
- Descargar una copia local.,
- enlace a un archivo a través de la red de entrega de contenido (CDN).
nota: una red de entrega de contenido (CDN) es un sistema de múltiples servidores que entregan contenido web a un usuario en función de la ubicación geográfica. Cuando se vincula a un archivo jQuery alojado a través de CDN, potencialmente llegará más rápido y de manera más eficiente al usuario que si lo alojara en su propio servidor.
usaremos la CDN para hacer referencia a jQuery en nuestros ejemplos. Puede encontrar la última versión de jQuery en las bibliotecas alojadas de Google., Si en cambio desea descargarlo, puede obtener una copia de jQuery desde el sitio web oficial.
comenzaremos este ejercicio creando un pequeño proyecto web. Constará de style.css en el css/ directorio scripts.js en el js/ el directorio, y una de las principales index.html en la raíz del proyecto.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlPara empezar, hacer un esqueleto HTML y guardarlo como index.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>enlace a la CDN de jQuery justo antes del cierre </body>, seguido de su propio archivo JavaScript personalizado, scripts.js.
su archivo JavaScript (scripts.js) debe incluirse debajo de la biblioteca jQuery en el documento o no funcionará.
Nota: Si ha descargado una copia local de jQuery, guárdela en su carpeta js/ y enlace a ella en js/jquery.min.js.,
en este punto, la biblioteca jQuery se está cargando en su sitio y tiene acceso completo a la API de jQuery.
Nota: Una interfaz de programación de aplicaciones (API) es una interfaz que permite a los programas de software interactuar entre sí. En este caso, la API para jQuery contiene toda la información y documentación necesaria para acceder a jQuery.
utilizando jQuery
en su núcleo, jQuery se utiliza para conectarse con elementos HTML en el navegador a través del DOM.,
el modelo de objetos de documento (DOM) es el método por el cual JavaScript (y jQuery) interactúan con el HTML en un navegador. Para ver exactamente qué es el DOM, en su navegador web, haga clic derecho en la página web actual, seleccione Inspeccionar. Esto abrirá las herramientas para desarrolladores. El código HTML que ves aquí es el DOM.
Cada elemento HTML se considera un nodo en el DOM – un objeto que JavaScript puede tocar. Estos objetos están dispuestos en una estructura de árbol, con <html> más cerca de la raíz, y cada elemento anidado es una rama más a lo largo del árbol., JavaScript puede Agregar, Eliminar y cambiar cualquiera de estos elementos.
si hace clic con el botón derecho en el sitio nuevamente y hace clic en Ver fuente de Página, verá la salida HTML sin procesar del sitio web. Al principio es fácil confundir el DOM con la fuente HTML, pero son diferentes: la fuente de página es exactamente lo que está escrito en el archivo HTML. Es estático y no cambiará, y no se verá afectado por JavaScript. El DOM es dinámico y puede cambiar.
la capa más externa del DOM, la capa que envuelve todo el nodo <html>, es el objeto document., Para comenzar a manipular la página con jQuery, primero debemos asegurarnos de que el documento esté «listo».
cree el archivo scripts.js en su directorio js/ y escriba el siguiente código:
$(document).ready(function() { // all custom jQuery will go here});todo el código de jQuery que escriba estará envuelto en el código anterior. jQuery detectará este estado de preparación para que el código incluido dentro de esta función solo se ejecute una vez que el DOM esté listo para que se ejecute el código JavaScript., Incluso si en algunos casos JavaScript no se cargará hasta que se procesen los elementos, incluir este bloque se considera una práctica recomendada.
en la introducción de este artículo, usted vio un simple » Hola, Mundo!” script. Para iniciar este script e imprimir texto en el navegador con jQuery, primero crearemos un elemento de párrafo vacío a nivel de bloque con el ID demo aplicado a él.
...<body><p></p>...jQuery es llamado con y representada por el signo de dólar ($)., Accedemos al DOM con jQuery usando principalmente sintaxis CSS, y aplicamos una acción con un método. Un ejemplo básico de jQuery sigue este formato.
$("selector").method();dado que un ID está representado por un símbolo hash (#) en CSS, accederemos al ID de demostración con el selector #demo. html() es un método que cambia el HTML dentro de un elemento.
ahora vamos a poner nuestra costumbre «¡Hola, Mundo!»programa dentro del contenedor jQuery ready()., Agregue esta línea a su archivo scripts.js dentro de la función existente:
$(document).ready(function() { $("#demo").html("Hello, World!");});una Vez que haya guardado el archivo, puede abrir el index.html archivo en su navegador. Si todo funcionó correctamente, verá la salida Hello, World!.
Selectores
Los selectores son la forma en que le decimos a jQuery en qué elementos queremos trabajar. La mayoría de los selectores de jQuery son los mismos con los que está familiarizado en CSS, con algunas adiciones específicas de jQuery., Puede ver la lista completa de Selectores jQuery en sus páginas de documentación oficial.
para acceder a un selector, utilice el símbolo jQuery $, seguido de paréntesis ().
$("selector")Las cadenas entre comillas dobles son preferidas por la guía de estilo de jQuery, aunque las cadenas entre comillas simples también se usan a menudo.
a continuación se muestra una breve descripción de algunos de los selectores más utilizados.,
generalmente, las clases y los identificadores son lo que encontrará más: clases cuando desea seleccionar varios elementos, e identificadores cuando desea seleccionar solo uno.
jQuery Events
en » Hello, World!»por ejemplo, el código se ejecutó tan pronto como se cargó la página y el documento estaba listo, y por lo tanto no requirió la interacción del usuario. En este caso, podríamos haber escrito el texto directamente en el HTML sin molestarnos con jQuery. Sin embargo, tendremos que utilizar jQuery si queremos hacer que el texto aparezca en la página con el clic de un botón.,
regrese a su archivo index.htmly agregue un elemento <button>. Usaremos este botón para escuchar nuestro evento click.
...<body><button>Click me</button><p></p> usaremos el método click() para llamar a una función que contenga nuestro » Hello, World!” codificar.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Aquí está el código final.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Guardar la etiqueta scripts.js archivo y actualización de index.html en el navegador., Ahora, al hacer clic en el botón, el «Hola, Mundo!»el texto aparecerá.
un evento es cada vez que el usuario interactúa con el navegador. Por lo general, esto se hace con el ratón o el teclado. El ejemplo que acabamos de crear utiliza un evento de clic. Desde la documentación oficial de jQuery, puede ver una lista completa de métodos de eventos de jQuery. A continuación se muestra una breve descripción de algunos de los métodos de eventos más utilizados.
para hacer que las imágenes se animen o se desvanezcan a medida que un usuario se desplaza por la pantalla, utilice el método scroll()., Para salir de un menú con la tecla ESC, utilice el método keydown(). Para crear un menú desplegable de acordeón, utilice el método click().
comprender los eventos es esencial para crear contenido web dinámico con jQuery.
efectos jQuery
Los efectos jQuery funcionan de la mano con los eventos al permitirle agregar animaciones y manipular elementos en la página.
haremos un ejemplo donde abrimos y cerramos una superposición emergente., Si bien podríamos usar dos Id, uno para abrir la superposición y otro para cerrarla, en su lugar usaremos una clase para abrir y cerrar la superposición con la misma función.
elimine las etiquetas actuales<button>y<p> dentro del cuerpo de su archivoindex.html y agregue lo siguiente a su Documento HTML:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...En nuestra style.css archivo, vamos a utilizar una cantidad mínima de CSS para ocultar el overlay display: none y en el centro de la pantalla.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}de vuelta en el archivo scripts.js, vamos a usar el método toggle(), que alternará la propiedad CSS display entre none y block, ocultando y mostrando la superposición cuando se hace clic.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Refresh index.html. Ahora podrá cambiar la visibilidad del modal haciendo clic en los botones., Usted puede cambiar toggle() a fadeToggle() o slideToggle() para ver algunos otros incorporado efectos de jQuery.
a continuación se muestra una breve descripción de algunos de los métodos de efecto más utilizados.
-
toggle()– Toggle: cambia la visibilidad de un elemento o elementos.show()yhide()son los efectos Unidireccionales relacionados. -
fadeToggle()– Fade Toggle: cambia la visibilidad y anima la opacidad de un elemento o elementos.,fadeIn()yfadeOut()son los efectos Unidireccionales relacionados. -
slideToggle()– Slide Toggle alterna la visibilidad de un elemento o elementos con un efecto deslizante.slideDown()yslideUp()son los efectos Unidireccionales relacionados. -
animate()– Animate realiza efectos de animación personalizados en la propiedad CSS de un elemento.,
usamos eventos jQuery para escuchar la interacción del usuario, como el clic de un botón, y usamos efectos jQuery para manipular aún más los elementos una vez que se lleva a cabo esa acción.
conclusión
en esta guía, aprendimos cómo seleccionar y manipular elementos con jQuery, y cómo los eventos y efectos funcionan juntos para hacer una experiencia web interactiva para el usuario.
desde aquí, usted debe tener una comprensión más profunda de las capacidades de jQuery, y estar en su camino a escribir su propio código.