Está en la página 1de 30

JQuery

El framework de JavaScript

INTRUDUCCIN
Framework de JavaScript jQuery trabaja con
documentos HTML rbol DOM eventos

Permite manipular todos los elementos de un pgina Web

para

enlazar a eventos y controladores de eventos realizar animaciones interaccionar con las clases CSS aadir interacciones con Ajax.

DOM (Document Object Model )


Interfaz de programacin de aplicaciones (API) para

documentos HTML / XML Define una estructura lgica de los documentos y determina el modo de acceso a sus elementos

UTILIZAR jQuery
Descargar del sitio oficial: http://jquery.com/ En cada fichero HTML donde utilicemos jQuery en el bloque

head se debe introducir


Si el fichero que contiene las instrucciones JavaScript es un

fichero externo, se debe incluir tambin la siguiente orden

PRICIPIOS DE USO
$(elemento), donde elemento puede ser
#id_elemento de HTML .clase de CSS otras referencias que veremos ms adelante

Una vez obtenido el elemento se puede utilizar cualquiera de

los mtodos que aporta el framework.

CARGAR LA WEB
window.onload = function() {} $(document).ready(function(){}) Se ejecuta cuando se han cargado todos los Se ejecuta en cuanto se ha cargado el cdigo elementos de la pgina, incluso las imgenes. HTML y se ha construido su rbol DOM.
<!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>

Ms rpido

$(document).ready(function(){ alert("Bienvenid@ a mi pgina"); });

Muestra un mensaje por pantalla

ACCESO A LOS ELEMENTOS HTML. SELECTORES objeto HTML/CSS

ACCESO A LOS ELEMENTOS HTML. SELECTORES Posicionales

ACCESO A LOS ELEMENTOS HTML. SELECTORES de Formulario

OPERADORES
Operador Significado para obtener los elementos de una pgina HTML que contengan un atributo que empiece por un valor determinado para obtener los elementos de una pgina HTML que acabe por un valor determinado para obtener los elementos de una pgina HTML que contenga un valor determinado

^= $= *=

$(document).ready(function() { //hace referencia a los enlaces que empiezan por mailto: $('a[href^="mailto:"]').addClass('mailto'); //los enlaces que hagan referencia a un fichero pdf $('a[href$=".pdf"]').addClass('enlacePdf'); //enlace a sitio.com $('a[href*= "sitio.com"]').addClass('sitio'); });

Referencias utilizando operadores

EVENTOS
Acciones que suceden sobre los objetos jQuery detecta eventos sobre los objetos HTML que puede

seleccionar. Los eventos se manejan con los controladores de eventos


son funciones responden al lanzamiento de un objeto por parte del usuario o

sistema
Se debe indicar que evento debe ser capturado de cada objeto
$(elemento).evento(function(event){})
evento que se detecta del elemento controlador de evento event es una vble que representa el evento que se ha producido

PRCTICA

<!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 type="button" id="elBoton" value="Para pulsar"> </form> </body> </html>

$(document).ready(function(){ $("#elBoton").click (function(event){ 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 estndar de

JavaScript focus(), blur(), keyup(),mouseover(), mouseup(), resize(), su bmit(). Caso particular: evento toogle
$(document).ready(function(){ $("p").toggle(function(){ alert("Me acabas de activar"); },function(){ alert("Me acabas de desactivar"); }); });
La primera vez que se pincha sobre el elemento (y todas las veces impares), se ejecuta la primera funcin y la segunda vez que se pincha el elemento (y todas las veces pares) se ejecuta la segunda funcin

DEFINIR EVENTOS
bind: permite definir cualquier tipo de evento y los enlaza al

controlador de evento que se desee.


bind (tipo_evento, controlador_evento)

//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); });

DEFINIR EVENTOS.Ejemplo 1
<!DOCTYPE html> $("p").bind("click", function(){ <html> alert("Has hecho clic");}); <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 type="button" id="elBoton" value="Para pulsar"> </form> </body> </html>

$(document).ready(function(){

ELIMINAR EVENTOS
unbind: permite 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)

MTODOS: text()
Permite el acceso al contenido de tipo texto de un elemento.
Modificar el contenido de un elemento
$(#miElemento).text (prrafo Nuevo) Obtener el contenido de un elemento

var contenido=$(#miElemento).text() $(document).ready(function(){ $("p").dblclick(function(){ alert($("p:eq(1)").text()); $("p:eq(1)").text("nuevo texto");}) });


Cambia el texto del primer prrafo cuando se pulsa dobleclick en cualquier prrafo de la Web. Tambin muestra el contenido anterior

MTODOS: attr()/removeAttr
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_propiedad,valor)

Eliminar una propiedad


$(elemento).remove Attr(nombre_propiedad)

Hacer ejemplo de los apuntes!!!!

MTODOS: addClass/removeClass
Los mtodos addClass y removeClass nos permiten asociar

y desasociar una clase a un elemento o conjunto de elementos HTML.


Aadir una clase CSS a un elemento
$(elemento).addClass(nombre_clase)

Eliminar una clase CSS de un elemento


$(elemento).remove Classr(nombre_clase)

Hacer ejemplo de los apuntes!!!!

MTODOS: html()
Es posible agregar bloques de cdigo HTML a partir de un

elemento de la pgina. esta propiedad es bsicamente = innerHTML del DOM.


Para agregar un bloque HMTL
$(elemento).html(bloque_HTML)

Para obtener el bloque HTML


$(elemento).html()

Hacer ejemplo de los apuntes!!!!

MTODOS: load()
Permite cargar un documento Web en una capa

Hacer ejemplo de los apuntes!!!!

MTODOS: css()
jQuery tambin permite aadir nuevas propiedades CSS a los

elementos de una forma sencilla utilizando el mtodo siguiente:


$(elemento).css(propiedad_CSS,valor)

Ejemplo:
//Aade 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) //Obtiene el valor de la propiedad "color" de CSS del los prrafos de la pgina $("p").css("color"); //Establece varias propiedades CSS de un elemento $("# miElemento ").css({ color: "red", background: "blue", font-weight: "bold" });

MTODOS: append/prepend
jQuery nos permite aadir contenido HTML al final de otro

ya existente.

$(elemento).append(contenido_HTML)

Tambin podemos aadir contenido HTML al final de otro ya

existente
Ejemplo

$(elemento).prepnd(contenido_HTML)

//Aadir un texto y unas etiquetas HTML al elemento con id=miElemento. $(#miElemento).append(<p>Nuevo contenido de miElemento</p>) //Para aadir un elemento al final de la lista $("ul").append("<li>otro item al final</li>"); //Para aadir un elemento al principio de la lista $("ul").prepend("<li>otro item al principio</li>");

ITERADOR each
jQuery dispone de un mtodo que nos permite asociar una

funcin que se ejecutar por cada elemento que contenga la lista de elemento. $(elementos]).each(nombre_funcin)
Dentro de la funcin nombre_funcin se puede manipular el

elemento actual.

Hacer ejemplo de los apuntes!!!!

EFECTOS VISUALES: hide/show


Podemos mostrar cualquier elemento referenciado de la Web
$(elemento).show([fast/slow/normal/milisegundos],[function])

Tambin es posible ocultar los elementos referenciados


$(elemento).hide([fast/slow/normal/milisegundos],[function])

Hacer ejemplo de los apuntes!!!!

EFECTOS VISUALES: fadeIn/fadeOut/fadeTo


Podemos cambiar la transparencia de los objetos
Aumentando la transparencia
$(elemento).fadeIn[fast/slow/normal/milisegundos],[function])

Disminuyendo la transparencia
$(elemento).fadeOut([fast/slow/normal/milisegundos],[function]) $(elemento).fadeOut([fast/slow/normal/milisegundos],[function])

Determinan un nivel de transparencia


$(elemento).fadeOut([fast/slow/normal/milisegundos],[valor],[function)

Hacer ejemplo de los apuntes!!!!

EFECTOS VISUALES: is (:hidden) / is (:visible)


Se puede comprobar si el estado de un elemento es visible o

no:
Si est oculto, la siguiente funcin devuelve true
$(elemento).is (:hidden)

Si est visible , la siguiente funcin devuelve true


$(elemento).is (:visible)

EFECTOS VISUALES: toggle()


Podemos alternar la visibilidad/invisibilidad de un elemento

con la funcin toggle()


Aumentando la transparencia
$(elemento).toggle[fast/slow/normal/milisegundos],[function])

$(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");}

botn que muestra/oculta un cuadro, a la vez tambin cambia el texto del botn segn el estado del cuadro.

Hacer ejemplo de los apuntes!!!!

EFECTOS VISUALES: animate


El mtodo animate permite realizar animaciones

personalizadas. Su sintaxis es la siguiente:

$(elemento).animate({propiedades},[duracin],[f_animacin],[callback])

propiedades: parmetro obligatorio, se utiliza para indicar que

atributos CSS se quieren actualizar con nuevos valores duracin, indica la duracin de la animacin. funcin de animacin, es una funcin que contiene las instrucciones que indican cmo se realizar la animacin. callback, este parmetro permite ejecutar una funcin cuando finaliza la animacin.

Hacer ejemplo de los apuntes!!!!

PRACTICA FINAL EN LOS APUNTES