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 esenciales para el desarrollo web, 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, compatibles 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 de funciones, ú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 Explorer, Chrome, Firefox, etc. sino que la propia librería hará el trabajo "sucio" por nosotros y ejecutará el código que sea compatible con el software del cliente que está accediendo a nuestra web. Para ello usaremos las funciones que jQuery nos proporciona, dentro de un grandísimo abanico de funcionalidades que además se extiende por medio de miles de plugins que ofrece la comunidad para implementar cualquier tipo de comportamiento.

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". En DesarrolloWeb.com encontrarás varios manuales de Javascript.

En el presente manual te acercamos todas, o la mayoría de, las funcionalidades que están presentes en el "core" de 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 lo disfrutes y si te gusta lo compartas en tu blog o en redes sociales con tus amigos.

Ver los capítulos

Si te parece útil este manual ayúdanos compartiendo!! :)

Descargar como libro electrónico

Este texto 'Manual de jQuery' se encuentra disponible para descarga como libro electrónico. Ideal para imprimir o leer en el ordenador personal, dispositivos y eReaders.

Puedes acceder a través de la App de DesarrolloWeb.com

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

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

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

25.- 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.

26.- Eventos en jQuery

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

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

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

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

30.- 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

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

32.- 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

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

34.- Plugins en jQuery

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

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

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

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

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

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

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

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

42.- 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.
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.

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

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

45.- 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

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

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

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

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

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

51.- 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.

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

53.- Entendiendo 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.
Entrar

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

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

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

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

58.- 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

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

29/5/2009
El link
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

midesweb

29/5/2009
Vamos a poner esta descarga de manual
Estamos en ello... en breve tendréis el PDF del manual de Jquery y del de programación....

Leo

10/9/2009
Continuidad con el Manual
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

midesweb

17/9/2009
No nos hemos olvidado de jQuery
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_pando_miguel

05/11/2009
Manual Incompleto
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.

Jorgibiris

06/11/2009
Lento pero seguro
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.

Alberto

10/12/2009
Felicitaciones
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_salgado

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

Podrian actualizarlo.

Saludos

Entropia7

10/2/2010
Manual JQuery
Muy bueno el tuto, felicidades por el trabajo.
Muchas gracias.

midesweb

11/2/2010
Descarga actualizada!
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

16/2/2010
Un gran manual
Muchas gracias por este manual, esta muy bueno. La verdad adoro esta pagina, saca de apuros jejejej. Saludos

juan carlos

03/5/2010
Bases de datos
como es el manejo de bases de datos con jquery cargar datos en grids o listbox??
ejecucion de intrucciones, stored procedures??

Luis

20/5/2010
¿Referencia a los verdaderos autores?
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...

Fraan

28/5/2010
Menu desplegable
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>

Jorgibiris

14/8/2010
Actualizacion del pdf
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.

hackalexiusw

17/8/2010
DjNikc dinamico en base a rellenado de campo...
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_ppp

03/9/2010
Gracias
Gracias por el trabajo que realizáis.

midesweb

03/9/2010
Sobre la autoría del manual, discutida por el comentario de Luis
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.

Paula

14/9/2010
Manual JQuery
Muy bueno el manual. Me sirvió muchísimo..<br />
<br />
Gracias!

bruno arg

18/9/2010
Felicitaciones
Muy buen tranajo!!
Mala onda los que critican y no hacen nada!
Salu2

sara

23/9/2010
Buenísimo tutorial
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.

midesweb

24/9/2010
PDF para descarga del Manual de jQuery actualizado
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!

GaDo

15/11/2010
Pregunta
Es necesario saber Javascript para empezar este tutorial ?. Se HTML y se algo de php. Pero nada de javascript.

Saludos

midesweb

15/11/2010
Sobre saber Javascript para aprender jQuery
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

04/12/2010
consulta
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

Javier

15/12/2010
Manual JQuery
Varios meses y ninguna actualización de temas en este manual. <br />
seguimos esperando....

Tazler

16/12/2010
Muy bueno
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.

ruper

21/12/2010
Muchisimas gracias
Muchisimas gracias por todo, está muy currado.
He aprendido muchisimo (y no solo de jquery).

Un saludo,
Volveré y lo recomendaré, como hicieron conmigo!!!!

cesc1989

05/1/2011
Excelente
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_Tech

21/1/2011
Gracias, muy bueno
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í ;)

franklyn villasmil

22/1/2011
manual jquery
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.

MasterAkel

22/2/2011
Porfavor
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_sevilla

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

Saludos.

Claudio72188

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

jorpeh02

30/4/2011
Hola a todos
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

PepitaRonderos

11/5/2011
Muy Bueno
Muy bueno el manual, me ayudo mucho a entender lo que era jquery y su aplicacion.

santiago

23/5/2011
felicitaciones
La verdad felicitaciones por este aporte, me sirve pila para sacarme dudas que arrastro de mis clases de programacion. Soy santiago y escribo desde URUGUAY

Damian

23/5/2011
Coincidencias en el autocomplete
Haber si alguien me puede ayudar, ya que no puedo hacer coincidir el caracter ingresado con el inicio de cada palabra, de una lista de términos en el autocomplete.
Ahora en mi sitio (www.glosarioit.com) si se fijan el autocomplete muestra las coincidencias de caracteres como yo quiero, o sea desde el inicio de cada palabra.
Por ejemplo, se ingresa: "as" se muestra->"ASCII", "Aserciones", "Ashar"... esto con el jQuery Autocomplete plugin 1.1 y asi quiero que quede mi autocomplete con jQuery UI Autocomplete 1.8.13.

Pero ahora con el nuevo jQuery UI Autocomplete 1.8.13 esto no sucede.
Por ejemplo, se ingresa: "as" se muestra->"100baseT", "Alias", "anycast"... y asi no quiero que se muestre mi autocomplete.

Como puede ser que siendo el jQuery UI Autocomplete 1.8.13 mas reciente no pueda lograr lo que quiero, debe haber alguna opción para que las coincidencias se hagan como yo quiero.

ADrian

19/6/2011
Gracias eugim
eugim Dios te bendiga en grande, gracias por compartir tus conocimientos ya q eso cualquiera no lo hace, felicitaciones por el manual de jquery bien explicado y todo !!

gracias !!!

GUILLERMO TOVAR

20/6/2011
MANUAL DE JQUERY
Simplenete, el manual es excelente. Sencillo y completo.
Mil gracias.

Guillermo Tovar

jess_orozco

13/7/2011
Pregunta
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?

max

21/7/2011
beneficio
porfavor sigan subiendo manuales es de gran ayuda para nosotros los principiantes sobre todo en este area

reghyna

13/8/2011
problema con evento clik con jquery
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

luismi84

18/8/2011
Re: reghyna
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>

jarcho

02/9/2011
Creacion de Plugins
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_giraldo-445114

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

KaYCer

26/11/2011
Ayudame
Hola primero lei cada uno de los articulos y bueno me ayudo mucho.

pero x otro lado qqueria saber si tienes un manual para definir jquery


lo que sucee es que cuando quiero entrar a unna aplicacion de una pagina web

me sale jquery no esta definido

y no se donde o como definirlo pues es una pagina web que noes mia

si me ayudas te lo agradaceria te dejo mi maill


kaycer@hotmail.com

telesmash

02/1/2012
Incompatibilidades entre scripts jquery
Buenas noches:

Estamos elaborando la plantilla de nuestro nuevo blog y estamos teniendo incompatibilidades con scripts. Al incoporar un slider con efecto parpadeo, el efecto deslizante del menú ha dejado de manifestarse.

He identificado el script que me estropea el efecto deslizante del menú. Es este:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Creo que las incompatibilidades se crean con el script anterior y estos dos:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

Porque cuando borro el primero vuelve a manisfestarse el efecto deslizante del menú. ¿Podría alguien ayudarme por favor? Mi mail es: telesmash@gmail.com

ernestotk

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

Walter

08/2/2012
Select Multiple
Hola jarcho:
El problema que debes tener es que tu plugin funciona con una sola instancia. Lo que debes crear es un mecanismo para soportar múltiples instancias del plugin, como por ejemplo un array que almacene los parámetros únicos de cada instancia que uses, este array puede identificar a cada instancia con el id del elemento al que le aplicas tu plugin. Así cada vez que crees o utilices tu plugin con un elemento, este tenga parámetros y funciones que afecten a la instancia de ese elemento.

15/2/2012
NO SE PUEDE ABRIR
Da un error al abrirlo. He solicitado asistencia pero no han contestado.

Cristiank

29/3/2012
Ayuda
Bueno primero agredecer por el manual que está muy bueno; además quería pedir ayuda con un problema que tengo...
Pues lo que quiero hacer es obtener el número de tr que hay en una tabla, el problema de esto es que el id de la tabla lo consigo de una variable, algo así...

var cadena = "mitabla";
var tablita = document.createElement('table');
tablita.id = cadena;
var nro_filas = $("#tablita.id tr').size(); // acá es donde tengo el problema

no se cuál sería el código para coger las tr de la tabla con id -> tablita.id

el problema en sí es que no se puede colocar 'tablita.id' luego del '#'

espero me puedan ayudar...
Gracias

Marioachtung02

04/4/2012
PETICION
NOSE COMO SEA LA DESCARGA DEL MANUEL YO LE DOY AL LINK DE DESCARGA MANUAL 1 PERO NO ME CARGA NADA EN LA SIGUIENTE PAGINA !!!
¬¬ AYUDA

Cristian Parada

25/4/2012
Como descargar
Como hago para descargarlo...en PDF.

jender23

10/5/2012
Manual Jquery
Exelente manual recomendado.

Alejandro Flores

18/5/2012
Manual de JQuery
Mil Gracias me ha ayudado mucho tu manual esta muy bien explicado, con esto me decido a pasarme de NET en que trabajo a php que me ha gustado mucho.

Maider_atxe

12/6/2012
Incluir framework
Hola. Muchísimas gracias por el tutorial. Voy a desarrollar una página web con este framework y en todas las páginas tengo que insertar "<script type="text/javascript" src="./scripts/jquery-1.7.2.min.js"></script>". La cosa es que si actualizan la versión del framework tendré que cambiar una a una todas las páginas. Mi pregunta es: ¿Cómo puedo crear un archivo en el que escriba esta línea y en el resto de páginas sólo llamo a ese archivo? De esta forma, cuando actualice la versión sólo tendré que cambiarlo en un script. Gracias!!!!

Hostingcolombia

20/7/2012
Revisión código jquery
He dado un vistaso al código y no encontré el problema, si alguien encuentra la falla pasar la info. el codigo es el siguiente:

<!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.hostingbarranquilla.com" title="Hosting Colombia">Hosting Colombia</a><br />
</div>
</div>
</body>
</html>

ferlormar

20/8/2012
Manual Jquery
Excelente manual. Me está sirviendo de mucho
Sigan con los ejemplos sobre jQuery.

alx_salazar

14/9/2012
Agradecimiento
Un saludo para empezar y para decirles que hacen un excelente trabajo con estos manuales son muy didacticos y practicamente te ayudan a resolver problemas importantes..

25/9/2012
Copyright Desarrollo web
No creo que el sir Jhon Resig todavía tenga el derecho a este articulo aun cuando todo fue copy/paste por el hecho de que el manual esta en español así que Luis cállate y a dormir! Gracias amigo me ha sido de gran ayuda ya que es re difícil encontrar el manual en español.

alx_salazar

27/9/2012
Agradecimiento
un excelente manual!!!! me a servido de mucho para empesar a manipular y aprender jquery...

Zcz

13/10/2012
Error
Porfavor podrían dar la opción para descargar este manual?

Burzum

24/1/2013
Gracias
se les agradece, bastante fácil de comprender

Mónica

20/5/2013
Manual de jQuery
Muchísimas gracias por el manual. Después de buscar varios tutoriales de JQuery, este manual me pareció muy interesante y muy bien explicado.

icorrales

23/5/2013
error en los links?
Hola a todos. No se puede acceder a los capítulos del manual o soy solo yo? Es un problema temporal?
Gracias.

icorrales

23/5/2013
error en los links SOLUCIONADO!!!
perdonar por el comentario anterior. Ya sí que puedoc acceder a los capítulos. Supongo que sería un problema temporal en el servidor...

paco

12/6/2013
ejemplos
//1.Selecciona todos las etiquetas tipo <p>.
if($('p').length){numero=$('p').length;alert('el numero de <p> son '+numero);}
//2.Selecciona todos los elementos cuya clase es texto.
if($('.texto').length){numero=$('.texto').length; alert('el numero de elementos de clase texto son '+numero);} }
//3.Selecciona el elemento cuyo id es main.
if($('#main').length){numero=$('#main').length;alert('el numero de elementos de id main son '+numero);}
//4.Selecciona aquellas etiquetas <h2> que se encuentran en el elemento cuyo id es main.
if($('#main h2').length){numero=$('#main h2').length;alert('el numero de elementos <h2> '+numero);}
//5.Selecciona aquellas etiquetas <u> que se encuentran dentro de la clase texto.
if($('.texto u').length){numero=$('.texto u').length;alert('el numero de elementos <u>'+numero);}
//6.Selecciona aquellas etiquetas tipo <input> cuyo atributo type es igual a text.
if($('input[type=text]').length){numero=$('input[type=text]').length;alert('el numero de etiquetas tipo <input>'+numero);}
//7.Selecciona dntro del element cuyo id s main, aqllas etiqtas tipo <p> cuya clas s txto
// y dentro de estas las etiquetas tipo <u>
if($('#main p.texto u').length){numero=$('#main p.texto u').length;alert(numero);}
//8.Selecciona dentro del elemento cuyo id es main, aquellas etiquetas tipo <p> cuya clase no sea texto.
if($('#main p[class!=texto] ').length){numero=$('#main p[class!=texto] ').length;alert(numero);}
//9.Selecciona dentro del elemento cuyo id es main, la tercera etiqueta de tipo <p>
if($('#main p:eq(2)').length){ numero=$('#main p:eq(2)').length;alert(numero);}
//10.Selecciona dentro del elemento cuyo id es main, las etiquetas pares de tipo <li>
if($('#main li:even').length){numero=$('#main li:even').length;alert(numero);}
//11.Selecciona dentro del elemento cuyo id es main, las etiquetas impares de tipo <li>.
if($('#main li:odd').length){numero=$('#main li:odd').length;alert(numero);}
//12.Selecciona todos los <div> desde el el cuarto en adelante.
if($(' div:gt(2)').length){numero=$('div:gt(2)').length;alert(numero);}
//13.Selecciona aquellos párrafos dentro del elemento cuyo id es main que contengan algún elemento <u>.
if($('#main p:has(u)').length){numero=$('#main p:has(u)').length;alert(numero);}
//14.Selecciona aquellos párrafos cuya clase no sea texto.
if($('p:not(.texto)').length){numero=$('p:not(.texto) ').length;alert(numero);}
//15.Selecciona todos los div salvo aquel cuyo id sea footer
if($(' div:not(#footer)').length){numero=$('div:not(#footer)').length;alert(numero);}
//16.Selecciona todos los botones que existan en el formulario
if($(':button').length){numero=$(':button').length;alert(numero);}
//17.Selecciona el primero de los cuadros de texto existentes en el formulario.
if($('input[type=text]:first').length){numero=$('input[type=text]:first').length;alert('existe');}
//18.Selecciona todos los elementos hijo del elemento cuyo id es main.
if($('#main>*').length){//si poñemos sin o > colle fillos e netos co > colle solo netos
numero=$('#main>*').length;alert('existen '+numero+' elementos');}
//19.Selecciona todos los elementos hijo que sean de tipo <p> del elemento cuyo id es main.
if($('#main p').length){numero=$('#main p').length;alert('existen '+numero+' elementos');}
//20.Selecciona todos los elementos hermanos que sean del tipo <div>, situados después del elemento cuyo id es main.
if($('#main ~ div').length){numero=$('#main ~ div').length;alert('existen '+numero+' elementos');}
//21.Selecciona el elemento de tipo <div> que sigue al elemento cuyo id es main.
if($('#main + div').length){numero=$('#main + div').length;alert('existen '+numero+' elementos');}
//22.Selecciona el último elemento de tipo <p>.
if($('p:last').length){numero=$('p:last').length;alert('existen '+numero+' elementos');}
//23.Selecciona dentro del elemento cuyo id es main, los tres primeros párrafos..
if($('#main p:lt(3)').length){numero=$('#main p:lt(3)').length;alert('existen '+numero+' elementos');}
//24.Selecciona todos los elementos habilitados en el formulario.
if($(':enabled').length){numero=$(':enabled').length;alert('existen '+numero+' elementos');}
//25.Selecciona todas las etiquetas de título pares de la página.
if($(':header:even').length){numero=$(':header:even').length;alert('existen '+numero+' elementos');}
//26.Selecciona todos los elementos de tipo <p> cuya clase
// no es paraf que se encuentran dentro del elemento cuyo id es sidebar.
if($('#sidebar p:not(.paraf)').length){numero=$('#sidebar p:not(.paraf)').length;alert(numero);}
//27Selecciona aquellos elementos de tipo <p>, que son los primeros hijos de su padre.
if($('p:first-child').length){numero=$('p:first-child').length;alert(numero);}
//28.Selecciona aquellos elementos de tipo <li>, que son los últimos hijos de su padre.
if($('li:last-child').length){numero=$('li:last-child').length;alert('existen '+numero+' elementos');}
//29.Selecciona aquellos elementos de tipo <li>, que son los últimos hijos de su padre,que es un el de tipo <ol>.
if($('ol li:last-child').length){numero=$('ol li:last-child').length;alert('existen '+numero+' elementos');}
//30.Selecciona aquellos elementos de tipo <li>, que son los terceros hijos de su padre.
if($('li:nth-child(3)').length){numero=$('li:nth-child(3)').length;alert('existen '+numero+' elementos'); }
//31.Selecciona aquellos elementos de tipo <li>, que son los terceros hijos de su padre que es un elemento de tipo <ol>
if($('ol li:nth-child(3)').length){numero=$('ol li:nth-child(3)').length;alert('existen '+numero+' elementos');}
//32.Selecciona aquellos elementos de tipo <li>, que son los hijos pares de su padre.
if($('li:nth-child(even)').length){numero=$('li:nth-child(even)').length;alert('existen '+numero+' elementos');}
//33.Selecciona aquellos elementos de tipo <a>, que son hijos unicos
if($('a:only-child()').length){numero=$('a:only-child()').length;alert('existen '+numero+' elementos');}
//34.Selecciona aquellos ele de tipo <a>, que son hijos únicos,y que se encuentran dentro del ele cuyo id es menu.
if($('#menu a:only-child').length){numero=$('#menu a:only-child').length;alert('existen '+numero+' elementos');}
//35.Selecciona aquellos elementos de tipo <p> que contengan la cadena documento
if($(':contains(documento)').length){numero=$(':contains(documento)').length;alert('existen '+numero+' elementos');}
//36.Sel aquellos elemede tipo <u> que se encuentran dentro de un ele de tipo <p> cuya clase es texto, y q contengan la cadena HTML.
if($('p.texto u:contains(HTML)').length){ numero=$('p.texto u:contains(HTML)').length;alert(numero);}
//37.Selquellos ele de tipo <p> vacíos, que se encuentran dentro del ele cuyo id es sidebar2.
if($('#sidebar2 p:empty').length){numero=$('#sidebar2 p:empty').length;alert('existen '+numero+' elementos'); }
//38.Selecciona aquellos elementos de tipo <p> que son padre y que se encuentran dentro de un elemento div.
if($('div p:parent').length){numero=$('div p:parent').length;alert(numero);}
//39.Selecciona aquellos elementos de tipo <p> que tienen un elemento de tipo <u> en su interior.
if($(' p:has(u)').length){numero=$('p:has(u)').length;alert('existen '+numero+' elementos');}
//40.Selecciona aquellos elementos de tipo <p> menos aquellos que tengan en su interior algún elemento de tipo <u>.
if($(' p:not(:has(u))').length){numero=$('p:not(:has(u))').length;alert('existen '+numero+' elementos');}
//41.Selecciona aquellos elementos de tipo <p> que tengan el atributo class.
if($("p[class]").length){numero=$("p[class]").length;alert('existen '+numero+' elementos');}
//42.Selecciona aquellos elementos de tipo <p> que no tengan el atributo class.
if($("p:not([class])").length){numero=$("p:not([class])").length;alert('existen '+numero+' elementos');}
//43.Selecciona aquellos elementos de tipo <div> cuyo atributo id termina por r.
if($("input[name$='letra']").length){numero=$("p:not([class])").length;alert(numero);}

paco

12/6/2013
ejemplo
//1.Establece como contenido de la etiqueta h2 q se encuentra dentro del div cuyo id es #sidebar el texto Prueba1.
$('#sidebar h2').html("prueba");
//2.Establece como contenido de la primera etiqueta h2 que se encuentra dentro del
//div cuyo id es #main el texto Prueba2, y en la misma instrucción establece como
//texto para la segunda etiqueta h2 el texto Prueba3.
$('#main').find('h2').eq(0).html('prueba2').end().eq(1).html('prueba3');
//3.Dentro del elemento cuyo id es main, establece como contenido de la primera
//etiqueta <li> el texto Lista cero, y en la misma instrucción establece como texto
//para la primera etiqueta <h2> el texto Este es mi blog.
$('#main').find('li').eq(0).html('lista0')
.end()//con este end estan en li y tienes que poner otro end para subir a main
.end().find('h2').eq(0).html('este es mi blog');
//4.Dentro del elemento cuyo id es main, localiza el párrafo cuya clase es texto
//y establece como contenido del mismo párrafo nuevo, en la misma instrucción establece
//como contenido del tercer párrafo 2014. Hay que usar filter.
$('#main').find('p')
.filter('.texto')//estan seleccionados todos os p e con filter colle o class texto o poñer o end colle o terceiro
.html('parrafo nuevo').end().eq(2).html('2014');
//5.Dentro del elemento cuyo id es sidebar2, localiza la primera etiqueta h2, y establece
//como contenido de la misma Enlaces, posteriormente localiza el elemento de tipo a, cuyo
//atributo href contiene la cadena as, y establece como contenido del enlace la cadena Diario As.
$('#sidebar2').find('h2').eq(0).html('enlaces').end() .end()
.find('a[href*="as"]')//en algun punto contiene as ejemplo en pasada
.html('diario as');
----------------------------------------------------------------------------------------------------------------
//1.Visualiza el número de hijos que tiene el div cuyo id es sidebar,
//posteriormente recorrelos y muestra su numero y html
alert ($('#sidebar').children().length);
$("#sidebar").children().each(function(x, el) {console.log('El ele'+ x +'tiene el siguiente HTML:'+$(el).html())});
//2.Visualiza el número de hermanos que tiene el div cuyo id es sidebar.
alert ($('#sidebar').siblings().length);
----------------------------------------------------------------------------------------------------------------
//1.Empleando el método each crea una función que modifique el html d
//los elementos li que se encuentran dentro del div cuyo id es main, de
//modo que cada elemento contenga el texto Cadena 1 (para el primer elemento),
//Cadena 2 (para el segundo elemento), etc.
$("#main li").each(function(x, el) {$(el).html('cadena'+(x+1));});
//1.Comprueba si el segundo párrafo del elemento cuyo id es #main tiene la clase texto.
console.log($('#main p').eq(1).hasClass("texto"))
//2.Añade la clase texto a todos los párrafos que hay en el div cuyo id es sidebar.
$("#sidebar p").addClass("texto")
--------------------------------------------------------------------------------------------------------------------
//1.Establece primero como id del primer párrafo.
$('p').eq(0).attr('id','primero');
//2.Establece el atributo id en primero, y el atributo class en segundo para el primer párrafo.
$('p').eq(0).attr('id','primero').attr('class','segundo');
//3.Establece como id de los párrafos par1, par2, .....
$("p").each(function(x, el) {//en 'el' gardase cada p//$(el).attr('id','parrafo'+(x+1));});
//4.Establece como id de los div, div1, div2, ..., sólo para aquellos div que no tengan el atributo id.
$("div:not([id])").each(function(x, el) {$(el).attr('id','div'+(x+1));});
//5.Localiza los párrafos que tengan el atributo class, y visualiza el valorde dicho atr para cada uno de ellos.
$('p[class]').each(function(x, el) {(console.log($(el).attr('class')))});
//6.Establece el atributo value de los dos elementos input tipo text en prueba.
$(":text").val("prueba")
//7.Establece el color (verde), y letra (14) de aquellosdiv que tengan el atributo id, y no tengan el atr class.
$("div[id]:not([class])").css({backgroundColor:'green',fontSize:'14px'});
//8.En una sola instrucción establece el color de fondo del primer párrafo en rojo,
//así como la letra en negrita, mientras que el color de fondo del último párrafo
//será amarillo, y la fuente sera Arial. Finalmente divide el código en varias
//líneas para mejorar su legibilidad.
$('p').eq(0).css({'background-color':'red','font-weight':'bold'}).end().filter(':last').css({'background-color':'yellow','font-style':'arial'})
//9.Localiza aquellos párrafos que tengan el atributo class, y elimina dicho atributo de todos ellos.
$("p[class]").removeAttr("class");
//10.Establece un color de fondo rosa a todos los div que tenga un elemento hijo h2.
$('h2').parent("div").css({'background-color':'pink'})
//11.Establece un color de fondo rosa a todos los elementos que tenga un elemento hijo h2, y que no sean div.
$('h2').parent().not("div").css({'background-color':'pink'});
------------------------------------------------------------------------------------------------------------------
//1.Establece el ancho del primer elemento h2 a 100px.
$("h2").eq(0).width(100);
//2.Establece la altura de todos los elementos p a 150 px.
$("p").height(150);
//3.Aplica a todos los elementos <li>, que se encuentren en el div cuyo id es main, un estilo donde se muestren
//en vez de números viñetas con forma cuadrada. El texto de cada elemento aparecerá en negrita.
$('#main li').css({'font-weight':'bold','list-style':'square'})
//4.Visualiza el atributo class del quinto párrafo que se encuentra dentro del div cuyo id es sidebar.
console.log($('#sidebar p').eq(4).attr('class'))
//5.Modifica el atributo value y maxlength del primer input que se encuentra en el div cuyo id es sidebar,
//y establecelos en admin y en 10 respectivamente.
$('#sidebar input').eq(0).val('admin').attr('maxlength','10')
--------------------------------------------------------------------------------------------------------------------

//1.Haz que al cargarse el DOM, el foco se sitúe en el primer elemento de tipo input,
//que tiene como atributo type el valor text.
$('input[type=text]:first').focus()//cursor parpadeando
//2.Establece una función que se ejecutará al hacer clic sobre los elementos de tipo <li> que se encuentran
//en el elemento cuyo id es menu; la función mostrará el texto del elemento <li> en el que hemos hecho clic.
$('#menu li').click(function() {alert($(this).text());})
//4.Establece una función que se ejecutará al entrar el cursor del ratón en el elemento cuyo id es sidebar2,
// y la función mediante un contador mostrará en el primer input de tipo texto, el número de veces que se
// ejecuta la función. Emplea el parámetro data del objecto del evento, para pasarle a la función el contador.
// Emplea inicialmente el evento mouseover y después mouseenter y compará los resultados de las dos ejecuciones.
var contador=0;
$("#sidebar2").css({'background-color':'black'});
$('#sidebar2').mouseenter(function () {
contador++
$(":text:first").val(contador);
})

PACO

12/6/2013
EJEMPLO
//5.Establece una función que se ejecutará al modificar cualquiera de los campos de tipo texto del formulario,
//y la función visualizará el contenido de todos los campos de tipo texto del formulario.
$(':text').change( function(){$(":text").each(function(x, el) {console.log($(el).val())})})
//6.Crea tres casillas de verificación con los títulos Prueba, Prueba1 y Prueba2 dentro
// del div cuyo id es sidebar2, de modo que al cambiar el estado de cualquiera de estas
// se ejecute un evento, que nos muestre los títulos de que están activados.
$(':checkbox').change(function(){$(':checkbox:checked').each(function(x,el){
console.log($(el).attr("name")+' esta seleccionado')})})
//7.Establece una función que se ejecutará al seleccionar cualquier texto en los
//campos de tipo texto del formulario, y se pondrá el fondo de los mismos de color
//amarillo, si hay seleccionado un sólo carácter, mientras que si hay más de uno
//el fondo será rojo. En el momento en que no haya ningún texto seleccionado
//desaparecerá el fondo de los mismos.
$(':text').select( function(){
var selec=window.getSelection().toString();
if (selec.length==1) {
$(this).css({'background-color':'yellow'})
} else {
$(this).css({'background-color':'red'})
}
});
$(":text").keydown ( function(){
if (window.getSelection().toString.length==0) {
$(this).css({'background-color':'white'});
}
});

//8.Modifica el tipo del botón, y establecelo de tipo submit; y posteriormente
//haz que al ejecutarse el submit del formulario nos compruebe que la contraseña
// y el id del cliente son distintos, en caso contrario que muestre un error.
$("form").submit(function(){
if($(':text:first').val()!=$(':text:eq(1)').val()) {
alert ("ok")
} else {
alert ("Error");
}
});
--------------------------------------------------------------------------------------------
//1.A partir del fichero mentor.html, asocia empleando bind, una función a todos los párrafos,
//para los eventos click y mouseout, de modo que pasandole dos párametros, uno será una variable
//que contendrá el número de veces que se hace click en los párrafos, y el otro será una variable
//que contendrá el número de veces que se sale de un párrafo, visualicemos en los dos elementos tipo text,
//dichos valores, los cuales se irán incrementando cada vez que se haga click en un párrafo y cada vez que
//salgamos de un párrafo. El primer elemento tipo text lo usaremos para mostrar el número de clicks que se
//hacen en los párrafos, y el segundo tipo text para mostrar el número de veces que se sale de un párrafo.
//Una vez que todo funciona, emplea la función unbind para eliminar las acciones asociadas a los eventos,
//para ello al hacer clic en el botón ejecutaremos dicha función, y a partir de este momento ya no se volverán
//a ejecutar las funciónes asociadas a los eventos anteriores.
$("p").bind("click mouseout",{clickado:0,salida:0},function(e) {
if(e.type=="click"){
e.data.clickado++;
$(':text').eq(0).val(e.data.clickado);
}
else{
e.data.salida++;
$(':text').eq(1).val(e.data.salida);
}
});
$(':button').click(function(){
$('p').unbind();
});
//Modifica la actividad anterior, de modo que la función asociada a los eventos
//solo se ejecute una vez para cada párrafo, y verifica que realmente funciona,
//comprobando en varios párrafos que la función sólo se ejecuta una vez para cada uno de los dos eventos.
$("p").one("click mouseout",{clickado:0,salida:0},function(e) {
if(e.type=="click"){
e.data.clickado++;
$(':text').eq(0).val(e.data.clickado);
}
else{
e.data.salida++;
$(':text').eq(1).val(e.data.salida);
}
});

//Crea una función que al perder el foco cualquiera de los elementos de tipo texto,
//se ponga el fondo del mismo de color naranja, posteriormente empleando trigger
//provoca que el primer elemento de tipo texto pierda el foco.
$(':text').blur(function() {
$(this).css({'background-color':'orange'});
});
$(':text:first').trigger('blur');//o executar automaticamente o primeiro text vai perder o foco e poñerse naranxa
--------------------------------------------------------------------------------------------------------------
//1.Visualiza el código html del div cuyo id es sidebar.
console.log($("#sidebar").html());
//2.Repite el apartado anterior pero ahora mostrando el texto sin las etiquetas de html.
console.log($("#sidebar").text());
//3.Visualiza el texto de los elementos li que se encuentran dentro del div cuyo id es main.
console.log($("#main li").text());

//4.Modifica el texto del segundo elemento li que está dentro del div cuyo id es main.
console.log($("#main li:eq(1)").text('hola caracola'));

//5.Modifica el atributo value del segundo elemento input que está dentro del div cuyo id es sidebar.
console.log($("#sidebar input:eq(1)").val("caracola"));
---------------------------------------------------------------------------------------------------------------

//1.Situar el primer elemento li que se encuentra en el div cuyo id es main al final de la lista.
$('#main li:first').appendTo('#main ol');//appendto significa al final en este caso del ol dentro del main

//2.Crea un nuevo elemento li y añadelo al final de la lista
//$('<li>ejemplo de lista cuatro</li>').appendTo('#main ol');con el appendto
$('#main ol').append('<li>ejemplo de lista cuatro</li>')//otra forma

//3.Crea un nuevo elemento li y añadelo al principio de la lista.
$('<li>ejemplo de lista cero</li>').prependTo('#main ol')//;con el prependto
//$('#main ol').prepend('<li>ejemplo de lista cero</li>')
----------------------------------------------------------------------------------------------------------------

//1.Obten una copia del segundo elemento li que se encuentra en el div cuyo id es
// main, e insertala al final de la lista.
$('#main li:eq(1)').clone().appendTo('#main ol');

//1.Crea un párrafo e insertalo al principio de todos los elementos cuya clase
//sea paraf, utiliza para ello el método prependTo() que inserta un elemento al principio de otro.
$('<p>hola caracola</p>').prependTo('.paraf')
------------------------------------------------------------------------------------------
//1.Utilizando el método detach() elimina el primer elemento li de la lista, que se encuentra dentro
//del div cuyo id es menu y almacenalo en una variable, posteriormente, insertalo al final de la lista.
$elemento=$('#menu li:first').detach();//es el acerca de de fondo negro
$elemento.appendTo('#menu ul')

//2.Elimina de forma permanente aquellos elementos cuya clase es paraf
$('.paraf').remove()
------------------------------------------------------------------------------------------

//1.Crea un elemento tipo input con los siguientes atributos: id : apellidos,
//value: Fernandez, maxlength:10 e insertalo en el div cuyo id es sidebar,
//justo antes del botón.
var $myNewElement = $('<input id="apellidos" value="fernandez" maxlength="10"/>');
$myNewElement.insertBefore('#sidebar :button');
//2.Crea una lista con una serie de nombres de personas e insertala en el div
//cuyo id es main, justo a continuación del primer párrafo, realiza el proceso
//de inserción de una sola vez.
var $myNewElement="<ul>";
var personas=["Luis","Carlos","Pepe"];
for(var i=0;i<=personas.length-1;i++){
$myNewElement+="<li>"+personas[i]+"</li><br/>";
}
$myNewElement+="</ul>";
$($myNewElement).insertAfter('#main p:first');
//3.Crea un nuevo elemento de nombre Salir y añadelo en segundo lugar de la lista
//que se encuentra en el div cuyo id es menu, realiza todo el proceso de una sola vez.
var $myNewElement = $('<li><a href="#">salir</a></li>');
$myNewElement.insertAfter('#menu li:first');
----------------------------------------------------------------------------------
//1.Inicializa el input correspondiente a la contraseña, con el texto del párrafo anterior
$('#sidebar input:eq(1)').val($('#sidebar p:eq(1)').text())
//2.Elimina el párrafo que se encuentra justo antes del input correspondiente a la contraseña.//
// $('#sidebar p:eq(1)').remove()//outra forma
$("#contra").prev().remove();

//3.Crea una función y asociala al evento focus correspondiente al input antes utilizado.
// La función deberá de limpiar el contenido del input.
$('#sidebar input:eq(1)').focus(function(){
$(this).val("");
});
//4.Oculta empleando el método hide los párrafos cuya clase es paraf que se
//encuentran en el elemento form que está dentro del div cuyo id sidebar.
$('#sidebar p.paraf ').hide()//acordarse de esto IMPORTANTE p.paraf non .paraf p
//5.Asocia de forma automática una función al evento clic de las etiquetas <li>
//que se encuentran en el div cuyo id es main, la función al hacer clic en la
//etiqueta mostrará un mensaje con el texto Has hecho clic en x, donde x es el
//texto de la etiqueta. Posteriormente añade un nuevo elemento <li> y comprueba
//que ya tiene un evento clic asociado.
$('#main').delegate("li","click",function () {
alert('has echo click en '+$(this).text())
});
$("<li>Probando...</li>").appendTo($("#main ol"));

paco

12/6/2013
ejemplo
}
//1.Crea una página html, en la que inicialmente se muestre un párrafo y un botón,
//al hacer clic en el párrafo se creará un nuevo párrafo, posteriormente al hacer
//clic en los nuevos párrafos también se crearán nuevos párrafos. Al hacer clic
//en el botón, ya no se crearán más párrafos al hacer clic.
//Emplea primero live () y die(), posteriormente substituyelos por delegate() y
//undelegate() respectivamente.
//el live no funciona hacer el delegate
$("body").delegate('p',"click",function() {
var parrafo=document.createElement('p');
$(parrafo).text('creando otro parrafo');
$('body').append(parrafo)

});
$(':button').click(function(){
$('body').undelegate();
});

//Crea una página html con una imagen que cambie cuando el ratón pasa por encima
// de ella. También estableceremos un borde de color amarillo en la imagen cuando
// el ratón se situe en la imagen, al salir de la imagen eliminaremos este borde.
$('img').hover(function(){
$('img').attr("src","Ficheros_auxiliares/images/pinguino.png");
$('img').css({"border-color":"yellow","border-style":"solid"});
}, function() {
$('img').css({"border-color":""});
$("img").attr("src","Ficheros_auxiliares/images/pinguino.jpg");
})
//Crea una página html en la que se muestre un párrafo y dos imágenes en miniatura
//debajo de este, al pasar el ratón por encima de una miniatura, se creará una
//imagén de 400x300 px (la primera vez), donde se mostrará el contenido de la miniatura,
//al salir de la miniatura se eliminará el contenido de la imagen grande.
$('img').hover(function(){
if (nveces==0) {
var imagen=$("<img id='imgrande' />");
$('body').append(imagen);
nveces++;
}

$("#imgrande").attr('src',$(this).attr('src'));
}, function() {
$("#imgrande").attr ("src",'#');
}

//Crear una página html, que muestre un menú formado por los elementos: Menú Ítem 1,
// ..., hasta Menú Ítem 5, de modo que al pasar el ratón por encima de un ítem del
// menú de navegación, éste se va a desplazar a la derecha.
$('li').hover(function(){

$(this).css({"margin-left":"20px"});
}, function() {
$(this).css({"margin-left":""});

})

});
*/

paco

12/6/2013
ejemplo
//Crea una página html como la que se te muestra en el ejemplo
//textlessmore.htm, en la que hay dos párrafos, e inicialmente solo
//se muestra el primero, al hacer clic en el enlace se muestra el
//segundo, y el texto del enlace ca
$(document).ready(function() {
$(".segundo").hide();
$('.enlace').text("ver");
$('.enlace').click(function () {
if ($(".segundo").is(":hidden")) {
$(".segundo").show(800);
$('.enlace').text("ocultar el texto");
} else {
$(".segundo").hide(900);
$('.enlace').text("leer mas");

}
})
});

paoc

12/6/2013
ejemplo
//Crea una página html, que muestre un botón y al hacer clic en el botón se despliegue una capa.
$(document).ready(function() {

$(".caja").hide();
$('.enlace').click(function () {
if ($(".caja").is(":hidden")) {
$('.caja').slideDown(800);
} else {
$('.caja').slideUp(800);
}

$('.enlace').text('encojer')


})
});

paco

12/6/2013
ejemplo
<script type="text/javascript">
//Crea una página html en la que se muestre un menú desplegable vértical.
$(document).ready(function() {
$(".secundario").hide();
$('.primario').click(function () {
if($(this).find(".secundario").is(":hidden")){
$(this).find('.secundario').slideDown(800);
}else {
$(this).find('.secundario').slideUp(800);
}

});
})
</script>

paco

12/6/2013
ejemplo
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
//Crea una página html, con un comportamiento similar al que se muestra en la pagina opacid.html.
//function aparece(){
//$('#imagen').fadeIn(800);
// }
// Modifica la página opacid.html del ejercicio anterior, y reemplaza
// los métodos fadeIn() y fadeOut() por fadeTo() y haz pruebas con la opacidad.
//function desaparece(){
// $('#imagen').fadeOut(800);
//}
function aparece(){
$('#imagen').fadeTo(800,1)
}
function desaparece(){
$('#imagen').fadeTo(800,0.1)
}
</script>

</head>
<body>
<div id="imagen">
<img src="Ficheros_auxiliares/images/pinguino.png" width="240" height="246" alt="pinguino" />
</div>
<input type="button" name="aparece" value="aparece" onclick="aparece()"/>
<input type="button" name="desaparece" value="desaparece" onclick="desaparece()"/>

</body>
</html>

CristianDeath

19/12/2013
No se puede descargar el manual
El enlace de descarga para el manual de jquery no sirve

alekz

29/5/2014
Descarga
Por favor pueden solucionar la descarga???

Khristina

25/6/2014
descarga
buenas, el manual no se puede descargar, lo podeis arreglar?Gracias.

Karen

02/9/2014
Excelente manual !!
Hola !! Ya casi estoy terminando el manual de Jquery, les quiero agradecer porque las explicaciones y los ejemplos y ejercicios son muy buenos, aprendi un montón !!! Gracias !!!

dieguino

22/12/2014
No existe ningún link :(
No he podido descargar el contenido o esta nulo el link!!

Cesar

04/2/2015
Manual Interesante
Me parece muy interesante el Jquery es muy bueno gracias.

zavage

04/2/2015
Muy bueno
Felicitaciones muy bueno el producto

java

25/2/2015
manual jquery
Interesanteee :D

luis

08/7/2015
Grande! espectacular!
Este manual de jQuery es espectacular, para los que nos iniciamos y para los que ya tienen alguna experiencia. Es extraño ver cosas tan bien realizadas y que sean gratuitas.
Muchas gracias!!!

Brianalvarez

21/7/2015
Creacion de este manual
Antes....Muchas gracias a todo el staff de desarrolloweb.com por su excelente labor.

He estado leyendo este manual que me parecio muy bien elaborado, redactado, etc. etc. pero llamo mi atencion al final la fecha de creacion (19/09/2012) y me pregunto si es que la fecha esta mala o el manual tiene 3 años de antiguedad o ha estado siendo actualizado.

Es una curiosidad nada mas...pero a otro le puede parecer demasiado viejo y no leerlo.

De todas formas muchas gracias.

El_Azul22

22/10/2015
Indice del manual
Hola, he descargado el manual pero es complicada su lectura una vez impreso, ya que no cuenta con un indice y si uno quiere ir a un tema especifico tarda uno mucho. Seria bueno que les pongan indice a sus manuales.
Saludos

NerioLoroña

21/12/2016
Manual
Estimado, he descargado el manual de jQuery, una vez descargado el manual es de jQuery Mobile.
Muchas Gracias !!

Nicolás

27/11/2017
Quizá no los mejores términos...
Hola, hace unos días que estaba leyendo el Manual de JQuery para aprender (o extender) más mis conocimientos acerca de él; me di cuenta de que utilizáis los términos correctos para definir eventos, funciones, entre otras cosas.
Pero, quizá esto no sea lo más adecuado, ya que yo, como otros, quizá menos conocedores de esta herramienta (framework), se confundirán con lo que tratas de decir o describir. Me refiero a que se podría haber utilizado un lenguaje más coloquial; está muy bien el que escriban los términos correctos.
Una mini-recomendación que les podría dar es que utilicen primero una explicación en lenguaje coloquial y después, explicarlo en los términos correctos. Por todo lo demás, gracias por explicar este tema.
Enviar un comentario al manual