> Manuales > Manual de jQuery

Esta es la portada del Manual de jQuery, un completo compendio de artículos que te explican con detalle y paso a paso la popular librería Javascript.

jQuery es uno de los complementos más utilizados para el desarrollo web con Javascript, usado en millones de sitios en toda la web, ya que nos facilita mucho el desarrollo de aplicaciones enriquecidas del lado del cliente, en Javascript compatible con todos los navegadores.

Para los que se inician, conviene aclarar que jQuery no es un lenguaje, sino una serie de funciones y métodos de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una librería que podemos usar opcionalmente si queremos facilitar nuestra vida cuando programamos en Javascript. A veces nos podemos referir a jQuery como framework o incluso como un API para el desarrollo ágil con Javascript. En definitiva contiene código para la realización de numerosas funcionalidades comunes y útiles en la mayoría de proyectos web.

Antes de llegar jQuery los desarrolladores estábamos obligados a discriminar entre los diversos navegadores, para ejecutar aquel código Javascript que funcionaba en cada browser. Con la llegada de jQuery la principal ventaja es que ya no necesitamos preocuparnos sobre si el navegador del usuario es Chrome, Firefox, Safari, o incluso el viejo Interner Explorer... En lugar de ello la propia librería hará el trabajo "sucio" por nosotros y ejecutará el código que sea compatible con el browser, es decir software de cliente web adecuado. Para ello usaremos las funciones que jQuery nos proporciona.

Además, jQuery permite el desarrollo de piezas de código reutilizables llamadas plugins. En el manual de jQuery aprenderemos a desarrollar nuestros propios plugins, pero también te servirá para beneficiarte de los plugins publicados por la comunidad. Existe un grandísimo abanico de funcionalidades implementadas vía plugins que podemos usar sin más complicaciones, que permiten extender todavía más el rango de uso de la librería, para implementar en instantes cualquier tipo de comportamiento imaginable.

Para aprender jQuery necesitas saber Javascript. No requiere ser un gran maestro en el lenguaje, pero al menos sí trabajar con él con cierta soltura. Date cuenta que cuando programas con jQuery en realidad estás programando con Javascript, por ello es importante que no intentes empezar la casa por el tejado y primero aprendas el lenguaje "padre". Si no dominas Javascript te recomendamos comenzar por el manual de Javascript.

En el presente manual te acercamos todas, o la mayoría de las funcionalidades que están presentes en la librería jQuery. Aprenderás cosas tan variadas como modificar dinámicamente los estilos de la página, manipular el DOM, realizar efectos vistosos, trabajar con Ajax, crear tus propios plugins y un largo etc. Tenemos además otros manuales que te explican asuntos más concretos como las jQueryUI.

Esperamos que disfrutes este manual y, si te gusta, lo compartas en tu blog o en redes sociales con tus amigos.

Manual de jQuery
Artículos Descargas
  • Artículos del manual

  • Introducción a jQuery

    Comenzamos por los capítulos más básicos sobre jQuery, que sirven para introducirnos en el desarrollo de una manera sencilla. Hablaremos sobre la metodología de trabajo con la librería Javascript de manera general.

  • 1 Introducción a jQuery

    Comenzamos el Manual de jQuery explicando en qué consiste esta librería de Javascript, para qué sirve y qué ventajas tenemos al usar jQuery en la construcción de páginas web.

  • 2 Demo muy simple de uso de jQuery

    Vamos a hacer nuestro primer script en jQuery, con unas funcionalidades muy simples, para que sirva de demo de uso de la librería.

  • 3 Cúando usar jQuery

    Cuándo jQuery puede aportar valor en un proyecto. Códigos de ejemplos de diversa utilidad, realizados con Javascript y realizados con jQuery, de modo que puedas comparar hasta qué punto puede resultar la librería de utilidad.

  • Primeros pasos jQuery por la práctica

    En los siguientes artículos vamos a ver de manera práctica cómo usar la librería jQuery. Lo haremos por medio de una serie de aplicaciones básicas pero útiles, que permitan entender algunas de sus posibilidades, pero sin entrar en demasiados detalles o complejidades.

  • 4 Pasos para utilizar jQuery en tu página web

    En este artículo vamos a explicar cómo montar el código de una página web para poner jQuery y realizar un primer ejemplo sencillo, paso a paso.

  • 5 Añadir y quitar clases CSS sobre elementos con jQuery

    Seguimos viendo ejemplos básicos de jQuery. En este caso veremos cómo añadir y quitar clases CSS a elementos de la página al producirse eventos, cuando el usuario realiza acciones en la página.

  • 6 Mostrar y ocultar elementos de la página con jQuery

    Con el método css() de jQuery podemos aplicar cualquier estilo css a elementos de la página. Veremos cómo aplicarlo para mostrar y ocultar elementos de la página.

  • 7 Efectos rápidos con jQuery

    Algunos efectos dinámicos se pueden hacer con jQuery con rapidez impactante y extremadamente poco código Javascript.

  • 8 Callback de funciones jQuery

    Ahora vamos a aprender a usar las funciones callback de jQuery, con las que podemos hacer una secuencia de llamadas a funciones o una pila de funciones que se ejecutarán una detrás de otra.

  • 9 Uso de Ajax muy sencillo con jQuery

    En este artículo podrás apreciar lo fácil que es desarrollar Ajax en jQuery. Usaremos el método load que es el más sencillo que puedes utilizar para hacer Ajax, mediante una sola línea de código!!

  • 10 Ajax jQuery con mensaje de carga

    Vemos ahora más posibilidades de Ajax en jQuery, manteniendo la sencillez pero implementando un mensaje de carga que se muestra mientras que el usuario espera la respuesta Ajax del servidor.

  • Carga de jQuery desde un CDN

    Nuestros primeros bloques de introducción a jQuery acaban hablando de CDNs, los cuales podemos usar para optimizar la carga de la librería. Usar un CDN es interesante, aunque veremos algunos detalles a tener en cuenta para sacarles todo el partido. Explicaremos qué es un CDN, las ventajas e inconvenientes, etc. Además tenemos un segundo artículo que explica cómo hacer una carga combinada de jQuery, con CDN o sin CDN, para extraer lo mejor de ambas posibilidades. Ese segundo artículo es un poco más avanzado, pero puede resultar interesante para cerrar el bloque con prácticas útiles cuando uses los CDN.

  • 11 jQuery CDN o hosting local de las librerías

    El CDN nos ofrece una manera más optimizada de incluir las librerías jQuery. Ventajas e inconvenientes de la opción de alojar el código del framework jQuery en local o enlazarlo desde uno de los servicios CDN.

  • 12 Carga combinada de jQuery: por CDN o en caso de fallo, por local

    Cómo cargar jQuery por CDN y en caso de no ser viable por cualquier motivo, recurrir a una copia en el servidor del framework, también llamado técnica fallback.

  • Núcleo de la librería jQuery

    Empezamos a adentrarnos en la librería Javascript para conocer los detalles de este sistema, comenzando con el núcleo de jQuery: el core tal como lo llaman en la documentación. En los próximos artículos conoceremos los métodos más esenciales que nos proporciona jQuery.

  • 13 Core de jQuery

    El core de jQuery lo forman las funciones más recurridas y que forman la base sobre la que se asienta el cualquier cosa en esta librería Javascript.

  • 14 Función jQuery o función $()

    Veremos con detalle la función más importante de jQuery y para ello comenzaremos viendo su uso más común: seleccionar elementos de la página y obtener un objeto jQuery con los elementos seleccionados.

  • 15 Ready en jQuery

    Veremos ahora el evento ready de jQuery con todas sus variantes para ejecutar código de manera segura, cuando sabemos que el DOM está completamente listo.

  • 16 Core/each: each del core de jQuery

    Conozcamos con detalle el método each del core de jQuery, para ejecutar una función en cada uno de los elementos de un grupo.

  • 17 Método size() y propiedad length del core de jQuery

    Dos formas de acceder al número de elementos que hay en un objeto jQuery, a través del método size() y la propiedad length.

  • 18 Método data() Core jQuery

    El método data() del core de jQuery sirve para almacenar información en los elementos de la página, en pares nombre de variable y valor. Veremos también el método removeData() para eliminar datos almacenados.

  • Selectores de jQuery

    Comenzamos a analizar en profundidad las diferentes maneras que tenemos en jQuery de seleccionar conjuntos de elementos de la página, a través de distintos tipos de selectores.

  • 19 Selectores en jQuery

    Comenzamos el tema de selectores en jQuery, que son muy importantes para usar esta librería. Sirven para seleccionar elementos de la página a partir de una cadena de texto que le pasamos a la función jQuery.

  • 20 Ejemplo para practicar con selectores en jQuery

    Ejemplo de página que nos permitirá hacer prácticas con los selectores de jQuery.

  • 21 Selectores de Jerarquía en jQuery

    Selectores que sirven para seleccionar elementos atendiendo a la estructura o jerarquía de las etiquetas de la página.

  • Métodos de Attributes en jQuery

    Exploramos diferentes métodos que existen en este framework Javascript para acceder y modificar los atributos del DOM, es decir, de los objetos o elementos que forman parte de una página web.

  • 22 Acceder y modificar atributos HTML desde jQuery

    En este artículo vamos a aprender a acceder a los valores de los atributos con una función llamada attr(), que sirve para recuperar y alterar atributos de los elementos de la página.

  • 23 Método attr() de jQuery, otros usos y removeAttr()

    Un uso adicional del método attr() de jQuery, para modificar atributos con el valor devuelto de una función y borrar atributos de elementos de la página con removeAttr().

  • 24 Método prop() de jQuery y diferencias con attr()

    El método prop() disponible desde jQuery 1.6 sirve para acceder y modificar propiedades de elementos y attr() para atributos. Veamos las diferencias.

  • Métodos de CSS de jQuery

    Los métodos que tienen que ver con las propiedades de Hojas de Estilo en Cascada, para acceder o alterar los valores CSS de los elementos de la página dinámicamente.

  • 25 Método css() de jQuery

    Sin duda css() es uno de los métodos más utilizados en el día a día del trabajo con jQuery. Sirve para cambiar y obtener el valor de cualquier atributo css.

  • 26 Funciones CSS de jQuery para conocer el tamaño y posición de elementos

    Seguimos viendo funciones CSS del framework Javascript jQuery, en este caso las que sirven para conocer el tamaño y posición de los elementos en la página.

  • Eventos en jQuery

    Los eventos son una parte fundamental en el desarrollo de aplicaciones enriquecidas del lado del cliente. Aprendemos todo sobre los eventos en jQuery.

  • 27 Eventos en jQuery

    Una introducción al trabajo con eventos en el framework Javascript jQuery.

  • 28 Manejadores de eventos en jQuery

    Un listado con los distintos manejadores eventos que podemos definir en jQuery, ordenados por los tipos eventos de ratón, eventos de teclado o cualquiera de los dos.

  • 29 Introducción Objeto evento en jQuery

    Explicaciones iniciales sobre el objeto evento en jQuery y mostramos cómo averiguar la posición del ratón al producirse un evento en la página.

  • 30 Eventos de ratón en jQuery mouseenter y mouseleave

    Práctica con eventos de ratón en jQuery, en la que mostraremos el uso de mouseenter y mouseleave, junto con el objeto evento, para averiguar la posición del ratón.

  • 31 Eventos de teclado en jQuery

    Cómo trabajar con eventos de teclado en jQuery y saber qué teclas han pulsado los usuarios, a través de la propiedad which del objeto evento.

  • 32 Definir eventos con bind() y eliminarlos con unbind()

    El método bind() sirve para definir eventos de manera genérica, de cualquier tipo. Con el método unbind() podemos eliminar un manejador cualquiera indicado con bind().

  • 33 Eventos definidos con live() en jQuery

    Método live() para definir eventos en jQuery: cómo crear eventos sobre elementos que coincidan con un selector, en el momento actual o en el futuro.

  • 34 Delegated events en jQuery

    Los delegated events de jQuery permiten asociar comportamientos a elementos que aún no se encuentran en la página, usando el mismo método on(), aunque definiendo el selector donde quieres estos eventos delegados.

  • Desarrollo de plugins en jQuery

    Los plugins en jQuery nos permiten hacer desarrollos que podremos reutilizar con facilidad en diversos sitios y que también podrán usar otros desarrolladores. Los plugins te ayudarán a hacer código de calidad en jQuery.

  • 35 Plugins en jQuery

    Veamos qué son los Plugins en jQuery y cómo podemos crearlos para expandir las posibilidades del framework.

  • 36 Reglas para el desarrollo de plugins en jQuery

    Para construir plugins en jQuery tenemos que seguir una serie de normas. Además veremos un nuevo ejemplo práctico sobre el desarrollo de plugins en jQuery.

  • 37 Plugin jQuery: textarea con cuenta de caracteres

    Segundo ejemplo de plugin práctico en jQuery para hacer textarea que lleva la cuenta de los caracteres escritos por el usuario.

  • 38 Gestión de opciones en plugins jQuery

    Manera de gestionar opciones en los plugins de jQuery, a través de un objeto de options enviado al invocar el plugin, para hacerlos un poco más versátiles y con configuración más fácil.

  • 39 Plugin Tip con opciones en jQuery

    Un ejemplo de plugin en jQuery para hacer un sistema de tip más avanzado, que permite configurarse por medio de unas opciones en el plugin.

  • 40 Funciones y variables dentro de plugins jQuery

    Las funciones en los plugins pueden verse como funciones y variables privadas del plugin, que nos sirven para definir una mejor lógica de programación y estructura de datos y código.

  • 41 Plugin checkbox personalizado con jQuery

    Un plugin en jQuery para hacer un campo de formulario checkbox pero con un diseño distinto, totalmente personalizable por el desarrollador.

  • 42 Alias personalizado y ocultar código en plugins jQuery

    Cómo crear un alias personalizado a $, para mejorar la compatibilidad en todos los contextos, y ocultar el código privado de los plugins jQuery.

  • 43 Desarrollar plugins que dependen directamente de jQuery

    Cómo crear métodos en jQuery asignados directamente a jQuery, con el método extend(), que no dependen de los elementos de la página.

  • Efectos en jQuery

    Los efectos son una de las partes más atractivas del framework y que permitirán dotar de dinamismo a nuestra página, hacerla más atractiva y en definitiva, mejorar la experiencia del usuario.

  • 44 jQuery animate(): Animación de propiedades CSS

    El método animate() de jQuery permite animar varias propiedades, con valores numéricos, de CSS en un solo paso.

  • 45 Animaciones de color con jQuery

    Cómo realizar animaciones con colores en jQuery por medio del método animate() y el plugin Color animation jQuery.

  • 46 Fading en jQuery

    Efectos de cambio de opacidad de los elementos en la página, con los métodos de fading en jQuery, fadeIn(), fadeOut() y fadeTo().

  • 47 Colas de efectos en jQuery

    Vamos a explicar qué es una cola de efectos, para qué nos sirve y cómo se configuran las colas de efectos en el framework Javascript jQuery.

  • 48 Método queue() para acceder a una cola de efectos

    Veremos cómo hacer cosas con las colas de efectos en jQuery, haciendo nuestra primera prueba con el método queue(), que permite acceder y modificar la cola de efectos.

  • 49 Meter cualquier tipo de función en una cola de efectos jQuery

    En la cola de efectos podemos introducir cualquier tipo de función, aunque no sean efectos jQuery, y para ello vamos a aprender a encolar cualquier conjunto de sentencias con el método queue().

  • 50 Parar la ejecución de una cola de efectos jQuery

    Cómo detener la ejecución de una cola de efectos con el método stop() y revisión del uso de queue() para indicar una nueva lista de funciones de efectos a ejecutar con jQuery.

  • 51 Método delay() para retrasar la ejecución efectos de la cola

    El método delay() de jQuery sirve para generar un intervalo de espera entre la ejecución de funciones de la cola de efectos.

  • 52 Cola de efectos personal (no predeterminada) en jQuery

    Vamos a mostrar cómo trabajar con otras colas de efectos distintas que la cola de efectos predeterminada.

  • Ajax con la librería jQuery

    En los próximos artículos vamos a abordar una de las funcionalidades más interesantes que nos ofrece jQuery como es la incorporación de comportamientos Ajax, que nos permitan recibir datos del servidor, o enviarlos, de manera sencilla. jQuery ofrece un nutrido grupo de funciones para realizar Ajax ya configuradas y pensadas para varios casos comunes. Por ello, nos da mucha agilidad en el desarrollo y hace mucho más simple realizar solicitudes asíncronas con Javascript.

  • 53 AJAX en jQuery

    Nociones básicas sobre AJAX en jQuery, cómo se organizan los métodos de AJAX y cómo debemos utilizarlos según nuestras necesidades.

  • 54 $.get() de jQuery para hacer una solicitud Ajax tipo HTTP GET

    Análisis y ejemplos de la función $.get() de jQuery que sirve para hacer una solicitud Ajax al servidor en la que podemos enviar datos por el método GET.

  • 55 Eventos en una solicitud ajax con $.get() en jQuery

    Tratamiento de eventos relacionados con las solicitudes ajax en jQuery desde la función $.get().

  • 56 Parámetros recibidos por las funciones de los eventos Ajax

    Ejemplos de solicitud Ajax con diversos eventos, en los que se reciben parámetros con datos y referencias útiles para los scripts jQuery.

  • Añadidos al Manual de jQuery

    Más cosas que son interesante conocer sobre el framework jQuery que completan este manual y ofrecen referencias a otros contenidos por donde continuar aprendiendo.

  • 57 Método jQuery.extend()

    Uno de los métodos del paquete utilities de jQuery, que sirve para extender el contenido de dos o más objetos en uno de ellos.

  • 58 Scroll en jQuery

    Cuáles son las posibilidades de trabajo con funcionalidades relacionadas con el scroll en jQuery, ya sea en ventanas, elementos, animaciones con scroll, eventos de scroll, etc.

  • 59 QUnit: el framework de testing sencillo para Javascript

    Vamos a explicar el framework de tests unitarios QUnit que fue creado originalmente para usar en jQuery.

  • Descargas

  • Manual de jQuery para descarga

    El Manual de jQuery se puede obtener en distintos formatos de libro electrónico. PDF para lectura en ordenadores, ePub para lectores electrónicos y Mobi para los dispositivos de Amazon. Puedes obtener cualquiera de estas versiones una vez autorizada tu descarga.

    Archivos disponibles: PDF, ePup, Mobi (Kindle)

    Páginas: 208 (Referencia por el archivo PDF)

    Ir a la descarga

Manuales relacionados