Librería JQuery

Misosguar
Diego Rubens Mañas

Este tutorial presenta la librería JQuery para Javascript. En principio manipularemos elementos de un formulario, su estilo, visualización y luego trataremos AJAX con JQuery. Trataremos de mostrar lo mucho que mejorará nuestro estilo de programación usando la librería y todo el tiempo que nos ahorraremos programando de ahora en adelante. A por él!

JQuery puedes descargarlo de Downloading jQuery

1. Introducción:

Cómo usar la librería JQuery. Elementos id, name, class y tag. Selección de elementos para su manipulación.

Insertar la librería en la página:

Luego de bajar la lirería insertamos el archivo .js en nuestro código de la forma usual:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  // Tu código va debajo de JQuery
</script>

Nuestro formulario:

Trabajaremos con un formulario de ejemplo, te lo mostramos: Formulario de ejemplo

Y te mostramos el código para que lo pruebes:

<form name='frm' id='form1'>
<div id='sugerencia'>
<p>Te sugerimos este apodo:
<span class='sugerencia'>NICK1</span>
  Lo quieres?
<input type='button' value='Aceptar'>
</p>
</div>
<label>Nombre: <input type='text' name='nombre' id='nombre1'></label>
<label>Edad: <input type='text' name='edad' id='edad1'></label>
<table>
<tr>
  <td rowspan='3'>Reside en: </td>
  <td><label><input type='radio' name='reside'> Argentina</label></td>
</tr>
<tr>
  <td><input type='radio' name='reside' id='reside1'><label for='reside1'> América<label></td>
</tr>
<tr>
  <td><label><input type='radio' name='reside'> Resto del Mundo</label></td>
</tr>
</table>
<input type='submit' value='Enviar'>
</form>

El tag LABEL se utiliza para rotular algunos controles input y produce el efecto de que cuando el usuario les da el foco, el foco se transfiere al control asociado. Prueba cliquear en 'Nombre' y verás como el foco se transfiere al input 'nombre1'.

Te sugerimos este apodo: NICK1 Lo quieres?

Reside en:

Los controles input tienen los atributos id y name. Sirven para identificarlos pero 'name' es el nombre de la variable o del campo del formulario, en cambio 'id' es un identificador a nivel de html y debe ser único en la página. Otros tag de html tienen la propiedad 'id' también, y la propiedad 'class' que indica cuál es su clase de estilo CSS asociado. En el form tenemos un div con el id "sugerencia" y tenemos un span con la clase "sugerencia". Son por tanto diferentes, como veremos a continuación.

Seleccionar elementos:

El clásico document.getElementById('id') es reemplazado por el más simple $('#id'). Si queremos seleccionar una clase usamos $('.clase'). Para seleccinar un conjunto de tags antes usábamos document.getElementsByTagName("tag"), ahora es simplemente $('tag'). Lo más extraordinario es que con JQuery podemos seleccionar muchas cosas diferentes a la vez, por ejemplo $('#id, .clase, a, td') seleccionaría el elemento con identificador 'id' y todos los de la clase de estilo '.clase' junto con los elementos 'a' (enlaces) y 'td' (celdas de tablas).

Supongamos que queremos resaltar un poco el div 'sugerencia' de nuestro formulario. Lo seleccionamos con $('#sugerencia') y le damos un estilo con color de fondo y un borde fino negro. Con JQuery es muy sencillo:

$('#sugerencia').css({
  'border': '1px solid black',
  'background-color': '#ebb'
  });

Te sugerimos este apodo: NICK1 Lo quieres?

Ahora vamos a resaltar el span de la clase 'sugerencia' que envuelve al Nick añadiendole una clase que definimos antes:

<style>
 .mostaza { background: #dd0; }
</style>
<script>
 $('.sugerencia').addClass('mostaza');
</script>

Y si queremos saber la altura y el ancho del formulario 'form1', consultamos su propiedad css height y width:

altura= $('#form1').css('height');
ancho = $('#form1').css('width');
alert('Altura: '+altura+' Ancho: '+ancho);

Te sugerimos este apodo: NICK1 Lo quieres?

Reside en:

Manipulando elementos:

Ahora que sabemos seleccionar elementos de nuestra página vamos a manipularlos con las funciones de JQuery. Por ejemplo podemos asignar una clase CSS a un elemento y luego removerla para crear diferentes efectos: resaltar el elemento, ocultarlo, etc. Vamos a mostrar cómo resaltar un elemento con un botón y volverlo a la normalidad con otro:

Préstame atención

Código:

<input type='button' onClick='$("#frase").addClass("mostaza");' value='Resaltar'>
<span id='frase'> Préstame atención </span>
<input type='button' onClick='$("#frase").removeClass("mostaza");' value='Normalizar'>

Ahora presten atención a esto: en JQuery tenemos el método hover que simplifica la tarea de darle un efecto a un elemento cuando se posa el mouse sobre él y cuando se lo retira. El método hover recibe 2 funciones como parámetro, la primera es la función que se ejecuta cuando el elemento tiene el mouse encima, por ejemplo colocarle un estilo que lo resalte; la segunda función se ejecuta cuando el mouse se retira del elemento y puede servir para retirarle el estilo que lo resaltaba o para lanzar un alert(). Veamos un ejemplo, tenemos un elemento con el id 'mirame':

Préstame atención

$('#mirame').hover(
 function(elem) { $(this).addClass('mostaza'); },
 function(elem) { $(this).removeClass('mostaza'); }
 );

Si no seleccionas bien el elemento no te funcionará, recuerda que si es un id debes seleccionarlo con el signo # y luego el id. Es un error difícil de encontrar y fácil de cometer.

Probemos un par de efectos de JQuery que mejoran la sensación del usuario en nuestra página. Los métodos que usaremos pueden usarse con o sin parámetros. El parámetro que reciben es el número de milisegundos que dura el efecto. Por ejemplo 1000, 2000 o 3000 equivalen a 1, 2 o 3 segundos. Prueba con los botones para ver el efecto que producen en este texto:

Esto es un panel de control

Los métodos usados son hide(), show(), slideUp(), slideDown(), fadeOut(), fadeIn(). Sus nombres son autoexplicativos de lo que hacen.

<input type='button' onClick='$("#control").hide(3000)' value='Hide()'>
<input type='button' onClick='$("#control").show(1000)' value='Show()'>
<input type='button' onClick='$("#control").slideUp()' value='SlideUp()'>
<input type='button' onClick='$("#control").slideDown()' value='SlideDown()'>
<input type='button' onClick='$("#control").fadeOut(2000)' value='FadeOut()'>
<input type='button' onClick='$("#control").fadeIn(2000)' value='FadeIn()'>

Formularios con Ajax:

El usuario realiza una elección en nuestro formulario o introduce datos y nosotros enviamos una petición AJAX al servidor para traer una porción de HTML que le informa al usuario que lo que hizo generó algo. Con JS normal tendríamos que programar varias cosas, pero con JQuery tenemos que programar la función load() y listo. Veamos un ejemplo: el usuario elige un radio button y en un div con id 'Elegido' aparece el resultado del servidor.

El ejemplo es muy simple pero el script del servidor podría ser más complejo.

<P style='text-align: center'>
<LABEL>
<input type='radio' onClick='$("#Elegido").load("azul.htm")' name='color'>Azul</input>
</LABEL>
<LABEL>
<input type='radio' onClick='$("#Elegido").load("blanco.htm")' name='color'>Blanco</input>
</LABEL>
</P>
<P style='text-align: center'>
<span id='Elegido'></span>
</P>

La función load() recibe como primer argumento la página del servidor, por ejemplo "pedido.php", y puede recibir argumentos por el métido GET, por ejemplo "pedido.php?cantidad=10&codigo=334". Si queremos mandar información por el método POST la función load() los recibe como segundo argumento y debe ser un objeto, por ejemplo {cantidad: 10, color: 'negro', articulo: 209}.

 $('#pedido).load("pedido.php?cantidad=10&codigo=334"); // Método GET
 $('#pedido).load("pedido.php",{cantidad:10,codigo:334}); // Método POST

JSON es una forma de codificar objetos en JS. Un objeto se encierra entre llaves y tiene atributos y valores separados por dos puntos.

Por ejemplo el objeto italia= {continente: 'Europa',superficie: 301338, moneda:'€'} tiene 3 atributos: continene, superficie y moneda.

Con AJAX podemos pedir al servidor una información en este formato para trabajarla directamente con JS. Una vez más JQuery nos ayuda con una función para realizar la tarea: getJSON().

Supongamos que tenemos un Select donde el usuario selecciona el país y nuestra página le informa algunos datos por AJAX.

<select name='pais' onChange='$.getJSON("paises.htm",{id: this.value},informar)'>
<option value=0>Italia</option>
<option value=1>Italy</option>
<option value=2>Italia</option>
<option value=3>Italy</option>
<option value=4>Italia</option>
</select>

El evento onChange del Select llama al servidor para buscar los datos del país seleccionado: this.value

La función getJSON le envía a 'paises.htm' el parámetro 'id' con el valor del país. Usa el método GET para enviar parámetros. Cuando recibe la información en formato JSON lo pasa directamente a la función informar(). La vemos aquí:

function informar(j){
  alert("Continente: " + j.continente +
  " moneda: " + j.moneda +
  " superficie: " + j.superficie);
}

Continuará...


Establecer como página de inicio