dominios y alojamiento web en hostalia

Manual de jQuery

El manual de jQuery pretende explicar el popular framework Javascript jQuery, con el que podremos hacer aplicaciones web avanzadas del lado del cliente.

Listado de los capítulos

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 el framework Javascript de manera general.

1.- Introducción a jQuery
Qué es jQuery, para qué sirve y qué ventajas tiene el utilizar este framework Javascript. Entrar

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 este framework. Entrar

3.- Pasos para utilizar jQuery en tu página web
Una descripción de la puesta en marcha de tu primer script jQuery, en tu propia página web, paso a paso. Entrar

4.- Básicos jQuery: añadir y quitar clases CSS sobre elementos
Otro ejemplo básico con jQuery, para mostrar cómo se pueden añadir y quitar clases CSS a elementos de la página, bajo respuesta de eventos de usuario. Entrar

5.- 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. Entrar

6.- Efectos rápidos con jQuery
Algunos efectos dinámicos se pueden hacer con jQuery con rapidez impactante y extremadamente poco código Javascript. Entrar

7.- Callback de funciones jQuery
Con callback de jQuery podemos hacer una secuencia de llamadas a funciones o una pila de funciones que se ejecutarán una detrás de otra. Entrar

8.- Uso de Ajax muy sencillo con jQuery
Es muy fácil desarrollar Ajax en jQuery. En este artículo veremos el ejemplo más sencillo de Ajax con el framework Javascript jQuery. Entrar

9.- Ajax jQuery con mensaje de carga
Vemos más posibilidades de Ajax en jQuery, modificando un ejemplo anterior, para crear un mensaje de carga mientras que el usuario espera la respuesta Ajax del servidor. Entrar

10.- 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. Entrar

Core de jQuery

Empezamos a adentrarnos en el framework Javascript para conocer los detalles de este sistema, comenzando con el núcleo de jQuery: el core, que contiene los métodos más esenciales.

11.- 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 este framework Javascript. Entrar

12.- 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. Entrar

13.- Otros usos de la función $()
La función jQuery(), o con su abreviación $(), tiene otros usos interesantes cuando le enviamos parámetros distintos a los vistos en el artículo anterior. Entrar

14.- 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. Entrar

15.- 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. Entrar

16.- 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. Entrar

17.- Consideraciones interesantes de data() y removeData()
Ahora veremos algunos puntos interesantes y nuevos ejemplos sobre el funcionamiento de los métodos data() y removeData() de jQuery. Entrar

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.

18.- Selectores en jQuery
Los selectores sirven para seleccionar elementos de la página a partir de una cadena de texto que le pasamos a la función jQuery. Entrar

19.- Ejemplo para practicar con selectores en jQuery
Ejemplo de página que nos permitirá hacer prácticas con los selectores de jQuery. Entrar

20.- 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. Entrar

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.

21.- Acceder y modificar atributos HTML desde jQuery
En jQuery existe una función llamada attr() que sirve para recuperar y alterar atributos de los elementos de la página. Entrar

22.- 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(). Entrar

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.

23.- 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. Entrar

24.- 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. Entrar

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.

25.- Eventos en jQuery
Una introducción al trabajo con eventos en el framework Javascript jQuery. Entrar

26.- 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. Entrar

27.- 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. Entrar

28.- 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. Entrar

29.- 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. Entrar

30.- 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(). Entrar

31.- 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. Entrar

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.

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

33.- 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. Entrar

34.- 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. Entrar

35.- 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. Entrar

36.- 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. Entrar

37.- 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. Entrar

38.- 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. Entrar

39.- 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. Entrar

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.

40.- 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. Entrar

41.- 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. Entrar

42.- 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(). Entrar

43.- 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. Entrar

44.- 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. Entrar

45.- 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(). Entrar

46.- 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. Entrar

47.- 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. Entrar

48.- 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. Entrar

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.

49.- 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. Entrar

50.- $.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. Entrar

51.- Eventos en una solicitud ajax con $.get() en jQuery
Tratamiento de eventos relacionados con las solicitudes ajax en jQuery desde la función $.get(). Entrar

52.- 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. Entrar

53.- Introducción a jQuery Mobile
Características de jQuery Mobile, el framework Javascript para desarrollo de aplicaciones web para móviles, basado en jQuery. Entrar

Descargas
 Si eres usuario de DesarrolloWeb:
Archivo de descarga Manual de jQuery
Texto completo en PDF, listo para imprimir, del manual de DesarrolloWeb.com Manual de jQuery. Descarga compilada y actualizada el día 30/09/10.
Tamaño: 555 KB
Fecha creación: 30/09/2010
Páginas: 96

Comentarios
Envie un comentario u opinión sobre este manual.

Compartir

Comentarios
Fueron enviados 53 comentarios al manual
10 comentarios no revisados
43 comentarios revisados:
El link
29/5/2009
El link para descargar el manual, simplemente no existe, el del manual iniciación a la programación tampoco existe.

Sería interesante poder acceder a estos 2 manuales, ya que el de iniciación a la programación es bastante extenso como para verlo online

Saludos
Vamos a poner esta descarga de manual
29/5/2009
Estamos en ello... en breve tendréis el PDF del manual de Jquery y del de programación....
Continuidad con el Manual
Por: Leo
10/9/2009
Solo para decirles que por favor sigan agregando temas al manual, hace mucho tiempo que no se agrega nada, y para todo los que estamos siguiendo éste y aprendiendo es malo ver que ya no lo continúan, ojalá que no se quedé ahí ya que JQuery tiene para mucho más.
Saludos
No nos hemos olvidado de jQuery
17/9/2009
Seguimos publicando temas sobre jQuery, a medida que vamos escribiendo los distintos capítulos de este manual. Ciertamente que jQuery tiene mucha más información que cabe comentar y explicar con el detalle que os tenemos acostumbrados, pero nuestro tiempo es limitado y estamos también trabajando en varios otros manuales.

daniel_...
Manual Incompleto
05/11/2009
Hola a todos, al descargar el manual de jQuery en formato pdf me he dado cuenta de que esta incompleto, faltan muchos de los contenidos que hay publicados en la web, de hecho solo tiene 16 paginas. ¿Cuando va a ser subido al completo?

Muchas gracias, un saludo.

Jorgibi...
Lento pero seguro
06/11/2009
El manual.... Clarisimo y muy 'entendible'. Estimo mucho vuestro trabajo.
Estoy deseando que se actualice, pero indicar a los mas impacientes, que los articulos extra sobre JQuery, estan siempre ahí, en la Web. Lo único que hay que conectarse....

Un saludillo.
Felicitaciones
Por: Alberto
10/12/2009
Me parece que el manual esta muy bien elaborado, repleto de ejemplos y muy bien explicado. Lo unico que por lo que he podido ver aun no esta terminado pero de momento es el mejor que he encontrado por la red. Felicitaciones!!

isra_sa...
Manual Incompleto
11/12/2009
Habia comentado que el documento solo contaba con 16 hojas,
aun siguen siendo estas las del documento PDF.

Podrian actualizarlo.

Saludos

Entropi...
Manual JQuery
10/2/2010
Muy bueno el tuto, felicidades por el trabajo.
Muchas gracias.
Descarga actualizada!
11/2/2010
El día 03/02/10 hemos actualizado la descarga del manual de jquery. No os preocupéis, pues estamos pendientes de actualizar el PDF a medida que vamos aumentando los artículos de este manual.

Además, cualquiera que descargó anteriormente el manual de jquery puede volver a descargarlo, la versión actualizada, sin que se descuente otra descarga.

atkw
Un gran manual
16/2/2010
Muchas gracias por este manual, esta muy bueno. La verdad adoro esta pagina, saca de apuros jejejej. Saludos
Bases de datos
Por: juan carlos
03/5/2010
como es el manejo de bases de datos con jquery cargar datos en grids o listbox??
ejecucion de intrucciones, stored procedures??
¿Referencia a los verdaderos autores?
Por: Luis
20/5/2010
Muchos contenidos de este manual son meras traducciones de artículos de otros autores. El artículo 3 es directamente el "How jQuery Works" de John Resig, por ejemplo

http://docs.jquery.com/How_jQuery_Works

Ni siquiera citáis al autor, lo copiáis descaradamente y luego decís que es contenido exclusivo de DesarrolloWeb y reclamáis el copyright?

No sé qué opinará de esto John Resig, pero espero que os lleguen noticias suyas...
Menu desplegable
28/5/2010
Hola que tal , tengo una duda con mi código . Al usar Mouseout y MouseOver : tengo un DIV en el cual tiene display:none , al pasar sobre un "a" de un menu se desplega este div oculto , y muestra un serie de links. Hasta ahí perfecto, ahora al querer pasar el mouse sobre estos links el div se esconde de inmediato. He intentado hacer de todo todavía no lo puedo solucionar. Este es el codigo html del documento:

<!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">
<head>
<meta name="author" content="Wink Hosting (www.winkhosting.com)" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<title>Cash</title>
<script src="jQuery.js"></script>
<script>
$(document).ready(function(){
$("a.des").mouseover(function(evento){
evento.preventDefault();
$("#desplegable").css({display:"block"});
$("#links").css({display:block});
});
$("#links").mouseout(function(evento){
evento.preventDefault();
$("#links").css({display:"none"})
});
});
</script>
</head>
<body>
<div id="page" align="center">
<div id="toppage" align="center">
<div id="date">
<div class="smalltext" style="padding:13px;"><strong>April 21, 2007</strong></div>
</div>
<div id="topbar">
<div align="right" style="padding:25px;" class="smallwhitetext">
<a id="show" href="#">Home</a> | <a class="des" href="#">Sitemap</a>| <a href="#">Contact Us</a></div>
</div>
</div>
<div id="header" align="center">
<div class="titletext" id="logo">
<div class="logotext" style="margin:30px">Ca<span class="orangelogotext">$</span>h</div>
</div>
<div id="pagetitle">
<div id="desplegable" style="background-color:#CBC55C; width:100px; height:70px; margin-right:40px; text-align:left; display:none; padding:5px; float:right; border:2px solid #000;">
<div id="links" style="display:block; position:absolute;">
<a href="#" class="sit1">Mapas</a> <br />
<a href="#" class="sit1">AbT</a><br />
<a href="#" class="sit1">Areas</a><br />
</div>


</div>

<div id="title" class="titletext" align="right">Welcome to Cash!</div>
</div>
</div>
<div id="content" align="center">
<div id="menu" align="right">
<div align="right" style="width:189px; height:8px;"><img src="images/mnu_topshadow.gif" width="189" height="8" alt="mnutopshadow" /></div>


<div id="linksmenu" align="center">
<a href="#" class="home" title="Home">Home</a>
<a href="#" title="About Us">About Us</a>
<a href="#" title="Products">Products</a>
<a href="#" title="Our Services">Our Services</a>
<a href="#" title="Contact Us">Contact Us</a>
</div>
<div align="right" style="width:189px; height:8px;"><img src="images/mnu_bottomshadow.gif" width="189" height="8" alt="mnubottomshadow" /></div>
</div>
<div id="contenttext">
<div class="bodytext" style="padding:12px;" align="justify">
<strong>Hi! This is my second design for OSWD, with CSS and XHTML 1.0 Transitional Validation. You can do whatever you want with this template, just keep the Hosting Colombia link at the bottom. Enjoy! </strong><br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id est tincidunt nisl pellentesque tincidunt. Donec in mauris. Mauris neque magna, consectetuer id, malesuada vitae, tincidunt sit amet, mi. Aliquam lacinia. Suspendisse potenti. Proin justo lorem, rutrum ac, facilisis in, malesuada sed, ligula. Mauris lobortis lacus at nibh. Aenean vitae odio vel odio placerat hendrerit. Suspendisse lacus lacus, tempor id, pharetra eget, ornare sit amet, pede. Sed aliquet, justo ac elementum pretium, arcu leo placerat est, a luctus purus diam eget arcu. Nam augue diam, mollis a, scelerisque eget, aliquet condimentum, pede. Vestibulum tristique lectus sed augue.
</div>
<div class="panel" align="justify">
<span class="orangetitle">Some Title Here</span>
<span class="bodytext"><br />
Nullam et ipsum condimentum pede luctus consequat. Nulla venenatis mi a sapien. Nunc facilisis pede quis nisl. Duis eget sapien. Suspendisse potenti. Vestibulum eget ligula in ante pharetra imperdiet. Maecenas vehicula luctus mi. Suspendisse molestie libero vitae magna. Integer metus tortor, mollis eleifend, tincidunt in, sagittis eget, lorem. Donec posuere. Curabitur ut eros. Praesent vitae sem facilisis tellus euismod scelerisque. Donec pellentesque. Vestibulum scelerisque, turpis pellentesque sollicitudin nonummy, ipsum erat consequat augue, ut tincidunt urna magna ut leo. Nullam ullamcorper metus vitae est. Ut diam metus, molestie porttitor, pretium vitae, ultricies nec, pede. Maecenas bibendum dictum tellus. Vestibulum feugiat, velit quis eleifend pharetra, leo lacus laoreet diam, quis laoreet arcu mi vel felis. </span> </div>
</div>
</div>
<div id="footer" class="smallgraytext" align="center">
<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Products</a> | <a href="#">Our Services</a> | <a href="#">Contact Us</a><br />
Your Company Name &copy; 2007<br />
<a href="http://www.winkhosting.com" title="Hosting Colombia">Hosting Colombia</a><br />
</div>
</div>
</body>
</html>

Jorgibi...
Actualizacion del pdf
14/8/2010
Hola amigos:

Para cuando la actualizacion del pdf???

No me importa verlo y estudiarlo en la web.... pero imprimirlo, la verdad que es muy comodo!

Gracias por vuestro trabajo.
DjNikc dinamico en base a rellenado de campo...
17/8/2010
Bueno te dejo el codigo q utilizo y mi correo si necesitas todo la solucion q he creado... bueno

<!DOCTYPE html>
<html>
<head>
<title>Dinamic Tr</title>
<script src="jquery.js"></script>
<script src="jquery.easing.js"></script>
<script>
$(document).ready(function(){
$('table').css({border:'1px solid red'});
$('#generar').click(function(){
var $filas = $('#trs').val();
var $tr = "";
for($a=0; $a<$filas; $a++){
$tr += "<tr><td>fila"+$a+"</td></tr>";
}
$('#dinamica tbody').slideUp("easeOutBounce").html($tr).slideDown("easeOutBounce");
});
});
</script>
</head>

<body>
<header>
<h1>Dinamic Tr</h1>
</header>
<section>
<article>
<div>
<label>Numero de Filas:</label>
<input type="text" id="trs" size="2" autofocus/>
<button id="generar">Generar</button>
<table id="dinamica">
<thead>
<tr>
<th>Filas Dinamicas</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</article>
</section>
</body>
</html>

algunas etiquetas son html5 espero sea lo que buscas y preguntabas... la libreria easing tienes q descargarla para q te funcione un peqeño efecto si no la tienes no importa el efecto basico de jQuery sera cargado o aplicado... si tienes dudas o quieres el archivo completo escribeme a william.al1379@gmail.com

salva_p...
Gracias
03/9/2010
Gracias por el trabajo que realizáis.
Sobre la autoría del manual, discutida por el comentario de Luis
03/9/2010
Luis, ante todo gracias por tu comentario y por las puntualizaciones. Pero ya que nos criticas, creemos útil responder directamente tu mensaje:

- Nosotros SÍ citamos en el mencionado capítulo 3 que es un texto inspirado en la ayuda de jQuery.
- Te equivocas al decir que es una traducción, porque no utilizamos las mismas palabras ni ejemplos que los autores de la documentación de jQuery. Decimos que está inspirado en la guía How jQuery Works porque fue nuestro punto de inicio al aprender jQuery, como de tantos otros, y creemos que ese guión también es válido para las personas que están aprendiendo en español.
- Sólo un 10% aproximadamente del manual está inspirado en esa ayuda para empezar a usar jQuery. El resto es totalmente nuestro, y esto es indiscutible, dado que ni en el sitio de jQuery existe un manual explicado como éste, que hemos creado nosotros. (A día de hoy seguimos ampliando este manual, por lo que dentro de poco ese porcentaje todavía será menor)
- Ójala tengamos noticias de John Resig!!!! y estoy totalmente convencido que estará contento con que alguien se tome la molestia de hacer un manual como este en español, para aprender jQuery. Estamos divulgando el framework, creado de manera generosa por John Resig y haciendo que las personas, incluso con conocimientos básicos de Javascript, tengan acceso a tan buena herramienta.

Por todo ello, como te podrás imaginar, estamos orgullosos de este trabajo y de poder ayudar a tanta gente con estos materiales accesibles para aprender acerca del jQuery. Recibimos tus críticas con la conciencia muy tranquila y seguiremos empleándonos a fondo para seguir completando esta guía.
Buenísimo tutorial
Por: sara
23/9/2010
Estoy haciendo todos los ejercicios , uno a uno y me parece fantástico este tutorial, bien explicado, y haciendo hincapie en la API, donde está todo.
Creo que de los 40 artículos publicados falta alguno el el pdf, aunque todavía no he llegado.
Me compré un libro de jquery de Jonathan Chaffer "Aprende Jquery", está muy bien, pero para empezar este tutorial es genial, y jquery lo mismo, no me canso de decirlo, javascript fácil. Parece increíble hacer cosas tan vistosas con tan poco esfuerzo.
PDF para descarga del Manual de jQuery actualizado
24/9/2010
Hola a todos! Acabamos de actualizar el PDF para la descarga del manual de jQuery. Teníamos casi el doble de artículos desde la última actualización de la descarga, así que ya era hora de tomarse la molestia de generar de nuevo este PDF.
Esperamos que sea de provecho para muchas personas!
Pregunta
Por: GaDo
15/11/2010
Es necesario saber Javascript para empezar este tutorial ?. Se HTML y se algo de php. Pero nada de javascript.

Saludos
Sobre saber Javascript para aprender jQuery
15/11/2010
Hola GaDo!
Puedes intentar aprender jQuery sin saber Javascript, pero seguro que te costará mucho más que si conocieras y tuvieras experiencia previa con Javascript, porque realmente vas a tener que aprender las dos cosas al mismo tiempo.
Si tienes ganas de aprender jQuery te recomiendo dedicarle una al menos semana a aprender lo básico de Javascript y luego pasar a aprender el framework jQuery. Así lo encontrarás todo mucho más fácil y tu aprendizaje será más sencillo y agradable.
En DesarrolloWeb.com tienes un par de manuales de Javascript, uno más básico y otro que continua con temas más avanzados. Te recomiendo echarles un vistazo antes.

sondeo
consulta
04/12/2010
oigan ando buscando un tipo de web donde te ensenen a hacer projectos de webs

asi tipo : metroflog , fotolog , egoflog todos son .com

quiero aprender

Tazler
Muy bueno
16/12/2010
Muy bueno de verdad sabia de la existencia del jquery pero no me avia puesto a indagar, estoy volviendo con lo de las paginas web y la verdad es que esta pagina es perfecta gracias.
Muchisimas gracias
Por: ruper
21/12/2010
Muchisimas gracias por todo, está muy currado.
He aprendido muchisimo (y no solo de jquery).

Un saludo,
Volveré y lo recomendaré, como hicieron conmigo!!!!
Excelente
05/1/2011
Quizas no sea el manual mas complejo, pero si que es un buen abrebocas para concer este framework el cual noto es bastante utilizado, quiero agradecer a miguel quien ha creado este estupendo manual y otros mas los cuales son base para mi estudio. Gracias DW !

Axel_Te...
Gracias, muy bueno
21/1/2011
Buen manual, al igual que todos los que he leído. Hablo con conocimiento de causa porque gracias a vosotros he aprendido gran parte de lo que sé de programación web: JavaScript, PHP, CSS... Admiro vuestro trabajo, seguir así ;)
manual jquery
Por: franklyn villasmil
22/1/2011
debo dejar mis felicitaciones al creador(es) de este manual y de muchos otros que estan disponibles en este sitio. de verdad muchas gracias por el material disponible.

exito amigos. continuemos difundiendo el conocimiento.
Porfavor
22/2/2011
Exelente manual, aprendi bastante Gracias de verdad.

me surgio un problema:
Estoy creando una página web, usando: html, php, ajax, jquery, javascript, mysql.
para abrir las aplicaciones php estoy ocupando el WampServer.
bueno, a mi pagina incorpore los tabs de jquery, en internet explorer (IE) abro el http://localhost/mipagina/index.php y la página se muestra sin problemas...

AHORA VIENE LA FÁLLA, cuando abro http://localhost/mipagina/index.php en firefox no aparece formado los tabs, solo aparecen los link para vincular hacia los contenidos de los tabs.

Cual es el error que puede existir en este problema?
Porfavor ayudenme en este problema, se los agradeceria bastante, bendiciones y de atemanos muchas gracias.

osvaldo...
El archivo zip está corrupto
13/3/2011
Hola, cuando lo descargo al querer abrirlo da error de contenido. Con los otros manuales no había problema, solo este.

Saludos.

Dark_Oz...
Error archivo dañado.
14/3/2011
Me ocurre lo mismo.

Ojala lo arregléis pues me interesa muchísimo, me registré solo por poder bajarlo.

Un cordial saludo.

lorenab
El zip está dañado
22/3/2011
Una decepción porque lo necesito ya y me registré sólo para poder descargarlo.

blassit...
El zip dañado
08/4/2011
Alguna novedad?

cuando vuelven a subir el archivo...

Claudio...
Gracias
13/4/2011
Muchas gracias por el manual...
aunque postee poco... debo confesar que me estoy haciendo adicto a desarrolloweb...

jorpeh0...
Hola a todos
30/4/2011
Muy bueno este manual, la verdad me ha servido de mucho para iniciarme en el uso de JQuery.. ya sabía JavaScript pero el uso de JQuery es increible.
Saludos al equipo de desarrolloweb

PepitaR...
Muy Bueno
11/5/2011
Muy bueno el manual, me ayudo mucho a entender lo que era jquery y su aplicacion.
MANUAL DE JQUERY
Por: GUILLERMO TOVAR
20/6/2011
Simplenete, el manual es excelente. Sencillo y completo.
Mil gracias.

Guillermo Tovar

jess_or...
Pregunta
13/7/2011
Cuando recibo elementos por ajax no puedo manipular la clase desde la página principal, por ejemplo, si me traigo un <a href y le quiero asosiar un botón del UI no me premite, solo para los <a href de la misma pagina....

Como puedo resolver esto?

reghyna
problema con evento clik con jquery
13/8/2011
Necesito su ayuda por favor, redimensiono imágenes cargadas en una ventana modal osea un div con style.display = 'block' de la siguiente forma:

<div id="img_up"style="display:none;">
<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="submit" name="upload_thumbnail" value="Save" id="save_thumb" />
</form>
</div>

y se definio :

$(document).ready(function () {
$('#save_thumb').click(function() {
alert("in");
});
});

Pero despues de pulsar el submit Save nunca ejecuta el alert !!
les quedo agradecida ...........
pero

luismi8...
Re: reghyna
18/8/2011
En respuesta a

Necesito su ayuda por favor, redimensiono imágenes cargadas en una ventana modal osea un div con style.display = 'block' de la siguiente forma:

<div id="img_up"style="display:none;">
<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="submit" name="upload_thumbnail" value="Save" id="save_thumb" />
</form>
</div>

y se definio :

$(document).ready(function () {
$('#save_thumb').click(function() {
alert("in");
});
});

Pero despues de pulsar el submit Save nunca ejecuta el alert !!
les quedo agradecida ...........
pero

No se si es lo que buscas
<!DOCTYPE html>
<html>
<head>
<title>Dinamic Tr</title>
<script src="jquery-1.5.1.min.js"></script>
<script src="jquery.easing.js"></script>
<script>
$(document).ready(function(){



$('#save_thumb').click(function() {
alert("in");
});
});
</script>
</head>

<body>

<div id="img_up" style="display:block;">
<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="submit" name="upload_thumbnail" value="Save" id="save_thumb" />
</form>
</div>

</body>
</html>
Creacion de Plugins
02/9/2011
Estoy intentando realizar un plugin para manejo de selects en el que pueda pasar parametros para cargar otro select y ademas si es necesario pasar los ide de algunos campos a bloquear... lo he realizado como explica en el manual pero cuando le asigno el pluguin a avrios selects el me toma los parametros del ultimo... que sera que pasa?

------------
// JavaScript Document
( function($) {

$.fn.valida_select = function(opciones){

var conf_default = {
dat_error:'', // elemento que no debe estar seleccionado
bloquear:false, // si va a bloquear objetos
cmps_diseable:[], // objs a bloquear

classError:'campos_error',
classValid:'campos',

list:false,
url:"",
dest:"",
};

return this.each(function(){
conf = $.extend(conf_default, opciones);
$(this).change(function(){

if(conf.dat_error==$(this).val()){
$(this).addClass(conf.classError).removeClass(conf.classValid);
if(conf.bloquear){
bloquea_obj(conf);
}
}else{
$(this).addClass(conf.classValid).removeClass(conf.classError);
desbloquea_obj(conf);
}

if(conf.list==true && (conf.dat_error!=$(this).val())){
$.post(conf.url,{cod:$(this).val()},function(data){
$("#"+conf.dest).html(data);
})
}

function desbloquea_obj(conf){
tam=conf.cmps_diseable.length;
for(i=0;i<tam;i++){
$("#"+conf.cmps_diseable[i]).removeAttr("disabled")
}
};

function bloquea_obj(conf){
tam=conf.cmps_diseable.length;
for(i=0;i<tam;i++){
$("#"+conf.cmps_diseable[i]).attr({disabled:"disabled"})
}
};
});



});

};
})(jQuery);

esteban...
Gracias
04/10/2011
Excelente tutorial... lo q necesita todo desarrollador web :)

ernesto...
gracias
30/1/2012
chido por el manual
muy bien

En este manual
Manuales relacionados
Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...