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

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
2.- Demo muy simple de uso de jQuery
3.- Pasos para utilizar jQuery en tu página web
4.- Básicos jQuery: añadir y quitar clases CSS sobre elementos
5.- Mostrar y ocultar elementos de la página con jQuery
6.- Efectos rápidos con jQuery
7.- Callback de funciones jQuery
8.- Uso de Ajax muy sencillo con jQuery
9.- Ajax jQuery con mensaje de carga
10.- jQuery CDN o hosting local de las librerías
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
12.- Función jQuery o función $()
13.- Otros usos de la función $()
14.- Core/each: each del core de jQuery
15.- Método size() y propiedad length del core de jQuery
16.- Método data() Core jQuery
17.- Consideraciones interesantes de data() y removeData()
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
19.- Ejemplo para practicar con selectores en jQuery
20.- Selectores de Jerarquía 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
22.- Método attr() de jQuery, otros usos y removeAttr()
23.- Método prop() de jQuery y diferencias con attr()
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
25.- Funciones CSS de jQuery para conocer el tamaño y posición de elementos
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
27.- Manejadores de eventos en jQuery
28.- Introducción Objeto evento en jQuery
29.- Eventos de ratón en jQuery mouseenter y mouseleave
30.- Eventos de teclado en jQuery
31.- Definir eventos con bind() y eliminarlos con unbind()
32.- Eventos definidos con live() en jQuery
33.- Delegated events 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
35.- Reglas para el desarrollo de plugins en jQuery
36.- Plugin jQuery: textarea con cuenta de caracteres
37.- Gestión de opciones en plugins jQuery
38.- Plugin Tip con opciones en jQuery
39.- Funciones y variables dentro de plugins jQuery
40.- Plugin checkbox personalizado con jQuery
41.- Alias personalizado y ocultar código en plugins jQuery
42.- Desarrollar plugins que dependen directamente de 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
44.- Animaciones de color con jQuery
45.- Fading en jQuery
46.- Colas de efectos en jQuery
47.- Método queue() para acceder a una cola de efectos
48.- Meter cualquier tipo de función en una cola de efectos jQuery
49.- Parar la ejecución de una cola de efectos jQuery
50.- Método delay() para retrasar la ejecución efectos de la cola
51.- Cola de efectos personal (no predeterminada) en 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()
53.- Entendiendo AJAX en jQuery
54.- $.get() de jQuery para hacer una solicitud Ajax tipo HTTP GET
55.- Eventos en una solicitud ajax con $.get() en jQuery
56.- Parámetros recibidos por las funciones de los eventos Ajax
57.- Scroll en jQuery
58.- Introducción a jQuery Mobile
Descargas
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
Leo
Saludos
daniel_pando_miguel

Muchas gracias, un saludo.
Jorgibiris

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
isra_salgado

aun siguen siendo estas las del documento PDF.
Podrian actualizarlo.
Saludos
Entropia7

Muchas gracias.
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

juan carlos
ejecucion de intrucciones, stored procedures??
Luis
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...
<!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 © 2007<br />
<a href="http://www.winkhosting.com" title="Hosting Colombia">Hosting Colombia</a><br />
</div>
</div>
</body>
</html>
Jorgibiris

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

- 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
<br />
Gracias!
bruno arg
Mala onda los que critican y no hacen nada!
Salu2
sara
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.
Esperamos que sea de provecho para muchas personas!
GaDo
Saludos
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

asi tipo : metroflog , fotolog , egoflog todos son .com
quiero aprender
Javier
seguimos esperando....
Tazler

ruper
He aprendido muchisimo (y no solo de jquery).
Un saludo,
Volveré y lo recomendaré, como hicieron conmigo!!!!
Axel_Tech

franklyn villasmil
exito amigos. continuemos difundiendo el conocimiento.
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

Saludos.
Claudio72188

aunque postee poco... debo confesar que me estoy haciendo adicto a desarrolloweb...
jorpeh02

Saludos al equipo de desarrolloweb
PepitaRonderos

santiago
Damian
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
gracias !!!
GUILLERMO TOVAR
Mil gracias.
Guillermo Tovar
jess_orozco

Como puedo resolver esto?
max
reghyna

<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

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>
------------
// 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

KaYCer
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
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

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

Cristiank

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

¬¬ AYUDA
Cristian Parada
jender23

Alejandro Flores
Maider_atxe

Hostingcolombia

<!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 © 2007<br />
<a href="http://www.hostingbarranquilla.com" title="Hosting Colombia">Hosting Colombia</a><br />
</div>
</div>
</body>
</html>
ferlormar

Sigan con los ejemplos sobre jQuery.
alx_salazar


alx_salazar

Zcz

Burzum
Mónica
icorrales

Gracias.
icorrales

paco
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
$('#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
//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
//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
//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
$(document).ready(function() {
$(".caja").hide();
$('.enlace').click(function () {
if ($(".caja").is(":hidden")) {
$('.caja').slideDown(800);
} else {
$('.caja').slideUp(800);
}
$('.enlace').text('encojer')
})
});
paco
//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
<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

alekz

Karen
dieguino

Cesar
zavage

java
luis
Muchas gracias!!!
Brianalvarez

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

Saludos
NerioLoroña
Muchas Gracias !!
Nicolás
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.