Introducción
HTML, CSS y JavaScript son tres lenguajes fundamentales de Internet. Los sitios web se estructuran con HTML, se diseñan con CSS y se agregan funciones interactivas con JavaScript. La mayoría de las animaciones o acciones que se producen como resultado de que un usuario haga clic, pase el cursor por encima o se desplace por la pantalla se construyen con JavaScript.
jQuery es la biblioteca de JavaScript que permite escribir menos y hacer más. No es un lenguaje de programación, sino una herramienta que se utiliza para que escribir tareas comunes de JavaScript sea más conciso. jQuery tiene el beneficio adicional de ser compatible con todos los navegadores , lo que significa que puede estar seguro de que el resultado de su código se mostrará como se esperaba en cualquier navegador moderno.
Esta guía no presupone ningún conocimiento previo de jQuery. En ella, se explicará la instalación de jQuery en un proyecto web. Se definirán conceptos importantes de desarrollo web, como API, DOM y CDN, en relación con jQuery. Una vez que tenga esta base de conocimientos y jQuery instalado, aprenderá a utilizar selectores, eventos y efectos comunes.
Prerrequisitos
Antes de comenzar esta guía necesitarás lo siguiente:
- Un conocimiento básico de HTML y CSS.
- Conocimiento de los principios básicos de la programación. Si bien es posible comenzar a escribir jQuery sin conocimientos avanzados de JavaScript, familiarizarse con los conceptos de variables y tipos de datos será de gran ayuda.
Configuración de jQuery
jQuery es un archivo JavaScript al que se vinculará en su HTML. Hay dos formas de incluir jQuery en un proyecto: descargar una copia local o vincular un archivo a través de la red de distribución de contenido (CDN).
Nota : Una red de distribución de contenido (CDN) es un sistema de varios servidores que entregan contenido web a un usuario según su ubicación geográfica. Cuando se vincula a un archivo jQuery alojado a través de CDN, potencialmente llegará al usuario más rápido y de manera más eficiente que si lo alojara en su propio servidor.
En los ejemplos se utilizará una CDN para hacer referencia a jQuery. Puedes encontrar la última versión de jQuery en las bibliotecas alojadas de Google . Si, en cambio, deseas descargarla, puedes obtener una copia de jQuery desde el sitio web oficial .
Comenzarás este ejercicio creando un pequeño proyecto web. Constará de style.cssun css/directorio, scripts.jsun js/directorio y un archivo principal index.htmlen la raíz del proyecto.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlPara comenzar, crea un esqueleto HTML y guárdalo como index.html:
índice.html
!doctype htmlhtmlhead titlejQuery Demo/title link rel="stylesheet" href="css/style.css"/headbody/body/htmlEnlace al CDN de jQuery justo antes de la /bodyetiqueta de cierre, seguido de su propio archivo JavaScript personalizado scripts.js:
índice.html
!doctype htmlhtmlhead titlejQuery Demo/title link rel="stylesheet" href="css/style.css"/headbodyscript src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"/scriptscript src="js/scripts.js"/script/body/htmlSu archivo JavaScript ( scripts.js) debe incluirse debajo de la biblioteca jQuery en el documento o no funcionará.
Nota: Si descargaste una copia local de jQuery, guárdala en tu js/carpeta y crea un vínculo a ella en js/jquery.min.js.
En este punto, la biblioteca jQuery se está cargando en su sitio y usted tiene acceso completo a la API jQuery .
Nota: Una interfaz de programación de aplicaciones (API) es una interfaz que permite que los programas de software interactúen entre sí. En este caso, la API para jQuery contiene toda la información y la documentación necesarias para acceder a jQuery.
Usando jQuery
Al comparar un programa simple “¡Hola, mundo!” en JavaScript y jQuery, puedes ver la diferencia entre cómo están escritos ambos.
JavaScript
document.getElementById("demo").innerHTML = "Hello, World!";jQuery
$("#demo").html("Hello, World!");Este breve ejemplo demuestra de forma concisa cómo jQuery puede lograr el mismo resultado final que JavaScript simple. En esencia, 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 mediante 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 y seleccione “Inspeccionar”. Esto abrirá las herramientas para desarrolladores. El código HTML que ve aquí es el DOM.
Cada elemento HTML se considera un nodo en el DOM, un objeto que JavaScript puede tocar. Estos objetos se organizan en una estructura de árbol, htmlestando más cerca de la raíz y cada elemento anidado es una rama más adelante en el árbol. JavaScript puede agregar, eliminar y cambiar cualquiera de estos elementos.
Si hace clic derecho en el sitio nuevamente y hace clic en “Ver código fuente de la página”, verá el resultado HTML sin procesar del sitio web. Al principio, es fácil confundir el DOM con el código fuente HTML, pero son diferentes: el código fuente de la 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 htmlnodo, es el objeto del documento . Para comenzar a manipular la página con jQuery, primero debes asegurarte de que el documento esté “listo”.
Crea el archivo scripts.jsen tu js/directorio y escribe el siguiente código:
js/scripts.js
$(document).ready(function() { // all custom jQuery will go here});Todo el código jQuery que escribas se incluirá en el código anterior. jQuery detectará este estado de preparación, de modo que el código incluido dentro de esta función solo se ejecutará una vez que el DOM esté listo para que se ejecute el código JavaScript. Aunque en algunos casos JavaScript no se cargará hasta que se representen los elementos, se considera que incluir este bloque es la mejor práctica.
En la introducción de este artículo, viste un script sencillo de “¡Hola, mundo!”. Para iniciar este script e imprimir texto en el navegador con jQuery, primero crearás un elemento de párrafo de nivel de bloque vacío con el ID demoaplicado a él:
índice.html
...bodyp/p...jQuery se llama con el signo de dólar ( $) y se representa mediante él. Se accede al DOM con jQuery utilizando principalmente sintaxis CSS y se aplica una acción con un método. Un ejemplo básico de jQuery sigue este formato:
$("selector").method();Dado que un ID se representa mediante un símbolo hash ( #) en CSS, accederá al ID de demostración con el selector #demo. html()es un método que cambia el HTML dentro de un elemento.
Ahora, colocará su programa personalizado “Hola, mundo” dentro del ready()contenedor jQuery. Agregue esta línea a su scripts.jsarchivo dentro de la función existente:
js/scripts.js
$(document).ready(function() { $("#demo").html("Hello, World!");});Una vez que hayas guardado el archivo, puedes abrirlo index.htmlen tu navegador. Si todo funciona correctamente, verás el resultado Hello, World!.
Si antes te confundía el DOM, ahora puedes verlo en acción. Haz clic derecho en el texto “¡Hola, mundo!” en la página y elige “Inspeccionar elemento”. El DOM ahora mostrará pHello, World!/p. Si seleccionas “Ver código fuente de la página”, solo verás p/p, el HTML sin formato que escribiste.
Selectores
Los selectores son la forma de indicarle a jQuery en qué elementos desea trabajar. La mayoría de los selectores de jQuery son los mismos que conoce en CSS, con algunas adiciones específicas de jQuery. Puede ver la lista completa de selectores de jQuery en sus páginas de documentación oficial.
Para acceder a un selector, utilice el símbolo jQuery $, seguido de paréntesis ():
$("selector")La guía de estilo jQuery prefiere las cadenas entre comillas dobles , aunque a menudo también se utilizan cadenas entre comillas simples.
A continuación se muestra una breve descripción general de algunos de los selectores más utilizados.
$("*")Comodín: selecciona todos los elementos de la página.$(this)Actual: selecciona el elemento actual sobre el que se está operando dentro de una función.$("p")Etiqueta: Esto selecciona cada instancia de lapetiqueta.$(".example")Clase: Esto selecciona todos los elementos que tienen laexampleclase aplicada.$("#example")Id: Esto selecciona una única instancia delexampleid único.$("[type='text']")Atributo: selecciona cualquier elemento contextel atributo aplicadotype.$("p:first-of-type")Pseudo Elemento: Selecciona el primerp.
Generalmente, las clases y los identificadores son lo que más encontrará: clases cuando desee seleccionar varios elementos e identificadores cuando desee seleccionar solo uno.
Eventos de jQuery
En el ejemplo de “¡Hola, mundo!”, el código se ejecutó tan pronto como se cargó la página y el documento estuvo listo, por lo que no requirió interacción del usuario. En este caso, podría haber escrito el texto directamente en el HTML sin molestarse con jQuery. Sin embargo, necesitará utilizar jQuery si desea que el texto aparezca en la página con solo hacer clic en un botón.
Regrese a su index.htmlarchivo y agregue un buttonelemento. Utilizará este botón para escuchar el evento de clic:
índice.html
...bodybuttonClick me/buttonp/pUtilizarás el click()método para llamar a una función que contiene tu código “¡Hola, mundo!”:
js/scripts.js
$(document).ready(function() { $("#trigger").click();});Tu buttonelemento tiene un ID llamado trigger, que seleccionas con $("#trigger"). Al agregar click(), le estás indicando que escuche un evento de clic, pero aún no has terminado. Ahora invocarás una función que contiene tu código, dentro del click()método:
function() { $("#demo").html("Hello, World!");}Aquí está el código final:
js/scripts.js
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Guarde el scripts.jsarchivo y actualice la página index.htmlen el navegador. Ahora, cuando haga clic en el botón, aparecerá el texto “¡Hola, mundo!”.
Un evento es cualquier momento en el que el usuario interactúa con el navegador. Por lo general, esto se hace con el mouse o el teclado. El ejemplo que acaba de crear utilizó un evento de clic. En la documentación oficial de jQuery, puede ver una lista completa de métodos de eventos de jQuery . A continuación, se incluye una breve descripción general de algunos de los métodos de eventos más utilizados.
click()Clic: Esto se ejecuta con un solo clic del mouse.hover()Hover: Esto se ejecuta cuando el mouse se desplaza sobre un elementomouseenter()ymouseleave()se aplica solo cuando el mouse ingresa o sale de un elemento, respectivamente.submit()Enviar: Esto se ejecuta cuando se envía un formulario.scroll()Desplazarse: esto se ejecuta cuando se desplaza la pantalla.keydown()Keydown: Esto se ejecuta cuando presionas una tecla en el teclado.
Para hacer que las imágenes se animen o se desvanezcan a medida que el usuario se desplaza hacia abajo en la pantalla, utilice el scroll()método. Para salir de un menú usando la ESCtecla, utilice el keydown()método. Para crear un menú desplegable en acordeón, utilice el click()método.
Comprender los eventos es esencial para crear contenido de sitio web dinámico con jQuery.
Efectos de jQuery
Los efectos jQuery funcionan en conjunto con los eventos permitiéndole agregar animaciones y manipular elementos en la página.
Harás un ejemplo en el que abras y cierres una ventana emergente superpuesta. Si bien podrías usar dos identificadores (uno para abrir la ventana superpuesta y otro para cerrarla), en su lugar usarás una clase para abrir y cerrar la ventana superpuesta con la misma función.
Elimina las etiquetas actuales buttony pdel cuerpo de tu index.htmlarchivo y agrega lo siguiente a tu documento HTML:
índice.html
...bodybuttonOpen/buttonsection buttonClose/button/section...En su style.cssarchivo, utilizará una cantidad mínima de CSS para ocultar el overlaywith display: noney centrarlo en la pantalla:
css/estilo.css
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}De vuelta en el scripts.jsarchivo, vas a utilizar el toggle()método que alternará la displaypropiedad CSS entre noney block, ocultando y mostrando la superposición al hacer clic:
js/scripts.js
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Actualizar index.html. Ahora podrá alternar la visibilidad del modal haciendo clic en los botones. Puede cambiar toggle()a fadeToggle()o slideToggle()para ver algunos otros efectos jQuery integrados.
A continuación se muestra una breve descripción general de algunos de los métodos de efectos más utilizados.
toggle()Alternar: cambia la visibilidad de un elemento o elementosshow()yhide()son los efectos unidireccionales relacionados.fadeToggle()Alternar desvanecimiento: cambia la visibilidad y anima la opacidad de un elemento o elementos.fadeIn()yfadeOut()son los efectos unidireccionales relacionados.slideToggle()Alternar diapositiva : alterna la visibilidad de un elemento o elementos con un efecto deslizante.slideDown()yslideUp()son los efectos unidireccionales relacionados.animate()Animar : realiza efectos de animación personalizados en la propiedad CSS de un elemento.
Puede utilizar eventos jQuery para escuchar una interacción del usuario, como el clic de un botón, y efectos jQuery para manipular aún más los elementos una vez que se realiza esa acción.
Conclusión
En esta guía, aprendió a seleccionar y manipular elementos con jQuery, y cómo los eventos y efectos funcionan juntos para crear una experiencia web interactiva para el usuario.
Desde aquí, deberías tener una comprensión más profunda de las capacidades de jQuery y estar en camino de escribir tu propio código.