jquery-apuntes
TRANSCRIPT
El framework de JavaScript
jQUERY 1
JQUERY ....................................................................................................................................... 3
INTRODUCCIÓN ..................................................................................................................................... 3
DOM ...................................................................................................................................................... 3
UTILIZAR jQUERY ................................................................................................................................... 4
PRINCIPIOS DE USO ............................................................................................................................... 5
CARGAR LA WEB .................................................................................................................................... 5 Práctica ............................................................................................................................................... 5
ACCESO A LOS ELEMENTOS DE LA WEB .................................................................................................. 6 Con JavaScript ..................................................................................................................................... 6 Con jQuery .......................................................................................................................................... 6
SELECTORES ........................................................................................................................................... 6 Selector de etiquetas. .............................................................................................................................. 6 Selector por identificador ........................................................................................................................ 7 Selector por clase CSS .............................................................................................................................. 7 Selectores de varios elementos ............................................................................................................... 7 Selectores posicionales ............................................................................................................................ 7 Selectores parent>child ........................................................................................................................... 7 Selectores de formulario ......................................................................................................................... 8 Selectores de jerarquía ............................................................................................................................ 8 TABLAS DE SELECTORES ........................................................................................................................... 9 OPERADORES ......................................................................................................................................... 10
Ejemplo ............................................................................................................................................. 10
EVENTOS .............................................................................................................................................. 10 Práctica ............................................................................................................................................. 11
TIPOS DE EVENTOS ................................................................................................................................ 11 EVENTOS RELACIONADOS CON EL RATÓN ........................................................................................ 12 EVENTOS RELACIONADOS CON EL TECLADO .................................................................................... 12 EVENTOS COMBINADOS TECLADO-RATÓN....................................................................................... 12 OTROS EVENTOS ............................................................................................................................... 13
DEFINIR/ELIMINAR EVENTOS: bind/unbind ........................................................................................... 14 BIND .................................................................................................................................................. 14 Ejemplo 1. Asignación de un evento a los elementos de una etiqueta ............................................ 14 Ejemplo 2. Asignación de una función a varios eventos a la vez ...................................................... 15 UNBING ............................................................................................................................................. 15
OTRAS UTILIDADES .............................................................................................................................. 15
MÉTODOS ............................................................................................................................................ 16 text() ...................................................................................................................................................... 16
Ejemplo ............................................................................................................................................. 16 attr()/removeAttr .................................................................................................................................. 16
Ejemplo 1 .......................................................................................................................................... 16 Ejemplo 2 ......................................................................................................................................... 17
addClass/removeClass ........................................................................................................................... 18 Ejemplo ............................................................................................................................................. 18
html() ..................................................................................................................................................... 19 Ejemplo ............................................................................................................................................. 19
css() ........................................................................................................................................................ 20
jQUERY 2
Ejemplos ............................................................................................................................................ 20 append / prepend .................................................................................................................................. 20
Ejemplos ............................................................................................................................................ 21
ITERADOR each .................................................................................................................................... 21 Ejemplo ............................................................................................................................................. 21
EFECTOS VISUALES ............................................................................................................................... 22 hide/show | slow/fast.......................................................................................................................... 22
Ejemplo ............................................................................................................................................. 22 fadeIn / fadeOut / fadeTo ...................................................................................................................... 23
Ejemplo ............................................................................................................................................. 24 Ejemplo ............................................................................................................................................. 24
Comprobar si un element es visible ...................................................................................................... 25 toggle() ................................................................................................................................................... 25
Ejemplo ............................................................................................................................................. 25 animate .................................................................................................................................................. 26
Ejemplo ............................................................................................................................................. 27
PRÁCTICA: MENÚ DESPLEGABLE .......................................................................................................... 27
ANEXO ...................................................................................................................................... 31
OPERACIONES HABITUALES ................................................................................................................. 31
FUENTES ................................................................................................................................. 32
jQUERY 3
jQUERY
INTRODUCCIÓN
jQuery es un framework1 de JavaScript que permite simplificar el manejo de los
documentos HTML, el árbol DOM, manejar eventos, desarrollar animaciones y agregar
interacción con Ajax a páginas Web.
JQuery es software libre y de código abierto creado por John Resig que además trabaja
para Mozilla Corporation.
La primera versión de jQuery estable apareció en el año 2006 y la última, de febrero de
2011, es la versión 1.5.1. Esta última versión se caracteriza por la utilización de Ajax.
El uso de jQuery librera al programador de tener que implementar los métodos
JavaScript que el framework contiene. Entre otras facilidades, jQuery tiene
implementados todos sus métodos para detectar el browser del usuario y adaptar las
funciones a cada uno de ellos.
La librería jQuery en resumen nos aporta las siguientes ventajas:
Ahorra muchas líneas de código.
Hace transparente el soporte de nuestra aplicación para los navegadores
principales.
Provee de un mecanismo para la captura de eventos.
Provee un conjunto de funciones para animar el contenido de la página en
forma muy sencilla.
Integra funcionalidades para trabajar con AJAX.
DOM
Acorde al W3C el Document Object Model o DOM es una interfaz de programación
de aplicaciones (API) para documentos validos HTML y bien construidos XML. Define
la estructura lógica de los documentos y el modo en que se accede y manipula.
El DOM permite un acceso a la estructura de una página HTML o XHTML mediante el
mapeo de los elementos de esta página en un árbol de nodos. Cada elemento se
convierte en un nodo y cada porción de texto en un nodo de texto.
La siguiente página
<!DOCTYPE HTML> <head>
<title>Esta es mi Web</title> </head> <body>
<p>Esta es mi primera <strong>Web</strong></p>
1 Un framework son librerías de código que contienen métodos ya listos para utilizar
jQUERY 4
</body>
</html>
Se corresponde con el siguiente árbol de nodos generado automáticamente por DOM
Otro ejemplo gráfico
UTILIZAR jQUERY
Para utilizar la librería debemos descargarla del sitio oficial (http://jquery.com/) e
introducir en cada página que lo requiera utilizar la siguiente línea en el bloque <head>:
<script src=" jquery-1.5.1.min.js"></script>
Del sitio oficial de jQuery descargaremos la versión descomprimida que ocupa
alrededor de 84 Kb (es el archivo jquery-1.5.1.min.js).
Documento
HTML
head
meta title
body
p
“Esta es mi Web” “Esta es mi
primera”
strong
“Web”
jQUERY 5
PRINCIPIOS DE USO
La forma de interactuar con la página es mediante la función $(), un alias de jQuery que
recibe como parámetro una expresión CSS o el nombre de una etiqueta HTML y
devuelve todos los elementos que concuerdan con la expresión.
// Devuelve el elemento con id="cabecera" $("#cabecera")
// Devolverá una matriz de elementos con class="destacado" $(".destacado")
Una vez obtenidos los elementos, se les puede aplicar cualquiera de las funciones que
facilita la biblioteca.
// Se elimina el estilo (removeClass()) y se aplica uno nuevo (addClass()) a todos los nodos con class=" destacado " $(". destacado ").removeClass("destacado ").addClass("nodestacado");
CARGAR LA WEB
Una de las funciones más utilizadas en las aplicaciones JavaScript es la siguiente
window.onload = function() {,,,}
La orden anterior hace que function() se ejecute una vez que la página se haya cargado
por completo. jQuery dispone de una función equivalente
$(document).ready(function(){…})
La gran ventaja de la función de jQuery, es que la página se puede manipular en cuanto
se ha cargado su código HTML (y por tanto, se ha construido el árbol DOM de la
página) mientras que la función de JavaScript espera a que se carguen todos los
elementos de la página, incluyendo todas las imágenes. De esta forma, las aplicaciones
realizadas con jQuery pueden responder de forma mucho más rápida que las
aplicaciones JavaScript tradicionales.
Práctica
Se mostrará una ventana de bienvenida al cargar la página
Fichero HTML
<!DOCTYPE HTML>
<html> <head> <meta charset=utf-8">
<title>Ejemplo 1</title> <script src="js/jquery-1.5.1.min.js"></script>
<script src=" js/fichero.js" ></script> </head> <body>
<h1> Comenzando.....</h1> </body>
</html>
jQUERY 6
Fichero JavaScript
$(document).ready(function(){
alert("Bienvenid@ a mi página"); });
ACCESO A LOS ELEMENTOS DE LA WEB
Por otra parte, la función getElementById() es posiblemente la más utilizada al
desarrollar aplicaciones web, ya que permite seleccionar un elemento a partir de su
atributo “id”. Además, existen otras dos funciones relacionadas:
getElementsByTagName() y getElementsByName(). jQuery incluye la función $()
como una alternativa más rápida y completa para seleccionar cualquier elemento de la
página:
Con JavaScript
// Seleccionar un elemento document.getElementById("miParrafo");
// Seleccionar todos los enlaces document.getElementsByTagName("a");
// Seleccionar todo lo anterior ----
// Seleccionar mediante la clase CSS ----
Con jQuery
// Seleccionar un elemento $("#miParrafo");
// Seleccionar todos los enlaces $("a");
// Seleccionar todo lo anterior $("#miParrafo, a")
// Seleccionar mediante la clase CSS $(".miClase")
SELECTORES
jQuery utiliza selectores para identificar aquellos elementos sobre los que se quiere
actuar. Un selector es una cadena de caracteres que identifica a uno o varios elementos
de una página Web.
Los selectores básicos utilizados en jQuery son:
Selector de etiquetas.
$(“h2”)
//selecciona todos los elementos que tienen etiqueta <h2>…..</h2>
Selector por etiqueta/contenido.
jQUERY 7
$(“p:contains(„Hola‟)”)
//selecciona los párrafos (<p>…</p>) que contengan la palabra “Hola”
Selector por etiqueta/propiedad.
$("div:visible")
//selecciona los div que tengan la propiedad visible=true
Selector por etiqueta/clase.
$("li.nombreClase")
//selecciona los li que tengan asignada la clase CSS nombreClase
Selector por identificador
$(“# misComentarios”)
//selecciona todos los elementos que tienen el atributo id=misComentarios
Selector por clase CSS
$(.miClase)
//selecciona todos los elementos que tienen como atributo class=”miClase”
Selectores de varios elementos
$(“p, a”)
//Selecciona todos los <a> y todos los <p>
Selectores posicionales
Los selectores posicionales stán basados en las relaciones posicionales entre elementos
según la estructura DOM del documento.
Selecciona el primer elemento <p> de la página
$(“p:first”)
Selecciona el primer <img> de la página que tiene un atributo src acabado
en .png
$(“img[src$=.png]:first)
Selecciona todos los párrafos que implementen la clase CSS miClase:
$(“p[@miClase]”)
Selecciona todos los divs que contengan algún párrafo dentro:
$(“div[p]”)
Selecciona todos los párrafos que tengan al menos un enlace:
$("p[a]")
Selecciona todos los radio buttons que han sido chequeados
$("input[@type=radio][@checked]")
Selectores parent>child
Los selectores parent>child permite que se pueda puedan acceder a los elementos que
sean hijos directos de otros.
jQUERY 8
//selecciona todas las etiquetas b que son hijas directas de los párrafos $("p > b")
//selecciona todas las etiquetas que son hijas directas del elemento con id="capa" $("#capa > *")
Selectores de formulario
Los selectores de formulario permiten seleccionar elementos de formulario de forma
específica.
Selecciona todos los elementos <input> con un tipo de atributo igual al
nombre del selector.
$(“:text”)
//selecciona todos los input que tengan tipo texto $(“:checkbox”)
//selecciona todos los input que tengan tipo checkbox
Selecciona todos los elementos input
$(“:input”)
Selecciona todos los elementos button
$(“:button”)
Selecciona todos los elementos activados del formulario:
$(“:enabled”)
Selecciona todos los radio buttons y checkbox del formulario que están
pulsados
$(":checked")
Selecciona todos los radio button que estén chequeados
$(":radio :checked")
Selectores de jerarquía
Selector de descendientes: selecciona elementos que desciendan de otro
elemento (CSS 1)
jquery("div.entrada h2")
Selector de hijos: selecciona elementos que sean hijos directos de otro
elemento (CSS 2)
jquery("div.entrada > h2")
Pseudo clase hijo: selecciona el enésimo hijo de un elemento (CSS 3)
jquery("tr:nth-child(1)")
Pseudo clase primer hijo: selecciona el primero hijo de un elemento (CSS 2)
jquery("tr:first-child")
Pseudo clase último hijo: selecciona el último hijo de un elemento (CSS 3)
jquery("tr:last-child")
Pseudo clase hijo único: selecciona los elementos que sean hijos únicos de
otros elementos (CSS 3)
jquery("div:only-child")
jQUERY 9
Pseudo clase primero: selecciona el primer elemento de un grupo de
elementos. Equivale a eq(0) (jQuery)
jquery("td:first)")
Pseudo clase último: selecciona el último elemento de un grupo de
elementos (jQuery)
jquery("td:last)")
Pseudo clase mayor que: selecciona todos los elementos con un índice
mayor que el indicado en un grupo de elementos (jQuery)
jquery("td:gt(0)")
Pseudo clase menor que: selecciona todos los elementos con un índice
menor que el indicado en un grupo de elementos (jQuery)
jquery("td:lt(3)")
Pseudo clase par: selecciona los elementos pares de un grupo de elementos
(jQuery)
jquery("td:even")
Pseudo clase impar: selecciona los elementos impares de un grupo de
elementos (jQuery)
jquery("td:odd")
Selector de hermanos: selecciona todos los hermanos que se encuentren
precedidos de otro elemento (CSS 3)
jquery("div.entrada ~ p")
Selector de próximo adyacente: similar al anterior, pero sólo selecciona el
adyacente directo (CSS 2)
jquery("div.entrada + p")
Pseudo clase padre: selecciona los padres de otros elementos (jQuery)
jquery("h2:parent")
Pseudo clase vacío: selecciona los elementos que no tengan ningún hijo,
incluyendo texto plano (CSS 3)
jquery(":empty")
TABLAS DE SELECTORES
Cuando una función jQuery devuelve varios elementos, lo hace en formato de tabla,
donde cada elemento está identificado por una posición de la misma. Entonces
mediante: eq(indice) podemos obtener el elemento de la lista a la que se hace referencia
de la posición índice+1, teniendo en cuenta que las lista en jQuery empiezan contar
desde 0.
Por ejemplo, en la siguiente instrucción almacena una referencia al tercer enlace que
implementa la clase “enlaceAmigos”.
enlace = $('a.enlaceAmigos:eq(2)')
A continuación se muestra como acceder al párrafo número 3 (segunda posición)
miParrafo=$(“p:eq(2)”)
jQUERY 10
OPERADORES
Se pueden utilizar los operadores ^= , $= y *=.
^= para obtener los elementos de una página HTML que contengan un atributo
que empiece por un valor determinado.
$= para obtener los elementos de una página HTML que acabe por un valor
determinado.
*= para obtener los elementos de una página HTML que contenga un valor
determinado.
Ejemplo
$(document).ready(function() {
//hace referencia a los enlaces que empiezan por mailto: $('a[href^="mailto:"]').addClass('mailto');
//hace referencia a los enlaces que hagan referencia a un fichero pdf $('a[href$=".pdf"]').addClass('enlacePdf');
//hace referencia a un enlace a sitio.com $('a[href*= "sitio.com"]').addClass('sitio'); });
Estas clases CSS deben estar previamente definidas en la página, por ejemplo:
.mailto { color: blue; }
.enlacePdf { color:green; }
.sitio { color: yellow; }
De esta forma, los enlaces de tipo malito aparecerán en azul, los enlaces a ficheros pdf
verdes y los enlaces a “sitio.com” aparecerán en amarillo.
http://parasitovirtual.wordpress.com/2010/12/06/curso-jquery-capitulo-6-selectores-
basicos-de-filtro/ Curso jQuery. Capítulo 6: Selectores básicos de filtro. « El
rincón de un parásito virtual
http://www.emenia.es/curso-de-jquery-2-selectores-primera-parte/ Curso de jQuery:
Selectores
http://www.desarrolloweb.com/articulos/ejemplo-selectores-jquery.html Ejemplo para
practicar con selectores en jQUERY
EVENTOS
Los eventos son los elementos fundamentales de la interacción del usuario con una
Web. Es fundamental que el programador maneje con soltura la gestión de eventos ya
que ello es lo que va a permitir dar funcionalidad a la Web.
Un evento se provoca cuando el usuario o el sistema realiza alguna acción sobre la
página Web, esto puede ser: cargar la página, pulsar con el teclado sobre un elemento,
pulsar una tecla, etc.
jQUERY 11
Cuando se provoca un evento, este se puede manejar con un controlador de evento que
ejecute unas determinadas acciones. Los controladores de eventos serán funciones
JavaScript enlazadas al evento correspondiente.
Para determinar que un evento debe ser capturado se utiliza la siguiente sintaxis
jQuery.
$(elemento).evento(function(event){…})
//event es una variable que representa al evento que se ha producido.
Práctica
En el siguiente formulario HTML, al cargar la página se define un evento clic para el
botón con id “elBoton” y el controlador de evento correspondiente que muestra una
ventana con el nombre introducido en el campo con id=”elCampo” o un mensaje de
aviso.
<!DOCTYPE html>
<html> <head>
<meta charset=utf-8"> <title>Ejemplo 2</title> <script src="js/jquery-1.5.1.min.js" ></script>
<script src="js/fichero.js" ></script> </head>
<body> <h1>Ejemplo de Formulario Web</h1> <form >
Nombre <input name="nombre" id="elNombre"
placeholder="Escribe tu nombre" autofocus></p> Fecha<input name="fecha" type="date"> <input type="button" id="elBoton" value="Para pulsar">
</form> </body>
</html>
Fichero fichero.js (JavaScript)
$(document).ready(function(){
$("#elBoton").click(function(event){ //cuando se produce el evento click
var selectorEscrito = $("#elNombre").attr("value"); if (selectorEscrito==""){ alert("Escribe tu nombre")
}else{ alert("tu nombre es " + selectorEscrito);
} }); });
TIPOS DE EVENTOS
jQuery dispone de tantas funciones como eventos estándar de JavaScript. El nombre de
cada función es el mismo que el del evento, sin el habitual prefijo
“on”: focus(), blur(), keyup(),mouseover(), mouseup(), resize(), submit(), etc.
jQUERY 12
EVENTOS RELACIONADOS CON EL RATÓN
click() Detecta el evento clic cuando se produce en un elemento de la
página.
dblclick() Detecta un evento cuando se produce un doble clic sobre un
elemento.
hover() Esta función en realidad sirve para manejar dos eventos, cuando el
ratón entra y sale de encima de un elemento. Por tanto se debe enviar dos
funcioness en vez de una.
mousedown() Detecta un evento cuando el usuario hace clic en el momento
que presiona el botón e independientemente de si lo suelta o no. Sirve tanto
para el botón derecho como el izquierdo del ratón.
mouseup() Detecta un evento cuando el usuario ha hecho clic y luego suelta
un botón del ratón. El evento mouseup se produce sólo en el momento de
soltar el botón.
mouseenter() Detecta el evento se produce al situar el ratón encima de un
elemento de la página.
mouseleave() Detecta un evento cuando el ratón sale de encima de un
elemento de la página.
mousemove() Detecta el evento que se produce al mover el ratón sobre un
elemento de la página.
mouseout() Detecta el evento que se desata cuando el usuario sale con el
ratón de la superficie de un elemento.
mouseover() Detecta el evento que se produce cuando el ratón está sobre un
elemento, pero tiene como particularidad que puede producirse varias veces
mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido.
EVENTOS RELACIONADOS CON EL TECLADO
keydown() Detecta el evento que se produce en el momento que se presiona
una tecla del teclado, independientemente de si se libera la presión o se
mantiene. Se produce una única vez en el momento exacto de la presión.
keypress() Detecta el evento que ocurre cuando se digita un carácter, o se
presiona otro tipo de tecla. Es como el evento keypress de Javascript, por lo
que se entiende que keypress() se ejecuta una vez, como respuesta a una
pulsación e inmediata liberación de la tecla, o varias veces si se pulsa una
tecla y se mantiene pulsada.
keyup()Detecta el evento que se produce en el momento de liberar una
tecla, es decir, al dejar de presionar una tecla que teníamos pulsada.
Nota: a través del objeto evento, que reciben las funciones que indiquemos como
parámetro de estos métodos, podemos saber qué tecla se está pulsando, aparte de otras
muchas informaciones.
EVENTOS COMBINADOS TECLADO-RATÓN
blur() El evento blur se lanza sobre un elemento que acaba de perder el
foco. Normalmente este evento es aplicable a inputs de formularios.
jQUERY 13
focusin() Evento que se produce cuando el elemento gana el foco de la
aplicación, que puede producirse al hacer clic sobre un elemento o al
presionar el tabulador y situar el foco en ese elemento.
focusout() Ocurre cuando el elemento pierde el foco de la aplicación, que
puede ocurrir cuando el foco está en ese elemento y pulsamos el tabulador,
o nos movemos a otro elemento con el ratón.
focus() Sirve para definir acciones cuando se produce el evento focus de
Javascript, cuando el elemento gana el foco de la aplicación
OTROS EVENTOS
resize() Este evento es lanza cuando se cambia el tamaño de la ventana.
Este evento sólo se envía al objeto window.
scroll() Este evento se envía a los elementos que cambian su scroll ante una
acción del usuario. Se aplica a los objetos window, frames y elementos con
la propiedad overflow CSS puesta en estado “scroll”.
select() El evento select se lanza cuando el usuario selecciona un texto del
elemento sobre el que se gestiona el evento. Este evento sólo se aplica a los
textarea y a los input de tipo texto.
submit() Este evento se lanza cuando un usuario está tratando de enviar un
formulario. Este evento sólo es válido para formularios. Dependiendo del
navegador es posible enviar el formulario sin necesidad de pinchar en un
botón, simplemente pulsando la tecla ENTER. Cuando esto sucede el
evento no se lanza, por lo que tenemos que prestar especial atención a este
comportamiento para gestionarlo en su correspondiente evento
“keypressed”.
toggle() El evento toggle se utiliza para generar comportamientos de
cambio de estado generados al pinchar sobre un elemento. Por ejemplo,
puede interesarnos que al pinchar sobre un elemento se visualice y que al
volver a pinchar se oculte. Toggle nos permite hacer esto asociando dos o
más funciones al mismo evento que se van ejecutando de forma secuencial.
La primera vez que se pincha sobre el elemento (y todas las veces impares), se
ejecuta la primera función y la segunda vez que se pincha el elemento (y todas
las veces pares) se ejecuta la segunda función:
$(document).ready(function(){
$("p").toggle(function(){ alert("Me acabas de activar"); },function(){
alert("Me acabas de desactivar"); });
});
unload() El evento unload se lanza cuando un usuario navega fuera de la
página web o se dirige hacia otra parte de la web. Se ejecuta siempre,
incluso si el usuario cierra el navegador
jQUERY 14
DEFINIR/ELIMINAR EVENTOS: bind/unbind
BIND
El método bind() permite definir cualquier tipo de eventos y los enlaza con el
controlador de evento que el programador desee.
Su sintaxis es la siguiente:
bind (tipo_evento, controlador_evento)
tipo_evento: es el evento que se quiere enlazar con el objeto controlador_evento: se corresponde con la función que hará de controlador para el evento definido.
A la hora de aplicar bind se deben seguir los siguientes pasos en el fichero jQUERY:
1. Definir los controladores de eventos como funciones y asignar cada controlador
a una variable que posteriormente va a ser referenciada.
2. Aplicar el método bind y utilizar la variable creada en 1.
Al final el código jQUERY quedaría como sigue:
//1. Definir el controlador de evento var functionControlador=function(event){ if ($(this).css("color")=="#0000ff")
$(this).css("color", "#ffff00"); else $(this).css("color", "blue");
};
$(document).ready(function(){
//2. Utilizar bind para asignar eventos/controladores al element p $("p").bind("click mouseenter mouseleave", functionControlador); });
Ejemplo 1. Asignación de un evento a los elementos de una etiqueta
Página Web que muestra una ventana de alerta cuando se pulsa sobre alguno de los
párrafos de la misma (<p>)
Fichero HTML
<!DOCTYPE HTML>
<html> <head>
<meta charset=utf-8"> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero3.js" ></script>
<title>Ejercicio3_Eventos1</title> </head>
<body> <h1>PRIMER TÍTULO</h1>
<p>Este es el primer párrafo</p> <h2>SEGUNDO TÍTULO</h2>
<p>Este es el segundo párrafo </p>
jQUERY 15
</body>
</html>
Fichero jQUERY: enlaza los párrafos <p> con el evento click y un controlador de
evento que muestra un mensaje de alerta cuando se produce el evento.
$(document).ready(function(){
$("p").bind("click", function(){ alert("Has hecho clic"); });
});
Ejemplo 2. Asignación de una función a varios eventos a la vez
Fichero jQUERY: enlaza los párrafos <p> con varios eventos (click, mouseenter,
mouseleave) y un controlador único para todos ellos que hace que el contenido de los
párrafos cambie de color al producirse el evento correspondiente.
var functionControlador=function(event){ if ($(this).css("color")=="#0000ff")
$(this).css("color", "#ffff00"); else $(this).css("color", "blue");
};
$(document).ready(function(){ $("p").bind("click mouseenter mouseleave", functionControlador); });
UNBING
Se puede utilizar unbind para eliminar un evento previamente asignado a uno o varios
elementos.
Para eliminar todos los eventos asociados a un elemento
$(“elemento”).unbind();
Para eliminar un evento asociado a un elemento
$(“elemento”).unbind(“evento”);
OTRAS UTILIDADES
jQuery incluye muchas otras funciones para facilitar el desarrollo de las aplicaciones
web, entre otras:
Oculta todos los elementos de un formulario
$(miFormulario.elements).hide();
Devuelve "true" si el navegador es alguna versión de Internet Explorer
$.browser.msie
Devuelve "true" si el navegador es alguna versión de Safari
$.browser.safari
jQUERY 16
Añade la clase CSS a todos los elementos o la quita si ya la tenían
establecida
$("p").toggleClass("seleccionado");
MÉTODOS
text()
Para saber el contenido de un elemento el objeto jQuery cuenta con un método llamado
text(), que se puede utilizar para
Modificar el contenido de un elemento
$(“#miElemento”).text (“párrafo Nuevo”)
Obtener el contenido de un elemento
var contenido=$(“#miElemento”).text()
Ejemplo
La siguiente función jQUERY cambia el texto del párrafo que está en primera posición
cuando se pulsa dobleclick en cualquier párrafo de la Web, además muestra el contenido
anterior del párrafo en una ventana.
$(document).ready(function(){ $("p").dblclick(function(){ var contenido=$("p:eq(1)").text()
alert(contenido); $("p:eq(1)").text("nuevo texto");
}) });
attr()/removeAttr
El método attr() permite agregar propiedades a un elemento HTML y recuperar el valor
de su propiedad.
Recuperar el valor de la propiedad
$(elemento).attr(nombre_propiedad)
Dar valor a una propiedad
$(elemento).attr(nombre de propiedad,valor)
Eliminar una propiedad
$(elemento).removeAttr(nombre de propiedad)
Ejemplo 1
Esta página Web cambia el atributo del título del enlace al hacer clic sobre el primer
párrafo.
Fichero html
<!DOCTYPE HTML> <html>
<head>
jQUERY 17
<meta charset="utf-8">
<script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_color.js" ></script>
<title>Ejercicio3_Eventos1</title> </head>
<body> <h1>PRIMER TÍTULO</h1>
<p>Cambia el título</p> <h2>SEGUNDO TÍTULO</h2> <a href="http://www.google.com" title="Acceso a google"
id="miEnlace">Google</a></p> </body>
</html>
Fichero Jquery
$(document).ready(function(){ $("p").click(function(){
$("#miEnlace").attr("title","Pepe"); })
});
Ejemplo 2
La página Web contiene botones que modifican los atributos de borde de la tabla
Fichero html
<!DOCTYPE HTML> <html> <head>
<meta charset="utf-8"> <link rel="stylesheet" href="css/estilos3.css">
<script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_attr.js" ></script>
<title>Ejercicio3_Eventos1</title> </head>
<body> <input type="button" id="boton1" value="Añadir propiedad
border"><br> <input type="button" id="boton2" value="Recuperar valor de la propiedad border"><br>
<input type="button" id="boton3" value="Eliminar la propiedad border">
<table id="tabla1"> <tr> <td>1111111111</td><td>1111111111</td><td>1111111111</td
><td>1111111111</td> </tr>
<tr> <td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td>
</tr>
jQUERY 18
<tr>
<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td>
</tr> </table> </body>
</html>
Fichero Jquery
$(document).ready(inicializarEventos);
function inicializarEventos(){ $("#boton1").click(agregarPropiedadBorder);
$("#boton2").click(recuperarPropiedadBorder); $("#boton3").click(eliminarPropiedadBorder);}
function agregarPropiedadBorder(){ $("#tabla1").attr("border","1");}
function recuperarPropiedadBorder(){
var x=$("#tabla1"); if (x.attr("border")!=undefined)
alert(x.attr("border")); else alert("No está definida la propiedad border en la tabla");}
function eliminarPropiedadBorder(){
$("#tabla1").removeAttr("border");}
addClass/removeClass
Los métodos addClass y removeClass nos permiten asociar y desasociar una clase a un
elemento o conjunto de elementos HTML.
Añadir una clase CSS a un elemento.
$(elemento).addClass(“nombre_clase”)
Eliminar una clase CSS de un elemento
$(elemento).removeClass(“nombre_clase”)
Ejemplo
El siguiente ejemplo muestra dos botones que permiten enlazar y eliminar una clase
CSS de un elemento respectivamente.
Fichero HTML
<!DOCTYPE HTML> <html>
<head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos1.css">
<script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_addClass.js" ></script>
jQUERY 19
<title>Ejercicio4_addClass</title>
</head> <body>
<h1>Ejemplo de cambio de estilos</h1> <input type="button" id="elBotonA" value="Añdir clase"> <input type="button" id="elBotonE" value="Eliminar clase">
</body> </html>
Fichero JavaScript
$(document).ready(inicializarEventos); function inicializarEventos(){
$("#elBotonE").click(desasociarClase); $("#elBotonA").click(asociarClase);}
function asociarClase(){ var x=$("h1");
x.addClass("azul");}
function desasociarClase(){ var x=$("h1");
x.removeClass("azul");}
Fichero de estilos
.azul{ color: #0000cc;
html()
Es posible agregar bloques de código HTML a partir de un elemento de la página. esta
propiedad es básicamente = innerHTML del DOM.
Para agregar un bloque HMTL
$(elemento).html(bloque_HTML)
Para obtener el bloque HTML contenido a partir del elemento que hace
referencia el objeto jQuery.
$(elemento).html()
Ejemplo
Hay un botón para modificar el contenido del formulario y otro para ver su contenido
Fichero HTML
<!DOCTYPE HTML> <html> <head>
<meta charset="utf-8"> <link rel="stylesheet" href="css/estilos1.css">
<script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_html.js" ></script> <title>Ejercicio4_html</title>
jQUERY 20
</head>
<body> <input type="button" id="boton1" value="Mostrar formulario">
<input type="button" id="boton2" value="Mostrar elementos html del formulario"><br> <div id="formulario">
</div> </body>
</html>
Fichero JavaScript
$(document).ready(inicializarEventos);
function inicializarEventos(){ $("#boton1").click(presionBoton1);
$("#boton2").click(presionBoton2);} function presionBoton1(){
var x; x=$("#formulario");
x.html("<form>Ingrese nombre:<input type='text' id='nombre'> <br>Introduzca clave:<input type='text' id='clave'> <br> <input
type='submit' value='confirmar'></form>"); } function presionBoton2(){
$("#formulario"). alert (x.html()); }
css()
jQuery también permite añadir nuevas propiedades CSS a los elementos de una forma
sencilla utilizando el método siguiente:
$(elemento).css (“propiedadCSS”, “valor”)
Ejemplos
//Añade un ancho a todas las etiquetas p $(“p”).css(“width”,”400px”)
//Asigna el color azul a los textos de id indicado $(“#miElemento”).css(“color”,”blue”)
//Añade un borde a todas las listas $(“ul”).css(“border”, “solid 1px “)
//Obtiene el valor de la propiedad "color" de CSS del los párrafos de la página $("p").css("color");
//Establece varias propiedades CSS de un elemento $("# miElemento ").css({ color: "red", background: "blue", font-weight: "bold" });
append / prepend
jQuery nos permite añadir contenido HTML al final de otro ya existente
jQUERY 21
$(elemento).append(contenidoHTML)
También podemos añadir contenido al principio
$(elemento).prepend(contenidoHTML)
Ejemplos
//Añadir un texto y unas etiquetas HTML al elemento con id=”miElemento”. $(“#miElemento”).append(“<p>Nuevo contenido de miElemento</p>”)
//Para añadir un elemento al final de la lista $("ul").append("<li>otro item al final</li>");
//Para añadir un elemento al principio de la lista $("ul").prepend("<li>otro item al principio</li>");
ITERADOR each
jQuery dispone de un método que nos permite asociar una función que se ejecutará por
cada elemento que contenga la lista de elemento.
Dentro de esta función podemos manipular el elemento actual.
La sintaxis del each es:
$(elementos).each(nombre de función)
Ejemplo
Resaltar con fondo amarillo todos los párrafos que tienen menos de 50 caracteres.
Fichero HTML
<!DOCTYPE HTML> <html>
<head> <meta charset="utf-8">
<link rel="stylesheet" href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero5_each.js" ></script>
<title>Uso de each</title> </head>
<body> <div id="parrafos">
<p>La memoria es como el mal amigo; cuando más falta te hace, te falla.</p>
<p>Más rápido se coge al mentiroso que al cojo.</p> <p>Cuando los que mandan pierden la vergüenza, los que obedecen pierden el respeto.</p>
<p>En todas las tierras el sol sale al amanecer.</p> </div>
</body> </html>
Fichero JavaScript
$(document).ready(inicializarEventos);
jQUERY 22
function inicializarEventos(){ $("#parrafos p").each(resaltarParrafos);}
function resaltarParrafos(){ var x=$(this);
if (x.text().length<50) x.css("background-color","#ff0");}
EFECTOS VISUALES
Todas las aplicaciones web modernas incorporan pequeños efectos visuales
y animaciones que, si se utilizan de forma adecuada, mejoran la interacción con la
aplicación y su usabilidad. jQuery incluye de serie los efectos visuales más utilizados
por los diseñadores, pudiendo controlar mediante sus opciones la duración de cada
efecto.
hide/show | slow/fast
jQuery permite manejar los efectos visuales de un página Web utilizando, entre otros,
los métodos hide (ocultar) y show (mostrar). Estos métodos ya los hemos visto, pero en
este apartado vamos a ver cómo lograr ocultar y mostrar información a distintas
velocidades.
Muestra un elemento de forma normal (normal), rápìda (fast) o lenta (slow), también se
puede indicar los milisegundos de la acción. También es posible indicar una función
para que se ejecute al finalizar el efecto visual.
$(elemento).show([“fast”/”slow”/“normal”/milisegundos],[function])
Para que se muestre de forma instantánea se omite cualquier parámetro
Los parámetros funcionan de forma equivalente con hide (ocultar)
$(elemento).hide([“fast”/”slow”/“normal”/milisegundos],,[function])
Ejemplo
Este efecto lo vamos a ver con un ejemplo que muestra un recuadro con texto y
mediante el uso de dos botones podremos hacer que se oculte lentamente le cuadro o
que se muestra rápidamente.
Fichero HTML
<!DOCTYPE HTML> <html>
<head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos4.css"/>
<script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_show_hide.js" ></script>
<title>Mostar/Ocultar rápidamente/suavemente</title> </head>
<body>
jQUERY 23
<input type="button" id="boton1" value="Ocultar recuadro">
<input type="button" id="boton2" value="Mostrar recuadro"> <div id="descripcion" class="recuadro">
<p>HTML5 es una nueva e innovadora técnología para la craeción de páginas Web </p>
</div> </body>
</html>
Fichero JavaScript
$(document).ready(inicializarEventos);
function inicializarEventos(){ $("#boton1").click(ocultarRecuadro);
$("#boton2").click(mostrarRecuadro);} function ocultarRecuadro(){
$("#descripcion").hide("slow");}
function mostrarRecuadro(){ $("#descripcion").show("fast");}
Fichero CSS
.recuadro { background-color:#ffffcc; font-family:verdana;
font-size:14px;
border-top-width:1px; border-right-width:3px; border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted; border-right-style:solid; border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000;
border-left-color:#ffaa00; }
fadeIn / fadeOut / fadeTo
Estos métodos provocan también que un elemento se muestre (fadein) o se oculte
(fadeout) pero actúa sobre la transparencia de los objetos.
La sintaxis y los atributos son equivalentes a los métodos show/hide
$(elemento).fadeIn([“fast”/”slow”/“normal”/milisegundos],[function])
jQUERY 24
$(elemento).fadeOut([“fast”/”slow”/“normal”/milisegundos],[function])
Ejemplo
Con el mismo código HTML del ejemplo anterior pero utilizando el siguiente fichero
JavaScript conseguimos el efecto de ocultar y mostrar el cuadro actuando sobre la
opacidad del mismo.
$(document).ready(inicializarEventos);
function inicializarEventos(){
$("#boton1").click(ocultarRecuadro); $("#boton2").click(mostrarRecuadro);}
function ocultarRecuadro(){ $("#descripcion").fadeOut("slow");}
function mostrarRecuadro(){ $("#descripcion").fadeIn("fast");}
El método fadeTo puede modificar la opacidad de un elemento hasta un valor
determinado que se pasa por parámetro.
Podemos inicializar este método de las siguientes formas:
fadeTo([velocidad],[valor de opacidad])
Indicamos la velocidad de transición del estado actual al nuevo estado
(slow/normal/fast) o un valor indicado en milisegúndos.
El valor de la opacidad es un número real entre 0 (transparente) y 1(opaco)
También podemos llamar al método fadeTo con tres parámetros:
$(elemento).fadeTo([velocidad],[valor de opacidad],[función])
Esta segunda estructura de la función permite ejecutar una función cuando finaliza la
transición.
Hay que tener en cuenta que fadeTo por más que indiquemos el valor 0 en opacidad el
espacio que ocupa el elemento en la página seguirá ocupado por un recuadro vacío.
Ejemplo
Realizaremos un ejemplo que permitirá reducir y aumentar la opacidad de un cuadro por
medio de clic a dos botones-
Fichero HTML
<!DOCTYPE HTML> <html>
<head> <meta charset="utf-8">
<link rel="stylesheet" href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_fadeTo.js" ></script>
<title>Mostar/Ocultar utilizando la opacidad</title> </head>
jQUERY 25
<body> <input type="button" id="boton1" value="Reducir opacidad">
<input type="button" id="boton2" value="Aumentar opacidado"> <div id="descripcion" class="recuadro"> <p>HTML5 es una nueva e innovadora técnología para la craeción
de páginas Web </p>
</div> </body> </html>
Fichero JavaScript
$(document).ready(inicializarEventos);
function inicializarEventos(){ $("#boton1").click(reducirOpacidad); $("#boton2").click(aumentarOpacidad);}
function reducirOpacidad(){
$("#descripcion").fadeTo("fast",0.5);}
function aumentarOpacidad(){ $("#descripcion").fadeTo("slow",1);}
Comprobar si un element es visible
A veces puede ser necesario saber si un elemento está visible o no y para ello podemos
utilizar el método is pasándole como parámetro la función hidden (oculto) o visible
(visible)
//devuelve true si está oculto $(elemento).is(“:hidden”)
//devuelve true si está visible $(elemento).is(“:visible”)
toggle()
Ya hemos visto el método toggle para alternar la ejecución de dos funciones, pero en
este apartado lo veremos para intercambiar la visibilidad de un elemento.
El método toggle permite ocultar un elemento si éste está visible y mostrarlo si está
oculto.
$(elemento).toggle([“fast”/”slow”/“normal”/milisegundos],[function])
Ejemplo
Veremos el funcionamiento de toogle en una página Web que presenta un botón que
muestra/oculta un cuadro, a la vez también cambia el texto del botón según el estado del
cuadro.
Fichero HTML
<!DOCTYPE HTML>
jQUERY 26
<html>
<head> <meta charset="utf-8">
<link rel="stylesheet" href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_toggle.js" ></script>
<title>Mostar/Ocultar utilizando la opacidad</title> </head>
<body> <input type="button" id="boton1" value="Ocultar">
<div id="descripcion" class="recuadro"> <p>HTML5 es una nueva e innovadora técnología para la craeción
de páginas Web </p> </div>
</body> </html>
Fichero JavaScript
$(document).ready(inicializarEventos);
function inicializarEventos(){ $("#boton1").click(modificarVisibilidad);}
function modificarVisibilidad(){ $("#descripcion").toggle("slow",cambiarBoton);}
function cambiarBoton(){ if ($("#descripcion").is(":hidden") == true)
$("#boton1").attr("value","Mostrar"); else
$("#boton1").attr("value","Ocultar");}
animate
El método animate permite realizar animaciones personalizadas. Su sintaxis es la
siguiente:
$(elemento).animate({propiedades},[duracin],[f_animación],[callback])
Donde:
propiedades, es el único parámetro obligatorio y se utiliza para indicar que
atributos CSS se quieren actualizar con nuevos valores. JQuery sólo permite
el cambio de propiedades CSS que tengan valores numéricos. Por ejemplo
podríamos cambiar el tamaño de la letra pero no su fuente. La medida por
defecto es la de píxeles. Los nuevos valores se deben indicar de forma
absoluta o de forma relativa utilizando la notación “+=nº” p “+=nº”
duración, indica la duración de la animación en milisegundos o un valor
identificativo de la velocidad (normal, fast o slow).
jQUERY 27
función de animación, es una función que contiene las instrucciones que
indican cómo se realizará la animación, tiene dos posibles valores swing
(por defecto) y linear.
callback, este parámetro permite ejecutar una función cuando finaliza la
animación.
Ejemplo
Veremos el funcionamiento de animate en una página Web que presenta un botón que
realiza la animación de un cuadro de texto.
Fichero HTML
<!DOCTYPE HTML>
<html> <head> <meta charset="utf-8">
<link rel="stylesheet" href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" ></script>
<script src="js/fichero4_animate.js" ></script> <title>Uso de animate</title>
</head> <body>
<input type="button" id="boton1" value="Animar"> <div id="descripcion" class="recuadro" >
<p>HTML5 es una nueva e innovadora técnología para la creación de páginas Web </p>
</div> </body>
</html>
Fichero JavaScript
$(document).ready(inicializarEventos);
function inicializarEventos(){ $("#boton1").click(hacerAnimacion);}
function hacerAnimacion(){ $("#descripcion").animate({
'border-bottom-width': "20",'font-size': '25pt'});}
http://www.w3schools.com/jquery/jquery_effects.asp
PRÁCTICA: MENÚ DESPLEGABLE
Fichero HTML
<!DOCTYPE HTML> <html>
<head> <meta charset="utf-8">
jQUERY 28
<link rel="stylesheet" href="estilos_menuDesplegable.css"/>
<script src="../js/jquery-1.5.1.min.js" ></script> <script src="jquery_menuDesplegable.js" ></script>
<title>Uso de animate</title> </head>
<body> <div id="menu">
<ul> <li><a href="http://www.google.com.ar">Google</a></li> <li><a class="imagen" href="#">Periódicos</a>
<ul> <li><a href="http://www.lavozdegalicia.es">La Voz de
Galicia</A></li> <li><a href="http://www.farodevigo.es">El Faro de Vigo</A></li>
</ul> </li>
<li><a class="imagen" href="#">Televisiones</a> <ul>
<li><a href="http://www.rtve.es">Televisión española</a></li> <li><a href="http://www.cuatro.com">Cuatro</a></li>
</ul> </li>
<li><a href="http://www.msn.com">MSN</a></li> </ul> </div>
</body> </html>
Fichero CSS
#menu { font-family: Arial; margin:0px;
padding:0px;}
#menu ul { margin:0px; padding:0px;
list-style-type:none;}
#menu a { display: block; padding: 3px;
width: 160px; background-color: #f7f8e8;
border-bottom: 1px solid #eee; text-align:center;}
jQUERY 29
.imagen {
background-image:url(imagenes/triangulo.gif); background-position:top left;
background-repeat:no-repeat;} #menu a:link, #menu a:visited {
color: #f00; text-decoration: none;}
#menu a:hover { background-color: #369;
color: #fff;}
#menu li ul li a{ display: block;
padding: 3px; width: 160px;
background-color: #ffa; border-bottom: 1px solid #eee;
text-align:center;} ul li ul a:link, ul li ul a:visited {
color: #000; text-decoration: none;}
ul li ul a:hover { background-color: #369;
color: #fff;}
Fichero JavaScript
$(document).ready(function() {
$("#menu").children().children("li").each(function () { if ($(this).find("ul").size()!=0) $(this).find("ul").hide();
});
$("a").click(function(e) { if ($(this).parent().find("ul").size()!=0) {
if ($(this).parent().find("ul").css("display")=="none") $(this).parent().find("ul").show();
else $(this).parent().find("ul").hide(); }
}) })
jQUERY 30
ANEXO 31
ANEXO
OPERACIONES HABITUALES
1. Agregar una clase CSS a un elemento específico.
$('#elemento').addClass('clase');
2. Quitar una clase CSS de un elemento específico.
$('#elemento'). removeClass('clase');
3. Comprobar si un elemento tiene una clase CSS asignada.
$(id).hasClass(clase)
4. Reemplazar una hoja de estilo (CSS) con jQuery.
$('link[media='screen']').attr('href', 'nueva_hoja.css');
5. Añadir HTML a un elemento específico.
$('#id-del-elementp').append('codigo HTML aquí');
6. Verificar si existe o no un elemento.
if ($('img').length) {
log('Se encontraron elementos en la página usando "img"');
} else {
log('No se encontraron elementos img');
}
7. Conocer el elemento padre de otro elemento.
var id = $("button").closest("div").attr("id");
8. Obtener los elementos primos de un elemento.
$("div").siblings()
9. Remover un elemento de una lista desplegable.
$("#selectList option[value='2']").remove();
10. Obtener el texto de un elemento seleccionado.
$('#selectList :selected').text();
FUENTES 32
FUENTES
http://api.jquery.com/toggle/ jQuery API
http://www.maestrosdelweb.com/editorial/javascript-facil-y-rapido-con-jquery/
JavaScript fácil y rápido con jQuery
http://tecnokun.org/manipulando-el-dom-con-jquery-10-ejemplos-practicos/
Manipulando DOM con jQuery: 10+ejemplos prácticos
http://www.emenia.es/curso-de-jquery-2-selectores-primera-parte/ Curso de jQuery:
Selectores
http://parasitovirtual.wordpress.com/category/cursos-y-articulos/desarrollo-de-
webs/javascript/jquery/ JQuery: El rincón de un parásito virtual
http://www.javascriptya.com.ar/jquery/index.php?inicio=18 jQuery ya!