jQuery

jQuery

jQuery es una librería JavaScript que permite manejar el DOM de forma sencilla, escuchar los eventos que este genere, crear animaciones y realizar peticiones AJAX de una manera muy simple.

 

Para poder utilizarlo solo basta descargar la librería desde el sitio oficial de jQuery e incluirla dentro de nuestro HTML.

Sitio de jQuery

Incluyendo jQuery

Incluimos la librería jQuery de la misma manera que incluimos cualquier archivo JavaScript en un sitio HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Incluir jQuery</title>
    </head>
    <body>
        <script src="jquery.js"></script>
    </body>
</html>

DOM

jQuery permite manipular el DOM de una manera muy simple e intuitiva.

Selección de elementos

Con jQuery podemos seleccionar elementos del DOM mediante la utilización de los selectores CSS3.

/* Todos los DIV's */
$('div')

/* Un nodo con ID = unaID */
$('#unaID')

/* Todos los DIV's con CLASS = unaClase */
$('div.unaClase')

/* Los LI con CLASS = unLI dentro del UL con ID = unUL */
$('ul#unUL li.unLI')

Uso de Pseudo-Selectores

/* Todos los DIV's ocultos */
$('div:hidden')

/* Todos los DIV's visibles */
$('div:visible')

/* Todos los LI impares dentro de UL */
$('ul li:odd')

/* Todos los LI pares dentro de UL */
$('ul li:even')

/* El primer LI dentro de UL */
$('ul li:first')

/* El ultimo LI dentro de UL */
$('ul li:last')

Selectores en Formularios

$(':button')         $(':input')

$(':checkbox')       $(':password')

$(':checked')        $(':radio')

$(':disabled')       $(':reset')

$(':enabled')        $(':selected')

$(':file')           $(':submit')

$(':image')          $(':text')

jQuery incluye pseudo-selectores para los elementos de los formularios.

Manejo de una Selección

Podemos verificar si una selección contiene o no elementos mediante el atributo length.

if ($('div.unaClase').length) { ... }

Podemos asignar una selección a una variable para luego manipularla.

var miSeleccion = $('div')

Manejo de una Selección

El método has(selector) filtra una selección devolviendo solo aquellas cuyos descendentes cumplan el selector.

/* Todos los DIV's que contengan algun P */
$('div').has('p');

El método not(selector) devuelve aquellos elementos que no cumplan con el selector.

/* Todos los DIV's que no tengan la clase unDiv */
$('div').not('.unDiv');

Manejo de una Selección

El método filter(selector) filtra una selección devolviendo solo aquellas que cumplan con el selector.

/* Todos los LI's que contengan la clase activo */
$('li').filter('.activo');

El método find(selector) devuelve el elemento que cumpla con el selector.

/* El LI's que contenga la clase activo */
$('li').find('.activo');

Manejo de una Selección

El método first(selector) filtra una selección devolviendo el primer elemento de la selección.

/* El primer LI dentro de un UL */
$('ul li').first();

El método last(selector) filtra una selección devolviendo el ultimo elemento de la selección.

/* El ultimo LI dentro de un UL */
$('ul li').last();

Manejo de una Selección

El método eq(indice) filtra una selección devolviendo el elemento en la posición pasada como argumento.

/* El LI en la posición 3 dentro de un UL */
$('ul li').eq(3);

Los métodos que permiten manejar una selección pueden ser utilizados en conjuntos.

/* El H3 en la posición 2 dentro del BODY */
$(body').find('h3').eq(2)

Manejo de una Selección

Algunos métodos de jQuery funcionan como obtenedor de valores y modificador de valores.

/* Obtiene el HTML interno del LI */
$('li#unLI').html();
/* Remplaza el HTML interno del LI */
$('li#unLI').html("<p>Hola</p>");

Mientras que el método html(código) remplaza el código HTML interno por el código pasado como argumento.

El método html() permite obtener el HTML interno de un elemento seleccionado.

Manejo de una Selección

/* Obtiene el tamaño de la fuente de un párrafo */
$('p#unP').css('font-size');
/* Cambia el tamaño de la fuente de un párrafo */
$('p#unP').css('font-size','14px');

El método css(propiedad,valor) remplaza el valor actual de la propiedad css del elemento seleccionado por el nuevo valor pasado como argumento.

El método css(propiedad) permite obtener el valor de la propiedad CSS asociada a un elemento seleccionado.

Manejo de una Selección

/* Le agrega la clase rojo a todos los párrafos */
$('p').addClass('rojo');
/* Le remueve la clase rojo a todos los párrafos */
$('p').removeClass('rojo');

El método removeClass(unaClase) permite remover una clase de un elemento seleccionado.

El método addClass(unaClase) permite agregar una clase a un elemento seleccionado.

Manejo de una Selección

/* Verifica si todos los párrafos tienen la clase rojo */
$('p').hasClass('rojo');
/* Si los párrafos no tienen la clase rojo se la agrega */
/* Si los párrafos tienen la clase rojo se las quita    */
$('p').toggleClass('rojo');

El método toggleClass(unaClase) permite agregar o remover una clase de un elemento seleccionado dependiendo si este ya la tiene o no.

El método hasClass(unaClase) permite determinar si un elemento seleccionado tiene una clase dada .

Manejo de una Selección

/* Devuelve el ancho del DIV */
$('div#unDiv').width();

/* Modifica el alto del DIV */
$('div#unDiv').height(20);
/* Devuelve la posición dentro del padre */
$('div#unDiv').position();

El método position() devuelve la posición del elemento dentro de su padre.

Los métodos width() y height() obtienen el ancho y la altura de un elemento seleccionado. Pueden ser utilizados como modificadores si se pasa el ancho o el alto como argumento.

Manejo de una Selección

/* Devuelve el valor del atributo HREF del A */
$('a').attr('href');
/* Modifica el valor del atributo HREF del A */
$('a').attr('href','http://www.google.com.ar');

En cambio si pasamos un segundo argumento al método attr(atributo,valor)  se modificara el valor del atributo en el elemento seleccionado. 

El método attr(atributo) obtiene el valor del atributo en el elemento seleccionado. 

Manejo de una Selección

/* Devuelve el contenido del elemento P */
$('p').text();
/* Modificamos el contenido del elemento P */
$('p').text('Hola Mundo!');

Podemos modificar el texto interno de un elemento HTML utilizando el método text(texto) y pasamos como argumento el texto a insertar.

El método text() obtiene texto interno de un elemento HTML. 

Manejo de una Selección

/* Devuelve el valor del input cuyo NAME es nombre */
$('input[name=nombre]').val();
/* Devuelve el valor del input cuyo NAME es nombre */
$('input[name=nombre]').val('Neri Guidi');

Podemos modificar el valor de un campo de entrada usando el método val(nuevoValor) y pasando como argumento el valor a establecer.

El método val() obtiene el valor de una entrada en un formulario sin importar el tipo de campo. 

Manejo de una Selección

/* Selecciona el elemento siguiente al primer LI */
$('li:first').next();
/* Selecciona el elemento anterior al ultimo LI */
$('li:last').prev();

El método prev() selecciona el elemento anterior al elemento seleccionado.

El método next() selecciona el elemento siguiente al elemento seleccionado.

Manejo de una Selección

/* Selecciona el elemento padre del LI */
$('li').parent();
/* Selecciona todos los hijos del elemento UL */
$('ul').children();

El método children() selecciona los elementos hijos del elemento seleccionado.

El método parent() selecciona el elemento padre del elemento seleccionado.

Manejo de una Selección

/* Insertamos al final del UL los LI de otro UL */
$('ul#dos').append($('ul#uno li'));
/* Insertamos al final del UL los LI de otro UL */
$('ul#uno li').appendTo($('ul#dos'));

El método appendTo(elemento) inserta el elemento seleccionado al final del elemento pasado como argumento.

El método append(elemento) inserta al final del elemento seleccionado los elementos pasados como argumento.

Manejo de una Selección

/* Insertamos al principio del UL los LI de otro UL */
$('ul#dos').prepend($('ul#uno li'));
/* Insertamos al principio del UL los LI de otro UL */
$('ul#uno li').prependTo($('ul#dos'));

El método prependTo(elemento) inserta el elemento seleccionado al principio del elemento pasado como argumento.

El método prepend(elemento) inserta al principio del elemento seleccionado los elementos pasados como argumento.

Manejo de una Selección

/* Insertamos después de un UL otro UL */
$('ul#dos').after($('ul#uno'));
/* Insertamos después de un UL otro UL */
$('ul#uno').insertAfter($('ul#dos'));

El método insertAfter(elemento) inserta el elemento seleccionado después del elemento pasado como argumento.

El método after(elemento) inserta el elemento pasado como argumento después del elemento seleccionado.

Manejo de una Selección

/* Insertamos antes de un UL otro UL */
$('ul#dos').before($('ul#uno'));
/* Insertamos después de un UL otro UL */
$('ul#uno').insertBefore($('ul#dos'));

El método insertBefore(elemento) inserta el elemento seleccionado antes del elemento pasado como argumento.

El método before(elemento) inserta el elemento pasado como argumento antes del elemento seleccionado.

Manejo de una Selección

/* Ocultamos todos los DIV's */
$('div').hide();
/* Muestra todos los DIV's ocultos */
$('div').show();

El método show() muestra el elemento seleccionado.

El método hide() oculta el elemento seleccionado.

Manejo de una Selección

/* Crea una copia del UL seleccionado */
$('ul').clone();
/* Creamos un DIV */
$('<div></div>');

Creamos nuevos elementos HTML si en vez de escribir un selector ingresamos código HTML.

El método clone() crea una copia exacta del elemento seleccionado.

Manejo de una Selección

/* Recorre cada uno de los LI e imprime el indice y  HTML */
$('ul li').each(
    function(indice, elemento)
    {
        console.log(indice + ' tiene ' + $(elemento).html());
    }
);

El método each(función) recorre cada uno de los elementos de la selección y ejecuta una función por cada uno de ellos.

Manejo de una Selección

/* Recorre cada elemento y devuelve un array con sus valores */
$('input').each(
    function(indice, elemento)
    {
        return $(elemento).val();
    }
);

El método map(función) recorre cada uno de los elementos de la selección, ejecuta una función por cada uno de ellos y solo devuelve el resultado de ejecutar dicha función en cada elemento.

Eventos

jQuery expone una serie de métodos que permiten el manejo de eventos de una forma muy sencilla.

Eventos

/* Escucho que se haga click sobre un A */
$('a').click(
    function(evento)
    {
        console.log('Hola!');
    }
);

Por ejemplo el método click(función) permite escuchar que el evento click sobre el elemento seleccionado y luego ejecutar la función pasada como argumento.

Eventos

Al igual que el método click, jQuery expone los siguientes métodos los cuales tienen un comportamiento similar.

.blur()            .keypress()            .ready()

.dblclick()        .mousedown()           .resize()

.focus()           .mouseenter()          .scroll()

.focusin()         .mouseleave()          .select()

.focusout()        .mousemove()           .submit()

.hover()           .mouseout()            .unload()

.keydown()         .mouseover()

.keyup()           .mouseup()

Eventos

Otra manera de escuchar eventos es mediante el método bind(evento,función) cuyo primer argumento es el evento que quiero escuchar y el segundo la función a ejecutar una vez que escuche el evento.

/* Escucho que se haga click sobre un A */
$('a').bind(
    'click'
,   function(evento)
    {
        console.log('Hola!');
    }
);

Eventos

También puedo hacer que solo escuche un evento por única vez usando el método one(evento,función). La función pasada como argumento solo se ejecutara la primera vez que se escuche el evento.

/* Escucho que se haga click sobre un A */
$('a').one(
    'click'
,   function(evento)
    {
        console.log('Hola! por única vez');
    }
);

Eventos

Podemos dejar de escuchar un evento mediante el método unbind(evento) cuyo parámetro indica que evento quiero dejar de escuchar para la selección dada.

/* Dejo de escuchar que se haga click sobre un A */
$('a').unbind('click');

Eventos

También es posible agregar un evento a un elemento mediante el método live(evento,funcion). Este método me permite escuchar un evento de un elemento que no exista.

/* Dejo de escuchar que se haga click sobre un A */
$('a').die('click');
/* Escucho que se haga click sobre un A */
$('a').live(
    'click'
,   function(evento)
    {
        console.log('Hola!');
    }
);

Puedo dejar de escuchar mediante el método die(evento)

Eventos

/* Escucho que se haga doble click sobre un A */
$('a').dblclick(
    function(evento)
    {
        console.log('Hola!');
    }
);

El método dblclick(función) permite escuchar que el evento dblclick sobre el elemento seleccionado y luego ejecutar la función pasada como argumento.

Eventos

/* Escucho que se haga doble click sobre un A */
$('a').dblclick(
    function(evento)
    {
        console.log('Hola!');
    }
);

El método dblclick(función) permite escuchar que el evento dblclick sobre el elemento seleccionado y luego ejecutar la función pasada como argumento.

AJAX

jQuery incluye una serie de métodos que permiten manipular peticiones AJAX.

Eventos AJAX

/* Muestro y oculto un idicador de carga */
$('#indicador')
    .ajaxStart(
        function()
        {
            $(this).show();
        }
    )
    .ajaxStop(
        function()
        {
            $(this).hide();
        }
    );

Existen dos eventos relacionados con las peticiones del tipo AJAX, estos son ajaxStart y ajaxStop.

jQuery

By Neri Guidi

Made with Slides.com

jQuery

  • 759

More from Neri Guidi