JQuery Presentacion

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)
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()
MTODOS: load()
Permite cargar un documento Web en una capa
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.
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])
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)
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.
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.
PRACTICA FINAL EN LOS APUNTES

JQuery Presentacion

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

JQuery Presentacion

Загружено:

Авторское право:

Доступные форматы

JQuery

Permite manipular todos los elementos de un pgina Web

DOM (Document Object Model )

head se debe introducir

fichero externo, se debe incluir tambin la siguiente orden

Una vez obtenido el elemento se puede utilizar cualquiera de

los mtodos que aporta el framework.

$(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

Referencias utilizando operadores

seleccionar. Los eventos se manejan con los controladores de eventos

controlador de evento que se desee.

Para eliminar un evento asociado a un elemento

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

recuperar el valor de su propiedad.

Dar valor a una propiedad

Eliminar una propiedad

Hacer ejemplo de los apuntes!!!!

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

Eliminar una clase CSS de un elemento

Hacer ejemplo de los apuntes!!!!

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

Para obtener el bloque HTML

Hacer ejemplo de los apuntes!!!!

Hacer ejemplo de los apuntes!!!!

elementos de una forma sencilla utilizando el mtodo siguiente:

Tambin podemos aadir contenido HTML al final de otro ya

Hacer ejemplo de los apuntes!!!!

EFECTOS VISUALES: hide/show

Tambin es posible ocultar los elementos referenciados

Hacer ejemplo de los apuntes!!!!

EFECTOS VISUALES: fadeIn/fadeOut/fadeTo

Determinan un nivel de transparencia

Hacer ejemplo de los apuntes!!!!

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

Si est visible , la siguiente funcin devuelve true

EFECTOS VISUALES: toggle()

con la funcin toggle()

$(document).ready(inicializarEventos); function inicializarEventos(){ $("#boton1").click(modificarVisibilidad);}

function modificarVisibilidad(){ $("#descripcion").toggle("slow",cambiarBoton);}

Hacer ejemplo de los apuntes!!!!

EFECTOS VISUALES: animate

personalizadas. Su sintaxis es la siguiente:

propiedades: parmetro obligatorio, se utiliza para indicar que

Hacer ejemplo de los apuntes!!!!

PRACTICA FINAL EN LOS APUNTES

Вам также может понравиться