Scribd
Cargar
10 vistas14 páginas

S4 Jquery

Cargado por

xxaczbuizkjnyfeple
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
10 vistas14 páginas

S4 Jquery

Cargado por

xxaczbuizkjnyfeple
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

4

Curso PHP Básico Escuela de Administración Pública

jQuery
4.1. ¿Qué es jQuery?
En la sesión anterior hablamos brevemente sobre jQuery. Aprendimos que podemos utilizar esta biblioteca
creando un enlace en nuestro proyecto hacia el fichero que se encuentra en su sitio web o bien al que nos hayamos
descargado en nuestro sistema de archivos.
Describimos jQuery como una librería de javascript, es decir, un conjunto de utilidades ya desarrolladas y
reutilizables que nos facilitan trabajar con este lenguaje de programación. jQuery es una de las librerías javascript
más utilizadas en la actualidad, siendo la base en la que se sustentan multitud de otros frameworks en su apartado
dedicado a la interfaz de usuario.
Entre las utilidades que podemos encontrar en jQuery podemos destacar la gestión de eventos, la creación y
eliminación de elementos HTML, la manipulación de sus propiedades, efectos y el uso de AJAX de forma
simplificada y rápida.
Nota: AJAX es el acrónimo de Asynchronous Javascript and XML y es utilizado para
cargar elementos HTML sin la necesidad de cargar la página completa. Cuando hacemos
clic en un enlace o en un formulario hacemos una llamada a un servidor para que nos
suministre todo el contenido de una página web, por lo que dejamos de ver la actual, que
es reemplazada por la nueva. Si deseamos que el usuario pueda consultar información
que no se encuentra en la página actual sin la necesidad de recargar toda la página sino
simplemente actualizando el contenido de un elemento HTML, lo podemos hacer
utilizando AJAX. Así, se hace una llamada, se obtiene el resultado y se actualiza el
elemento sin que el usuario tenga la sensación de que se ha cambiado la página por
completo. Esta técnica hace que una aplicación web funcione de forma similar a una
aplicación nativa de escritorio. Son las llamadas aplicaciones ricas en Internet o RIA
(Rich Internet Application).
Una de las acciones más comunes que realizarás con jQuery será la de seleccionar cualquier elemento HTML
identificado de alguna forma, usualmente por su atributo id o por uno de sus estilos CSS. Una vez seleccionado,
podrás realizar algún tipo de acción sobre él, como, por ejemplo, cambiar u obtener el valor de alguno de sus
atributos, añadir efectos, modificar su contenido e incluso gestionar los posibles eventos que ese elemento pueda
generar.
Los elementos HTML de una página web se estructuran en forma de árbol en lo que se conoce como Modelo de
Objetos del Documento o por su acrónimo DOM ( Document Object Model). Se define como un estándar que
implementa una interfaz que permite actualizar de forma dinámica la estructura, el contenido y el estilo de una
página web. Con este interfaz, javascript y, por extensión jQuery, puede navegar por la estructura del documento
HTML, añadir o eliminar elementos, modificarlos y capturar sus eventos.
Por ejemplo, si tenemos el siguiente código HTML:
<html>
<head>

1
Curso PHP Básico Escuela de Administración Pública

<title>Mi ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<div id="miBloque"> Hola Mundo!! </div>
</body>
</html>
La representación de esta estructura como un árbol DOM se vería como en la figura 4.1.

Figura 3.1. Árbol DOM.

Para acceder al contenido del elemento #miBloque desde la misma página con javascript, utilizaríamos el
siguiente código:
<script type="text/javascript">
var miBloque = document.getElementById( "miBloque" );
console.log( miBloque.innerHTML );
</script>
En este caso mostramos en la consola de javascript el contenido del elemento con el atributo innerHTML, por
tanto, debe aparecer en ella el texto "Hola Mundo!".
Truco: Para saber si nuestro código javascript es correcto utilizamos técnicas de
depuración al igual que haríamos en cualquier otro lenguaje de programación.
Actualmente todos los navegadores incluyen utilidades para depurar javascript. Por
ejemplo, Mozilla Firefox permite acceder a la consola de javascript accediendo a su
menú Herramientas>Desarrollador web>Consola web. Si en nuestro código llamamos a
la función console.log(variable) podemos ver el valor de variable en la consola
de javascript, permitiendo saber si nuestro código se comporta como esperamos. Las más
seguras de las utilidades son alert() y confirm() ya que abren un diálogo en forma
de ventana con el contenido que pasemos como argumento sin la necesidad de buscar la
consola u otra utilidad de depuración en los navegadores.

4.2. Localizar elementos


Con jQuery es posible acceder a cualquier elemento del DOM de un modo simple y rápido. También pone a
nuestra disposición multitud de funcionalidades para acceder y modificar esos elementos así como para navegar por
su estructura.
Nota: Para asegurarnos de que jQuery tiene acceso al contenido total de nuestra página,
es necesario corroborar que la página se ha cargado en su totalidad. Para ello es de
práctica común que el código de jQuery se encuentre encerrado en una función que se

2
Curso PHP Básico Escuela de Administración Pública

lanza cuando finaliza la carga de nuestra web. Debes conocer esa función porque te la
encontrarás en multitud de ocasiones.

<script type = "text/javascript">


$(document).ready( function() {
// Código de jQuery
});
</script>

Si consultas la documentación de jQuery podrás advertir que existen muchas maneras de acceder a estos
elementos. Sin embargo, hay tres que utilizarás muy a menudo:
1. Selección de un elemento por su atributo id.
2. Selección de uno o varios elementos por uno de sus estilos.
3. Selección de varios elementos por su etiqueta HTML.
Hay que tener en cuenta que el atributo identificador id debe ser único en la página HTML, de ahí que sólo
pueda seleccionar un elemento. Sin embargo, un estilo o una etiqueta puede ser utilizada por varios elementos
HTML.
Para acceder a un elemento por su id, utilizaremos el código del siguiente listado:
<script type = "text/javascript">
$(document).ready( function() {
var miElemento = $("#AtributoId");
});
</script>
Con ese código, podemos obtener los atributos y el contenido del elemento HTML con id igual a AtributoId,
modificarlos, e incluso lanzar alguna utilidad de jQuery. Para identificar un elemento por su id, en jQuery se utiliza
el carácter almohadilla ("#") delante del identificador.
Cuando existen múltiples etiquetas HTML con un mismo estilo, tener acceso a esos elementos es fácil con
jQuery. Basta con nombrar el estilo de forma similar a cuando utilizamos su identificador:
<script type = "text/javascript">
$(document).ready( function() {
var misElementos = $(".NombreDeEstilo");
});
</script>
En este caso se localizan todos aquellos elementos que tienen asignado el estilo NombreDeEstilo. Observa que
en lugar del carácter almohadilla se utiliza el punto delante del nombre del estilo, al igual que hace CSS al definir los
estilos.
Si queremos acceder a todas las etiquetas de un tipo en particular, como, por ejemplo, a todas las etiquetas de
bloque <div>, usaremos el nombre de la etiqueta sin ningún carácter que lo preceda:
<script type = "text/javascript">
$(document).ready( function() {
var misElementosDiv = $("div");
});
</script>
Es importante que tengas en cuenta que tanto en este caso como en el anterior puedes estar accediendo a un
grupo de elementos. En ese grupo podemos obtener un elemento concreto combinando selectores. Por ejemplo, si
queremos obtener una tabla que no tiene identificador, pero dispone de estilos, podemos seleccionarla así:
<script type = "text/javascript">
$(document).ready( function() {
var miTabla = $("table.miEstilo");
});
</script>

3
Curso PHP Básico Escuela de Administración Pública

Nota: Existen más combinaciones y filtros que puede encontrar en la sección de


selectores en la página de documentación de jQuery (http://api.jquery.com).
Como hemos mencionado, la estructura del DOM se comporta como un árbol, por lo que también será muy
frecuente el acceso a los nodos o hijos de un elemento HTML del árbol del DOM que sea compuesto por otros
elementos, por lo que será necesario realizar combinaciones de estos selectores.
Para ello, se indica el nodo o elemento padre y a continuación el filtro que seleccionará el o los nodos hijo. Si, por
ejemplo, tenemos una tabla en HTML con id="miTabla" y quisiésemos obtener todos los elementos fila <tr>,
el selector que utilizaríamos sería el siguiente:
<script type = "text/javascript">
$(document).ready( function() {
var miTablaFilas = $("#miTabla tr");
});
</script>
En este caso actúa a modo de filtro de selección: de todos los elementos que forman parte de mi tabla, quiero
acceder exclusivamente a los nodos <tr>.
Otro tipo de selector interesante que jQuery pone a nuestra disposición es el de campos de formularios. Este tipo
de selectores nos permiten acceder a los elementos comunes que componen un formulario HTML. Por ejemplo
para seleccionar todos los campos de entrada de datos de tipo texto (<input type="text"></input>)
utilizaríamos:
<script type = "text/javascript">
$(document).ready( function() {
var misCamposDeTexto = $("#miFormulario :text");
});
</script>
A continuación se muestra el listado de selectores para formularios:
• :enabled Para obtener todos los elementos habilitados de un formulario
• :radio Para obtener todos los campos de tipo radio
• :checkbox Para obtener todos los campos de tipo checkbox
• :checked Para obtener los campos de tipo checkbox seleccionados (checked = "checked")
• :button Para seleccionar todos los campos con la etiqueta <button> y <input type="button">
• :input Para acceder a los elementos <input>, <select> y <textarea>
• :selected Para obtener elementos <option> seleccionados

4.3. Manipular elementos


Normalmente seleccionamos uno o varios elementos para hacer algo con ellos, ya sea para obtener o alterar su
información, para desplazarlos en la estructura DOM, para eliminarlos de ella o para crear nuevos elementos.
La manipulación de los elementos con jQuery se realiza a través de funciones propias de la librería. La forma de
invocar a esas funciones o utilidades es usando el selector y a continuación el nombre de la utilidad:
<script type = "text/javascript">
$(document).ready( function() {
$("#miTabla").funcion();
});
</script>
Siendo funcion() la utilidad que queremos lanzar. Vamos a conocer algunas de esas utilidades en las siguientes
secciones.

4.3.1. Obtener información


La información que almacena un elemento HTML puede encontrarse de dos formas diferentes:

4
Curso PHP Básico Escuela de Administración Pública

1. Como su contenido: <div id="miElemento"> ##Contenido## </div>


2. Como atributos: <form action="miPagina.php" id="miFormulario" target
=""></form>
A cada uno de estos tipos se accede de forma diferente invocando a utilidades de jQuery. Para el caso del
contenido utilizaremos la función html():
<script type = "text/javascript">
$(document).ready(function(){
var miElemento = $("#miElemento").html();
console.log(miElemento);
});
</script>
La variable miElemento almacena el contenido del elemento con el id miElemento, es decir, el texto
"##Contenido##".
Cuando queremos obtener el valor de alguno de los atributos del elemento usamos la utilidad attr(), indicando
de qué atributo se trata. En nuestro ejemplo, para acceder al valor del atributo action de la etiqueta <form>:
<script type="text/javascript">
$(document).ready(function(){
var destino = $("#miFormulario").attr("action");
console.log(destino);
});
</script>
El valor del atributo action del formulario se almacena en la variable destino.
Existen dos casos especiales en los que el acceso a determinados atributos, al ser muy frecuentes, han terminado
generando funcionalidades específicas para acceder a su información.
El primero hace referencia al valor que toman los campos de los formularios a través del atributo value. Este
atributo no almacena ningún contenido si no se lo indicamos nosotros de forma explícita al crear la etiqueta.
Cuando el usuario introduzca algún valor en ese campo o seleccione una opción en una lista o campos de chequeo,
automáticamente HTML asigna esa información al atributo value del campo que se altera. Utilizando la utilidad
val() accedemos a esa información.
<form>
<input type="text" id="miCampo" value="Texto del campo"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
var miCampoValor = $("#miCampo").val();
console.log(miCampoValor);
});
</script>
En este caso, la variable miCampoValor almacenará el texto "Texto del campo" porque es el que le hemos
asignado por defecto, ya que ese código de jQuery se ejecuta nada más mostrarse la página. Para capturar el valor
que introduzca un usuario es necesario utilizar lo que se conoce como eventos, que son funcionalidades de jQuery
que permiten detectar y controlar acciones del usuario, como escribir en un campo de texto o hacer clic en el botón
de envío de un formulario. Más adelante en este capítulo veremos más en detalle los eventos de jQuery.
El segundo caso de acceso especial a atributos es el que hace referencia a los estilos CSS de un elemento. Con la
utilidad css() puede obtener el valor actual de cualquiera de los estilos de un elemento.
<script type = "text/javascript">
$(document).ready(function(){
var miColor = $("#miElemento").css("color");
console.log(miColor);
});
</script>
En este ejemplo, la variable miColor almacena el color del texto de #miElemento.

5
Curso PHP Básico Escuela de Administración Pública

Si deseamos manipular los estilos indicados en el atributo class, disponemos de otro juego más de
herramientas.
• $("#miElemento").hasClass("miEstilo");
se utiliza para preguntar si un elemento tiene asignado un determinado estilo.
• $("#miElemento").addClass("miEstilo");
añade un estilo al elemento, es decir, añade ese estilo al final del atributo class.
• $("#miElemento").removeClass("miEstilo");
elimina ese estilo del atributo class del elemento si lo tiene asignado.

4.3.2. Modificar elementos


No sólo es posible leer la información del contenido y los atributos de los elementos HTML, también es posible
alterar esa información. Para ello utilizaremos las mismas utilidades que hemos visto en la sección anterior, con la
diferencia de que le pasaremos como parámetros a esas funciones el nuevo valor que queremos asignar.
Cuando queremos modificar el contenido de un elemento a través de la utilidad html(), simplemente tenemos
que incluir entre comillas el nuevo contenido como parámetro de esa función.
<script type="text/javascript">
$(document).ready(function(){
$("#miElemento").html("<p>Nuevo contenido de texto</p>");
console.log($("#miElemento").html());
});
</script>
Si el nodo HTML con el identificador #miElemento es un bloque <div> tendrá el siguiente aspecto:
<div id="miElemento"><p>Nuevo contenido de texto</p></div>
Es el contenido que se encuentra entre las etiquetas de apertura y de cierre el que varía.
Esta forma de proceder es similar al caso especial de la utilidad val(). Si tenemos un formulario de entrada de
datos, y queremos modificar uno de sus campos, basta con escribir el contenido a cambiar como parámetro de esa
funcionalidad.
<script type="text/javascript">
$(document).ready(function(){
$("#miCampo").val("Texto a mostrar en el campo");
console.log($("#miCampo").val());
});
</script>
Para alterar el valor de los atributos es necesario indicar qué atributo estamos cambiando. Para ello se pasa el
nombre del atributo y su nuevo valor separado por una coma.
<script type="text/javascript">
$(document).ready(function(){
$("#miFormulario").attr("action","nuevaPagina.php");
console.log($("#miFormulario").attr("action"));
});
</script>
Con este código estamos modificando el atributo action del formulario #miFormulario, por lo que al hacer clic
en el botón de envío, la información del formulario se enviará a esa nueva página.
Esto también funciona para los estilos que hemos visto anteriormente. Por ejemplo, para modificar el color de
texto de un elemento observe el siguiente código:
<script type = "text/javascript">
$(document).ready(function(){
$("#miElemento").css("color", "red");
console.log($("#miElemento").css("color"));
});
</script>

6
Curso PHP Básico Escuela de Administración Pública

Al lanzar este código el color del texto del elemento #miElemento se verá de color rojo.
Los atributos se pueden modificar en grupo, es decir, podemos alterar más de un atributo con una única llamada
a la utilidad.
<script type="text/javascript">
$(document).ready(function(){
$("#miElemento").css({
"color" : "red",
"fontsize" : "10px"
});
$("a.miEnlace").attr({
"href" : "nuevoDestino.html",
"title" : "Enlace a nuevo destino"
});
});
</script>
Al seleccionar varios elementos es posible modificar su contenido o sus atributos en bloque, recorriendo cada
elemento del grupo y aplicando las utilidades ya vistas.
<script type="text/javascript">
$(document).ready(function(){
$("#miTabla td").each(function(index, element){
$(element)
.addClass("miNuevoEstilo")
.css("color","white");
});
});
</script>
En este ejemplo, con la función each() accedemos a cada elemento del grupo, de uno en uno, y manipulamos
su estilo, añadiendo el estilo .miNuevoEstilo al atributo class. Esta funcionalidad es de tipo iterativa, por cada
componente de un conjunto ejecuta los comandos incluidos en la función que tiene como parámetro. Esta
herramienta es muy útil cuando necesitamos cambiar muchos elementos HTML de forma rápida y simple.
En el ejemplo también puedes ver cómo es posible encadenar funciones en un mismo elemento, simplemente
añadiendolas con el carácter punto.

4.4. Eventos
Javascript pone a nuestra disposición un juego bastante amplio de utilidades para capturar los eventos que el
usuario puede provocar al interactuar con nuestra página web. Un evento es una acción determinada que el usuario
realiza en cualquier elemento HTML.
Existen elementos a los que se les puede asignar una utilidad o gestor de eventos, para ejecutar código al realizar
una acción concreta sobre esos elementos. Por ejemplo, si tenemos una lista desplegable y necesitamos saber cuándo
el usuario selecciona una opción de la lista y de qué opción se trata, podemos asignar a esa lista la utilidad
onChange(), que es una función en javascript que se lanza cuando realiza esa acción. Dentro de esa
funcionalidad, podemos incluir el código que necesitemos para gestionar la información de la lista u otra acción
relacionada.
Existen muchas más utilidades en javascript, pero tanto éstas como otras propias están incluidas en la librería de
jQuery. De hecho, jQuery simplifica el uso de los gestores de eventos de javascript y los dota de mayor potencia.
Nota: Ya hemos utilizado en ejemplos anteriores un gestor de eventos con la utilidad
.ready(), que detecta cuando se carga por completo la página web y en ese momento
ejecuta el código de la función que contiene.

4.4.1. Asociar eventos a elementos


Cada evento tiene que estar asociado a algún elemento. Normalmente queremos gestionar los eventos que se
producen en algunos de los elementos que necesitan de alguna acción, como hacer clic en un enlace o un bloque

7
Curso PHP Básico Escuela de Administración Pública

<div>, escribir texto en un campo de texto, seleccionar una opción de una lista y muchos otros más. En esta
sección veremos algunos ejemplos de los gestores más comunes.
Una de las acciones que más realiza un usuario es hacer clic en algún elemento web. Esa acción se captura con el
gestor de eventos click(). Para controlar un evento de un elemento es necesario crear una asociación entre
ambos. Observe el siguiente listado:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi ejemplo</title>
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery-3.2.1.min.js"></script>
<script src= "/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
<a id="miEnlace" href="miPagina.php">Enlace a miPagina.php</a>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#miEnlace").click(function(event){
event.preventDefault();
$(this).addClass("alert alert-danger");
});
});
</script>
En el ejemplo asociamos el elemento #miBloque con el evento click(), de forma que al hacer clic en ese
elemento siempre se lanza la función que se ha declarado dentro de la utilidad. Esa función no tiene ningún
nombre, es lo que se conoce como función anónima, y en el caso de los eventos siempre tiene como parámetro el
objeto event. Ese objeto almacena información relacionada con el elemento y con el evento y la podemos utilizar
en el código de la función para controlar a ambos:
• event.target almacena el objeto DOM que lanzó el evento
• event.type guarda el tipo de evento
• event.pageX y event.pageY la posición del puntero del ratón cuando se lanzó el evento.
Truco: Una de las situaciones más usuales es la de anular el comportamiento por defecto
de un elemento. Por ejemplo, cuando ese elemento es un enlace y queremos que, al
hacer clic en él, se ejecute el código de la función pero que no realice su acción por
defecto (que se cargue la página referenciada), podemos desactivar ese comportamiento
por defecto si llamamos a la función preventDefault(), al comienzo de la función
que controla el evento.

4.4.2. Gestores de eventos


Además de la utilidad click(), jQuery nos proporciona los siguientes gestores de eventos:
• Eventos de ratón:
◦ .dblclick() Se lanza al hacer doble clic en el elemento enlazado.

8
Curso PHP Básico Escuela de Administración Pública

◦ .hover() Nos permite realizar acciones cuando pasamos el cursor del ratón por encima del
elemento.
• Eventos del navegador:
◦ .resize() Normalmente se enlaza al elemento window, que es el que representa al navegador. Si
redimensionamos la ventana del navegador se ejecutará el código que incluyamos en este gestor.
◦ .scroll() Cada vez que nos desplacemos por un elemento asociado que tenga barras de
desplazamiento para ver su contenido se llamará a este evento. Si utilizamos el elemento window se
referirá al desplazamiento que haga el usuario en nuestra página web cuando su contenido sobrepase
las dimensiones de la ventana del navegador.
• Eventos de formulario:
◦ .focus() Se lanza cuando el elemento asociado consigue el foco, es decir, se convierte en el campo
activo en el que se puede interactuar con él.
◦ .blur() Es la situación inversa, es decir, cuando se pierde el foco de un campo del formulario.
◦ .change() Este evento se relaciona con cualquier cambio que se produzca en un campo del
formulario. Se puede enlazar a listas de forma que se ejecute cuando se seleccione una opción. Es muy
útil para validar la información introducida por los usuarios en un formulario.
◦ .submit() Este gestor se ejecuta cuando hacemos clic en el botón de envío del formulario, momento
idóneo para comprobar que la información que se envía es correcta.
• Eventos del teclado:
◦ .keydown() Enlaza este gestor de eventos al evento pulsar tecla en un elemento.
◦ .keypress() Se lanza cuando se pulsa y suelta una tecla del teclado.
◦ .keyup() Finalmente, éste es el gestor encargado de manejar el evento que se produce al soltar una
tecla en el elemento asociado.
Es posible que queramos que dos o más eventos tengan la misma funcionalidad. jQuery nos proporciona la
utilidad .on() para relacionar el mismo código con uno o varios eventos. Incluso permite definir en la misma
declaración múltiples gestores de eventos.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Eventos jQuery</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery-3.2.1.min.js"></script>
<script src= "/js/bootstrap.min.js"></script>
</head>
<body>
<input type = "text" id = "miCampo"/>
<a id = "miEnlace" href = "miPagina.php">Enlace a miPagina.php</a>
<div id = "log"></div>
</body>
</html>
<script>
$(document).ready(function(){
// Misma funcionalidad para dos eventos
$("#miEnlace").on("click mouseenter",{color :'red'},function( event ){
event.preventDefault();
$(this).css("color", event.data.color);
$("<div>")

9
Curso PHP Básico Escuela de Administración Pública

.append(event.type + " por defecto evitado")


.appendTo("#log");
});
// Multiples gestores en una asociación
$("#miCampo").on({
click: function(){
$(this).css("background-color", "yellow");
},
blur: function(){
$(this).css("background-color","white");
}
});
});
</script>
En el enlace, con la utilidad .on() indicamos que tanto al hacer clic como al pasar el puntero del ratón por
encima se cambie el color de texto y añade un mensaje al bloque inferior. Dos eventos y una misma funcionalidad.
Fíjate que es posible pasar parámetros a ambas funciones, en nuestro ejemplo el color de texto del enlace al que
queremos cambiar.
En el campo de texto, sin embargo, definimos dos gestores de eventos para el mismo elemento ahorrándonos
algunas líneas.
Nota: Usamos $(this) para hacer referencia al mismo elemento dentro de la función que
gestiona el evento.
Existe una utilidad que nos permite lanzar un evento desde el código, sin tener que esperar a que se produzca. Si,
por ejemplo, queremos que una de las acciones que se realicen al gestionar un evento sea lanzar otro evento que ya
tiene código asociado, podemos utilizar la función .trigger().
Si en el ejemplo anterior ejecutamos el comando $("#miCampo").trigger("click"); se lanzará el
código que gestiona ese evento. Esta utilidad nos puede permitir reutilizar y simplificar el código, evitando que se
repita.
Nota: Realmente todos los eventos que hemos visto son llamadas abreviadas a la utilidad
on(). Por ejemplo, el evento click(function(){ … }) realmente es un alias de la
llamada a on("click", function(){ … }).

4.5. Efectos
La librería jQuery nos proporciona un juego bastante completo de efectos para embellecer nuestra página web. Así
podemos hacer que las propiedades que cambiemos en los elementos HTML se produzcan de forma progresiva,
como una animación o variando el tiempo que tardan en producirse los cambios.
Este tipo de efectos puede configurarse con una serie de parámetros que nos permiten ajustar muy bien el
comportamiento que queremos que tenga el efecto en el elemento. También tienen configuraciones rápidas para
crear efectos predeterminados cuando deseamos una animación lenta o rápida. Incluso es posible ejecutar una
función cuando finalice el efecto.
Vamos a ver algunos de los efectos más utilizados en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Efectos jQuery</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>

10
Curso PHP Básico Escuela de Administración Pública

<div class="container">
<div class="row">
<div id="miElemento" class="well">Elemento</div>
<div><a href="#" id="ocultaElemento">Ocultar elemento</a></div>
<div><a href="#" id="muestraElemento">Mostrar elemento</a></div>
<div><a href="#" id="alternaElemento">Mostrar/Ocultar elemento</a></div>
<div><a href="#" id="fundidoSalidaElemento">Fundido de salida de
elemento</a></div>
<div><a href="#" id="fundidoEntradaElemento">Fundido de entrada de
elemento</a></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$("#ocultaElemento").click(function(event){
event.preventDefault();
$("#miElemento").hide("slow");
});
$("#muestraElemento").click(function(event){
event.preventDefault();
$("#miElemento").show("fast");
});
$("#alternaElemento").click(function(event){
event.preventDefault();
$("#miElemento").toggle(400,function(){
// Fin de animación
});
});
$("#fundidoSalidaElemento").click(function(event){
event.preventDefault();
$("#miElemento").fadeOut("slow",function(){
// Fin de animación
});
});
$("#fundidoEntradaElemento").click(function(event){
event.preventDefault();
$("#miElemento").fadeIn("slow",function(){
// Fin de animación
});
});
});
</script>
Uno de los efectos más utilizados es el de mostrar u ocultar elementos. Con las funciones .show() y
.hide()disponemos de dos excelentes herramientas que nos evitan el tener que modificar estilos CSS específicos
de los elementos, ya que lo hace jQuery por nosotros. Además, en estas utilidades podemos indicar, en el primer
parámetro, el tiempo empleado para aparecer o desaparecer, ya sea en formato numérico indicando los milisegundos
o con un texto declarando que la animación sea lenta (slow) o rápida (fast).
La utilidad .toggle() es una combinación de las anteriores que resulta muy interesante. Al ejecutarla, si el
elemento es visible, lo oculta y si está oculto, lo muestra.
También podemos tener efectos de fundido (.fadeIn(), .fadeOut()), tanto al mostrar como al ocultar un
elemento. Este efecto hace aparecer o desaparecer el elemento al mismo tiempo que lo desvanece hasta hacerlo
transparente al ocultarlo o lo va mostrando progresivamente.

11
Curso PHP Básico Escuela de Administración Pública

4.6. Validación de formularios


Para ilustrar el uso de jQuery vamos a ver un ejemplo en el que comprobaremos si la información suministrada
en un formulario es correcta o no, es decir, si cumple con las características que cada campo impone a la entrada de
información.
Cuando solicitamos a un usuario que incluya información en un formulario de toma de datos puede suceder que
esa información no sea correcta o que simplemente no se suministre. En ocasiones necesitamos que el usuario
incluya determinados datos en un campo del formulario, ya que, de otra manera, la información que nos suministra
quedaría incompleta para el propósito para el que está destinada. También es posible que el contenido que el
usuario suministre y el tipo de campo que necesitamos no coincida, por lo que debemos advertir al usuario para que
corrija esos datos. Por ejemplo, si estamos solicitando la edad del usuario y éste no utiliza un formato numérico o
bien le advertimos de que la información es incorrecta o bien no le permitimos escribir otro carácter que no sea
numérico.
Con jQuery podemos también comprobar ese contenido y ejecutar una acción concreta, aunque lo más apropiado
es utilizar extensiones de jQuery a través de lo que conoce como plugins. Un plugin es una pequeña extensión de
una librería que añade utilidades que, por defecto, no tiene la librería a la que extiende.
Existen multitud de plugins para jQuery siendo de los más utilizados los encargados de validar la entrada de datos
en formularios. El más popular se llama jQuery Validate (http://jqueryvalidation.org/) y es el que vamos a utilizar
en nuestro ejemplo debido a su simplicidad y al ahorro de tiempo de desarrollo que conseguimos con sus
funcionalidades.
Accede a la página de jQuery Validate. En la sección Download haz clic en la última versión disponible
(http://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js) con el botón derecho del ratón, escoge la
opción Guardar archivo como y selecciona la carpeta de su proyecto. Descarga también el archivo con el que se
añaden métodos adicionales de validación, ya que en esos métodos encontraremos muchas utilidades para
comprobar campos típicos como el IBAN o documentos de identidad
(http://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js).
Para mostrar los mensajes de advertencia en español necesitas descargar, además, el archivo de localización
correspondiente. Para ello descarga el archivo seleccionando la poción raw en el enlace https://github.com/jquery-
validation/jquery-validation/blob/master/src/localization/messages_es.js.
Una vez descargados los tres ficheros, añadelos a tu página web como un enlace desde la cabecera justo después de
jQuery.
Veamos algunas validaciones en un ejemplo simple:
<!DOCTYPE html>
<html>
<head>
<title>Validar Formulario</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="additional-methods.min.js"></script>
<script src="messages_es.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-12 well">
<form id="myForm">
<div class="form-group">
<label for="exampleInputNombre">*Nombre</label>
<input type="text" name="nombre" class="form-control"
id="exampleInputNombre" placeholder="Escriba su nombre"
minLength="5" required/>

12
Curso PHP Básico Escuela de Administración Pública

</div>
<div class="form-group">
<label for="exampleInputEdad">*Edad</label>
<input type="text" name="edad" class="form-control"
id="exampleInputEdad" placeholder="Indique su edad"
number="true" required/>
</div>
<div class="form-group">
<label for="exampleInputEMail">Correo Electrónico</label>
<input type="text" name="email" class="form-control"
id="exampleInputEMail" email="true"
placeholder="Indique su correo electrónico"/>
</div>
<div class="form-group">
<label for="exampleInputWeb">Página Web</label>
<input type="text" name="web" class="form-control"
id="exampleInputWeb" placeholder="Indique su página web"
url="true"/>
</div>
<p>(*) Campos obligatorios</p>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#myForm").validate();
});
</script>
Para poder utilizar este plugin es necesario que indiques qué formulario deseas validar. Como puedes observar al
final del ejemplo, asociamos el formulario #myForm a la utilidad .validate(), para que, desde el momento en
que se carga la página, los campos indicados sean comprobados a medida que el usuario vaya completándolos con
información.
En el ejemplo tenemos cuatro campos de información. Cada uno es validado cuando contiene información
suministrada por el usuario en el momento en el que pierde su foco. Si en ese momento la información del campo
es correcta no sucede nada. Pero si no se cumple alguna de las condiciones descritas se muestra un mensaje debajo
del campo indicando el error en la información.
Con esta herramienta definimos en cada campo las características que ha de cumplir para que la validación sea
correcta. Se puede definir bien mediante atributos de los campos o bien mediante parámetros de la función
.validate(). Para simplificar hemos optado por definir las reglas de validación como atributos de los campos del
formulario.
Para hacer que un campo sea obligatorio, como sucede con los campos nombre y edad del ejemplo,
simplemente tenemos que añadir el atributo required al final de la etiqueta. Esta característica no se evalúa
cuando el campo pierde el foco, sino cuando se envía el formulario haciendo clic en el botón de envío.
En el campo nombre además indicamos que la longitud en caracteres del campo no puede ser menor a 5
utilizando el atributo minlength. Si al perder el foco no se cumple se nos mostrará un mensaje de advertencia.
En el campo de edad forzamos que la información sea de tipo numérico con el atributo number.
Los campos donde definimos el correo electrónico y la página web ya no son obligatorios y nos proporcionan una
forma muy simple de comprobar que tanto el correo electrónico como la URL de la página web se han escrito de
forma correcta. Para ello se utilizan los atributos email y url respectivamente.
Escriba información correcta e incorrecta y compruebe cómo, tanto al perder el foco de cada campo incorrecto
como al enviar el formulario, se muestran los mensajes de advertencia.

13
Curso PHP Básico Escuela de Administración Pública

14

También podría gustarte