El núcleo de jQuery

Capítulo 4. El núcleo de jQuery

4.1. $ vs $()

Hasta ahora, se ha tratado completamente con métodos que se llaman desde el objeto jQuery. Por ejemplo:

$('h1').remove();

Dichos métodos son parte del espacio de nombres (en inglés namespace) $.fn, o del prototipo (en inglés prototype) de jQuery, y son considerados como métodos del objeto jQuery.

Sin embargo, existen métodos que son parte del espacio de nombres de $ y se consideran como métodos del núcleo de jQuery.

Estas distinciones pueden ser bastantes confusas para usuarios nuevos. Para evitar la confusión, debe recordar estos dos puntos:

• Los métodos utilizados en selecciones se encuentran dentro del espacio de nombres $.fn, y automáticamente reciben y devuelven una selección en sí.
• Métodos en el espacio de nombres $ son generalmente métodos para diferentes utilidades, no trabajan con selecciones, no se les pasa ningún argumento y el valor que devuelven puede variar.

Existen algunos casos en donde métodos del objeto y del núcleo poseen los mismos nombres, como sucede con $.each y $.fn.each. En estos casos, debe ser cuidadoso de leer bien la documentación para saber que objeto utilizar correctamente.

4.2. Métodos útiles

jQuery ofrece varios métodos utilitarios dentro del espacio de nombres $. Estos métodos son de gran ayuda para llevar a cabo tareas rutinarias de programación. A continuación se muestran algunos ejemplos, para una completa documentación sobre ellos, visite api.jquery.com/category/utilities/.

$.trim Remueve los espacios en blanco del principio y final.

$.trim('    varios espacios en blanco   ');
// devuelve 'varios espacios en blanco'

$.each Interactúa en arrays y objetos.

$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {
    console.log('elemento ' + idx + 'es ' + val);
});
 
$.each({ foo : 'bar', baz : 'bim' }, function(k, v) {
    console.log(k + ' : ' + v);
});

NOTAComo se dijo antes, existe un método llamado $.fn.each, el cual interactúa en una selección de elementos.

$.inArray Devuelve el índice de un valor en un array, o –1 si el valor no se encuentra en el array.

var myArray = [ 1, 2, 3, 5 ];
if ($.inArray(4, myArray) !== -1) {
    console.log('valor encontrado');
}

$.extend Cambia la propiedades del primer objeto utilizando las propiedades de los subsecuentes objetos.

var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };
 
var newObject = $.extend(firstObject, secondObject);
console.log(firstObject.foo); // 'baz'
console.log(newObject.foo);   // 'baz'

Si no se desea cambiar las propiedades de ninguno de los objetos que se utilizan en $.extend, se debe incluir un objeto vacío como primer argumento.

var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };
 
var newObject = $.extend({}, firstObject, secondObject);
console.log(firstObject.foo); // 'bar'
console.log(newObject.foo);   // 'baz'

$.proxy Devuelve una función que siempre se ejecutará en el alcance (scope) provisto — en otras palabras, establece el significado de this (incluido dentro de la función) como el segundo argumento.

var myFunction = function() { console.log(this); };
var myObject = { foo : 'bar' };
 
myFunction(); // devuelve el objeto window
 
var myProxyFunction = $.proxy(myFunction, myObject);
myProxyFunction(); // devuelve el objeto myObject

Si se posee un objeto con métodos, es posible pasar dicho objeto y el nombre de un método para devolver una función que siempre se ejecuta en el alcance de dicho objeto.

var myObject = {
    myFn : function() {
        console.log(this);
    }
};
 
$('#foo').click(myObject.myFn); // registra el elemento DOM #foo
$('#foo').click($.proxy(myObject, 'myFn')); // registra myObject

4.3. Comprobación de tipos

Como se mencionó en el capítulo "Conceptos Básicos de JavaScript", jQuery ofrece varios métodos útiles para determinar el tipo de un valor específico.

Comprobar el tipo de un determinado valor

var myValue = [1, 2, 3];
 
// Utilizar el operador typeof de JavaScript para comprobar tipos primitivos
typeof myValue == 'string'; // falso (false)
typeof myValue == 'number'; // falso (false)
typeof myValue == 'undefined'; // falso (false)
typeof myValue == 'boolean'; // falso (false)
 
// Utilizar el operador de igualdad estricta para comprobar
// alores nulos (null)
myValue === null; // falso (false)
 
// Utilizar los métodos jQuery para comprobar tipos no primitivos
jQuery.isFunction(myValue); // falso (false)
jQuery.isPlainObject(myValue); // falso (false)
jQuery.isArray(myValue); // verdadero (true)

4.4. El método data

A menudo encontrará que existe información acerca de un elemento que necesita guardar. En JavaScript es posible hacerlo añadiendo propiedades al DOM del elemento, pero esta práctica conlleva enfrentarse a consumos excesivos de memoria (en inglés memory leaks) en algunos navegadores. jQuery ofrece una manera sencilla para poder guardar información relacionada a un elemento, y la misma biblioteca se ocupa de manejar los problemas que pueden surgir por falta de memoria.

Guardar y recuperar información relacionada a un elemento

$('#myDiv').data('keyName', { foo : 'bar' });
$('#myDiv').data('keyName'); // { foo : 'bar' }


A través del método $.fn.data es posible guardar cualquier tipo de información sobre un elemento, y es difícil exagerar la importancia de este concepto cuando se está desarrollando una aplicación compleja.

Por ejemplo, si desea establecer una relación entre el ítem de una lista y el div que hay dentro de este ítem, es posible hacerlo cada vez que se interactúa con el ítem, pero una mejor solución es hacerlo una sola vez, guardando un puntero al div utilizando el método $.fn.data:

Establecer una relación entre elementos utilizando el método $.fn.data

$('#myList li').each(function() {
    var $li = $(this), $div = $li.find('div.content');
    $li.data('contentDiv', $div);
});
 
// luego, no se debe volver a buscar al div;
// es posible leerlo desde la información asociada al item de la lista
var $firstLi = $('#myList li:first');
$firstLi.data('contentDiv').html('nuevo contenido');


Además es posible pasarle al método un objeto conteniendo uno o más pares de conjuntos palabra clave-valor.

4.5. Detección de navegadores y características

Más allá que jQuery elimine la mayoría de las peculiaridades de JavaScript entre cada navegador, existen ocasiones en que se necesita ejecutar código en un navegador específico.

Para este tipo de situaciones, jQuery ofrece el objeto $.support y $.browser (este último en desuso). Una completa documentación sobre estos objetos puede encontrarla en api.jquery.com/jQuery.support y api.jquery.com/jQuery.browser

El objetivo de $.support es determinar qué características soporta el navegador web.

El objeto $.browser permite detectar el tipo de navegador y su versión. Dicho objeto está en desuso (aunque en el corto plazo no está planificada su eliminación del núcleo de la biblioteca) y se recomienda utilizar al objeto $.support para estos propósitos.

4.6. Evitar conflictos con otras bibliotecas JavaScript

Si esta utilizando jQuery en conjunto con otras bibliotecas JavaScript, las cuales también utilizan la variable $, pueden llegar a ocurrir una serie de errores. Para poder solucionarlos, es necesario poner a jQuery en su modo "no-conflicto". Esto se debe realizar inmediatamente después que jQuery se cargue en la página y antes del código que se va a ejecutar.

Cuando se pone a jQuery en modo "no-conflicto", la biblioteca ofrece la opción de asignar un nombre para reemplazar a la variable $.

Poner a jQuery en modo no-conflicto

// la biblioteca prototype también utiliza $
<script src="prototype.js"></script>
 
// se carga jquery en la página
<script src="jquery.js"></script>
 
// se inicializa el modo "no-conflicto"
<script>var $j = jQuery.noConflict();</script>


También es posible seguir utilizando $ conteniendo el código en una función anónima autoejecutable. éste es un patrón estándar para la creación de extensiones para la biblioteca, ya que $ queda encerrada dentro del alcance de la misma función anónima.

Utilizar $ dentro de una función anónima autoejecutable

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
 
(function($) {
   // el código va aquí, pudiendo utilizar $
})(jQuery);
</script>

Capítulo 5. Eventos

5.1. Introducción

jQuery provee métodos para asociar controladores de eventos (en inglés event handlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada. Dentro de la función, la palabra clave this hace referencia al elemento en que el evento ocurre.

Para más detalles sobre los eventos en jQuery, puede consultar api.jquery.com/category/events.

La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento, visite api.jquery.com/category/events/event-object.

5.2. Vincular eventos a elementos

jQuery ofrece métodos para la mayoría de los eventos — entre ellos $.fn.click, $.fn.focus, $.fn.blur, $.fn.change, etc. Estos últimos son formas reducidas del método $.fn.bind de jQuery. El método bind es útil para vincular (en inglés binding) la misma función de controlador a múltiples eventos, para cuando se desea proveer información al controlador de evento, cuando se está trabajando con eventos personalizados o cuando se desea pasar un objeto a múltiples eventos y controladores.

Vincular un evento utilizando un método reducido

$('p').click(function() {
    console.log('click');
});


Vincular un evento utilizando el método $.fn.bind method

$('p').bind('click', function() {
    console.log('click');
});


Vincular un evento utilizando el método $.fn.bind con información asociada

$('input').bind(
    'click change',  // es posible incular múltiples eventos al elemento
    { foo : 'bar' }, // se debe pasar la información asociada como argumento
    function(eventObject) {
        console.log(eventObject.type, eventObject.data);
        // registra el tipo de evento y la información asociada { foo : 'bar' }
} );


5.2.1. Vincular eventos para ejecutar una vez

A veces puede necesitar que un controlador particular se ejecute solo una vez — y después de eso, necesite que ninguno más se ejecute, o que se ejecute otro diferente. Para este propósito jQuery provee el método $.fn.one.

Cambiar controladores utilizando el método $.fn.one

$('p').one('click', function() {
    console.log('Se clickeó al elemento por primera vez');
    $(this).click(function() { console.log('Se ha clickeado nuevamente'); });
});


El método $.fn.one es útil para situaciones en que necesita ejecutar cierto código la primera vez que ocurre un evento en un elemento, pero no en los eventos sucesivos.

5.2.2. Desvincular eventos

Para desvincular (en ingles unbind) un controlador de evento, puede utilizar el método $.fn.unbind pasándole el tipo de evento a desconectar. Si se pasó como adjunto al evento una función nombrada, es posible aislar la desconexión de dicha función pasándola como segundo argumento.

Desvincular todos los controladores del evento click en una selección

$('p').unbind('click');


Desvincular un controlador particular del evento click

var foo = function() { console.log('foo'); };
var bar = function() { console.log('bar'); };
 
$('p').bind('click', foo).bind('click', bar);
$('p').unbind('click', bar); // foo esta atado aún al evento click


5.2.3. Espacios de nombres para eventos

Cuando se esta desarrollando aplicaciones complejas o extensiones de jQuery, puede ser útil utilizar espacios de nombres para los eventos, y de esta forma evitar que se desvinculen eventos cuando no lo desea.

Asignar espacios de nombres a eventos

$('p').bind('click.myNamespace', function() { /* ... */ });
$('p').unbind('click.myNamespace');
 
// desvincula todos los eventos con el espacio de nombre 'myNamespace'
$('p').unbind('.myNamespace');


Vinculación de múltiples eventos

Muy a menudo, elementos en una aplicación estarán vinculados a múltiples eventos, cada uno con una función diferente. En estos casos, es posible pasar un objeto dentro de $.fn.bind con uno o más pares de nombres claves/valores. Cada nombre clave será el nombre del evento mientras que cada valor será la función a ejecutar cuando ocurra el evento.

Vincular múltiples eventos a un elemento

$('p').bind({
    'click': function() { console.log('clickeado'); },
    'mouseover': function() { console.log('sobrepasado'); }
});



NOTALa opción de pasar un objeto con múltiples eventos y funciones a $.fn.bind fue introducido en jQuery 1.4.4.

5.3. El objeto del evento

Como se menciona en la introducción, la función controladora de eventos recibe un objeto del evento, el cual contiene varios métodos y propiedades. El objeto es comúnmente utilizado para prevenir la acción predeterminada del evento a través del método preventDefault. Sin embargo, también contiene varias propiedades y métodos útiles:

pageX, pageY La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
type El tipo de evento (por ejemplo click).
which El botón o tecla presionada.
data Alguna información pasada cuando el evento es ejecutado.
target El elemento DOM que inicializó el evento.
preventDefault() Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
stopPropagation() Detiene la propagación del evento sobre otros elementos.


Por otro lado, la función controladora también tiene acceso al elemento DOM que inicializó el evento a través de la palabra clave this. Para convertir a dicho elemento DOM en un objeto jQuery (y poder utilizar los métodos de la biblioteca) es necesario escribir $(this), como se muestra a continuación:

var $this = $(this);


Cancelar que al hacer click en un enlace, éste se siga

$('a').click(function(e) {
    var $this = $(this);
    if ($this.attr('href').match('evil')) {
        e.preventDefault();
        $this.addClass('evil');
    }
});

5.4. Ejecución automática de controladores de eventos

A través del método $.fn.trigger, jQuery provee una manera de disparar controladores de eventos sobre algún elemento sin requerir la acción del usuario. Si bien este método tiene sus usos, no debería ser utilizado para simplemente llamar a una función que pueda ser ejecutada con un click del usuario. En su lugar, debería guardar la función que se necesita llamar en una variable, y luego pasar el nombre de la variable cuando realiza el vinculo (binding). De esta forma, podrá llamar a la función cuando lo desee en lugar de ejecutar $.fn.trigger.

Disparar un controlador de eventos de la forma correcta

var foo = function(e) {
    if (e) {
        console.log(e);
    } else {
        console.log('esta ejecucción no provino desde un evento');
    }
};
 
$('p').click(foo);
 
foo(); // en lugar de realizar $('p').trigger('click')

5.5. Incrementar el rendimiento con la delegación de eventos

Cuando trabaje con jQuery, frecuentemente añadirá nuevos elementos a la página, y cuando lo haga, necesitará vincular eventos a dichos elementos — eventos que ya estaban vinculados a elementos en la página. En lugar de repetir la tarea cada vez que se añade un elemento, es posible utilizar la delegación de eventos para hacerlo. Con ella, podrá enlazar un evento a un elemento contenedor, y luego, cuando el evento ocurra, podrá ver en que elemento sucede. Si todo esto suena complicado, afortunadamente jQuery lo hace fácil a través de los métodos $.fn.live y $.fn.delegate.

La delegación de eventos posee algunos beneficios, incluso si no se tiene pensando añadir más elementos a la página. El tiempo requerido para enlazar controladores de eventos a cientos de elementos no es un trabajo trivial; si posee un gran conjunto de elementos, debería considerar utilizar la delegación de eventos a un elemento contenedor.


NOTAEl método $.fn.live fue introducido a partir de la versión 1.3 de la biblioteca y en ese momento, solo ciertos tipos de eventos eran soportados. A partir de la versión 1.4.2, se introdujo $.fn.delegate el cual es preferido a $.fn.live.


Delegar un evento utilizando $.fn.delegate

$('#myUnorderedList').delegate('li', 'click', function(e) {
    var $myListItem = $(this);
    // ...
});


Delegar un Evento utilizando $.fn.live

$('#myUnorderedList li').live('click', function(e) {
    var $myListItem = $(this);
    // ...
});


5.5.1. Desvincular eventos delegados

Si necesita eliminar eventos delegados, no puede hacerlo simplemente desvinculándolos. Para eso, utilice el método $.fn.undelegate para eventos conectados con $.fn.delegate, y $.fn.die para eventos conectados con $.fn.live. Al igual que cuando se realiza un vinculo, opcionalmente, se puede pasar el nombre de una función vinculada.

Desvincular eventos delegados

$('#myUnorderedList').undelegate('li', 'click');
$('#myUnorderedList li').die('click');

5.6. Funciones auxiliares de eventos

jQuery ofrece dos funciones auxiliares para el trabajo con eventos:

5.6.1. $.fn.hover

El método $.fn.hover permite pasar una o dos funciones que se ejecutarán cuando los eventos mouseenter y mouseleave ocurran en el elemento seleccionado. Si se pasa una sola función, está será ejecutada en ambos eventos; en cambio si se pasan dos, la primera será ejecutada cuando ocurra el evento mouseenter, mientras que la segunda será ejecutada cuando ocurra mouseleave.


NOTAA partir de la versión 1.4 de jQuery, el método requiere obligatoriamente dos funciones.


La función auxiliar hover

$('#menu li').hover(function() {
    $(this).toggleClass('hover');
});


5.6.2. $.fn.toggle

Al igual que el método anterior, $.fn.toggle recibe dos o más funciones; cada vez que un evento ocurre, la función siguiente en la lista se ejecutará. Generalmente, $.fn.toggle es utilizada con solo dos funciones. En caso que utiliza más de dos funciones, tenga cuidado, ya que puede ser dificultar la depuración del código.

La función auxiliar toggle

$('p.expander').toggle(
    function() {
        $(this).prev().addClass('open');
    },
    function() {
        $(this).prev().removeClass('open');
    }
);

5.7. Ejercicios

5.7.1. Crear una sugerencia para una caja de ingreso de texto

Abra el archivo /ejercicios/index.html en el navegador. Realice el ejericio utilizando el archivo /ejercicios/js/inputHint.js o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una sugerencia en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:

Establecer el valor del elemento input igual al valor del elemento label;
Añadir la clase hint al elemento input;
Remover el elemento label;
Vincular un evento focus en el input para eliminar el texto de sugerencia y la clase hint;
Vincular un evento blur en el input para restaurar el texto de sugerencia y la clase hint en caso que no se haya ingresado algún texto.


¿Qué otras consideraciones debe considerar si se desea aplicar esta funcionalidad a un sitio real?

5.7.2. Añadir una navegación por pestañas

Abra el archivo /ejercicios/index.html en el navegador. Realice el ejericio utilizando el archivo /ejercicios/js/tabs.js o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos div.module. Los pasos ha seguir son los siguientes:

Ocultar todos los elementos div.module;
Crear una lista desordenada antes del primer div.module para utilizar como pestañas;
Interactuar con cada div utilizando $.fn.each. Por cada uno, utilizar el texto del elemento h2 como el texto para el ítem de la lista desordenada;
Vincular un evento click a cada ítem de la lista de forma que:

Muestre el div correspondiente y oculte el otro;
Añada la clase current al ítem seleccionado;
Remueva la clase current del otro ítem de la lista;


Finalmente, mostrar la primera pestaña.



Capítulo 6. Efectos

6.1. Introducción

Con jQuery, agregar efectos a una página es muy fácil. Estos efectos poseen una configuración predeterminada pero también es posible proveerles parámetros personalizados. Además es posible crear animaciones particulares estableciendo valores de propiedades CSS.

Para una completa documentación sobre los diferentes tipos de efectos puede visitar la sección effects.

6.2. Efectos incorporados en la biblioteca

Los efectos más utilizado ya vienen incorporados dentro de la biblioteca en forma de métodos:

$.fn.show Muestra el elemento seleccionado.
$.fn.hide Oculta el elemento seleccionado.
$.fn.fadeIn De forma animada, cambia la opacidad del elemento seleccionado al 100 %.
$.fn.fadeOut De forma animada, cambia la opacidad del elemento seleccionado al 0
$.fn.slideDown Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
$.fn.slideUp Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
$.fn.slideToggle Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.


Uso básico de un efecto incorporado

$('h1').show();


6.2.1. Cambiar la duración de los efectos

Con la excepción de $.fn.show y $.fn.hide, todos los métodos tienen una duración predeterminada de la animación en 400 milisegundos. Este valor es posible cambiarlo.

Configurar la duración de un efecto

$('h1').fadeIn(300);      // desvanecimiento en 300ms
$('h1').fadeOut('slow');  // utilizar una definición de velocidad interna


jQuery.fx.speeds

jQuery posee un objeto en jQuery.fx.speeds el cual contiene la velocidad predeterminada para la duración de un efecto, así como también los valores para las definiciones slow y fast.

speeds: {
    slow: 600,
    fast: 200,
    // velocidad predeterminada
    _default: 400
}


Por lo tanto, es posible sobrescribir o añadir nuevos valores al objeto. Por ejemplo, puede que quiera cambiar el valor predeterminado del efecto o añadir una velocidad personalizada.

Añadir velocidades personalizadas a jQuery.fx.speeds

jQuery.fx.speeds.muyRapido = 100;
jQuery.fx.speeds.muyLento = 2000;


6.2.2. Realizar una acción cuando un efecto fue ejecutado

A menudo, querrá ejecutar una acción una vez que la animación haya terminado — ya que si ejecuta la acción antes que la animación haya acabado, puede llegar a alterar la calidad del efecto o afectar a los elementos que forman parte de la misma. [Definición: Las funciones de devolución de llamada (en inglés callback functions) proveen una forma para ejecutar código una vez que un evento haya terminado.]

En este caso, el evento que responderá a la función será la conclusión de la animación. Dentro de la función de devolución, la palabra clave this hace referencia al elemento en donde el efecto fue ejecutado y al igual que sucede con los eventos, es posible transformarlo a un objeto jQuery utilizando $(this).

Ejecutar cierto código cuando una animación haya concluido

$('div.old').fadeOut(300, function() { $(this).remove(); });


Note que si la selección no retorna ningún elemento, la función nunca se ejecutará. Este problema lo puede resolver comprobando si la selección devuelve algún elemento; y en caso que no lo haga, ejecutar la función de devolución inmediatamente.

Ejecutar una función de devolución incluso si no hay elementos para animar

var $thing = $('#nonexistent');
 
var cb = function() {
    console.log('realizado');
};
 
if ($thing.length) {
    $thing.fadeIn(300, cb);
} else {
    cb();
}

6.3. Efectos personalizados con $.fn.animate

Es posible realizar animaciones en propiedades CSS utilizando el método $.fn.animate. Dicho método permite realizar una animación estableciendo valores a propiedades CSS o cambiando sus valores actuales.

Efectos personalizados con $.fn.animate

$('div.funtimes').animate(
    {
        left : "+=50",
        opacity : 0.25
    },
    300, // duration
 
    // función de devolución de llamada
    function() { console.log('realizado');
});



NOTALas propiedades relacionadas al color no pueden ser animadas utilizando el método $.fn.animate, pero es posible hacerlo a través de la extensión color plugin. Más adelante en el libro de discutirá la utilización de extensiones.


6.3.1. Easing

[Definición: El concepto de Easing describe la manera en que un efecto ocurre — es decir, si la velocidad durante la animación es constante o no.] jQuery incluye solamente dos métodos de easing: swing y linear. Si desea transiciones más naturales en las animaciones, existen varias extensiones que lo permiten.

A partir de la versión 1.4 de la biblioteca, es posible establecer el tipo de transición por cada propiedad utilizando el método $.fn.animate.

Transición de easing por cada propiedad

$('div.funtimes').animate(
    {
        left : [ "+=50", "swing" ],
        opacity : [ 0.25, "linear" ]
    },
    300
);

6.4. Control de los efectos

jQuery provee varias herramientas para el manejo de animaciones.

$.fn.stop Detiene las animaciones que se están ejecutando en el elemento seleccionado.
$.fn.delay Espera un tiempo determinado antes de ejecutar la próxima animación.


$('h1').show(300).delay(1000).hide(300);


jQuery.fx.off Si el valor es verdadero (true), no existirán transiciones para las animaciones; y a los elementos se le establecerá el estado final de la animación. Este método puede ser especialmente útil cuando se esta trabajando con navegadores antiguos..

6.5. Ejercicios

6.5.1. Mostrar texto oculto

Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/blog.js. La tarea es añadir alguna interactividad a la sección blog de la página:

Al hacer click en alguno de los titulares del div #blog, se debe mostrar el párrafo correspondiente con un efecto de deslizamiento;
Al hacer click en otro titular, se debe ocultar el párrafo mostrado con un efecto de deslizamiento y mostrar nuevamente el párrafo correspondiente también con un efecto de deslizamiento. Ayuda: No se olvide de utilizar el selector :visible.


6.5.2. Crear un menú desplegable

Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/navigation.js. La tarea es poder desplegar los ítems del menú superior de la página:

Al pasar el puntero del ratón por encima de un ítem del menú, se debe mostrar su submenú en caso que exista;
Al no estar más encima de un ítem, el submenú se debe ocultar.


Para poder realizarlo, utilice el método $.fn.hover para añadir o eliminar una clase en el submenú para poder controlar si debe estar oculto o visible (El archivo /ejercicios/css/styles.css incluye una clase hover para este propósito).

6.5.3. Crear un slideshow

Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/slideshow.js. La tarea es añadir un slideshow a la página con JavaScript.

Mover el elemento #slideshow a la parte superior de la página;
Escribir un código que permita mostrar los ítems de forma cíclica, mostrando un ítem por unos segundos, luego ocultándolo con un efecto fade out y mostrando el siguiente con un efecto fade in;
Una vez llegado al último ítem de la lista, comenzar de nuevo con el primero;


Para un desafío mayor, realice un área de navegación por debajo del slideshow que muestre cuantas imágenes existen y en cual se encuentra (ayuda: $.fn.prevAllpuede resultar útil).