Está en la página 1de 44

Tema 9: JQuery

Fundamentos de la web
ndice
El modelo de objetos del documento (DOM)
Introduccin a JQuery
Argumentos de JQuery
Algunos mtodos de JQuery
Eventos en JQuery
JQueryUI
Bibliografa

Fundamentos de la web 2
ndice
El modelo de objetos del documento (DOM)
Introduccin a JQuery
Argumentos de JQuery
Algunos mtodos de JQuery
Eventos en JQuery
JQueryUI
Bibliografa

Fundamentos de la web 3
Modelo de Objetos del Documento
El Modelo de Objetos del Documento (DOM) es una
interfaz que permite acceder y modificar la estructura y
contenido de una pgina web (prrafos, enlaces,
imgenes, tablas, etc).
Para lograrlo, se crean una serie de objetos que
representan dichos elementos, y que guardan entre ellos
unas relaciones de parentesco (jerarqua) que refleja la
estructura lgica de una pgina HTML.

Fundamentos de la web 4
Modelo de Objetos del Documento
Por ejemplo, la pgina Web:
<html>
<head><meta charset='utf-8' />
<title>Una pgina sencilla</title>
</head>
<body>
<h1>Pgina HTML sencilla</h1>
<p id='uno'>Esta es una pgina muy sencilla</p>
<p id='dos' class='desglose'>Slo tiene:</p>
<ul class='desglose'>
<li class='desglose'>Un ttulo</li>
<li class='desglose'>Dos prrafos</li>
<li class='desglose'>Una lista</li>
</ul>
</body>
</html>

Fundamentos de la web 5
Modelo de Objetos del Documento
Sera convertida por el navegador en:

Fundamentos de la web 6
Modelo de Objetos del Documento
Cuando el navegador carga una pgina, el HTML de la pgina
se parsea para generar su rbol DOM. El nodo raz es un
objeto predefinido document, que representa todo el
documento (objeto global).
Llamando a mtodos JavaScript del objeto document se
puede recorrer y consultar el rbol DOM de la pgina actual.
Llamando a funciones JavaScript se pueden aadir/eliminar
elementos al rbol DOM, modificar su contenido y
modificar/eliminar/aadir atributos (p.ej. Id o class) de
elementos, lo que provoca que se redibuje la parte afectada de
la pgina.

Fundamentos de la web 7
Modelo de Objetos del Documento
JSAPI
Es la API de propiedades y funciones para manipular el
BOM y el DOM
Las implementaciones de JavaScript son bastante
similares en los diferentes navegadores
Sin embargo, la API JSAPI no es tan uniforme, hay
algunas diferencias entre los distintos navegadores.
Existen varias bibliotecas que recubren JSAPI para
homogeneizar: YUI, Prototype, DoJo, que aaden
adems utilidades.
La ms usada: jQuery

Fundamentos de la web 8
ndice
El modelo de objetos del documento (DOM)
Introduccin a JQuery
Argumentos de JQuery
Algunos mtodos de JQuery
Eventos en JQuery
JQueryUI
Bibliografa

Fundamentos de la web 9
Introduccin a JQuery
Es una API que recubre JSAPI, proporcionando uniformidad
entre browsers. Usaremos JQuery y no JSAPI
Extiende JSAPI con animaciones, soporte para CSS, eventos
y AJAX.
Tambin utilidades, como manipulacin de JSON y
componentes GUI como paneles, etc
Un simple pero potente sistema de plugin permite extender
JQuery
Define una funcin global: jQuery()
$() es un alias de jQuery()

Fundamentos de la web 10
Introduccin a JQuery
Es mucho ms compacto que JSAPI
Ejemplo: ocultar un elemento con id "textbox
//javascript
document.getElementById('textbox').style.display = "none";

//jQuery
$('#textbox').hide();

Fundamentos de la web 11
Introduccin a JQuery
Para usarlo,
o En produccin, lo tomamos de un CDN (Content
Delivery Network), por ejemplo, aadimos en el head de
la pgina (aprox 19 KB):
<script
src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
o Para desarrollo, es un poco ms eficiente descargar la
versin no minimizada de http://jquery.com (aprox 120
KB)

Fundamentos de la web 12
ndice
El modelo de objetos del documento (DOM)
Introduccin a JQuery
Argumentos de JQuery
Algunos mtodos de JQuery
Eventos en JQuery
JQueryUI
Bibliografa

Fundamentos de la web 13
Argumentos de JQuery
JQuery/$() es una funcin sobrecargada. Hace una
cosa u otra dependiendo de los argumentos que se le
pasen:
Pasndole un elemento JSAPI del DOM (ej. document o
window):
o Devuelve un objeto jQuery que recubre el elemento del argumento.
Pasndole una funcin como argumento
$(function() {})
o Ejecuta la funcin una vez se ha cargado todo documento y el DOM
est preparado para ser manipulado.
o Equivalente a $(document).ready(f)

Fundamentos de la web 14
Argumentos de JQuery
Pasndole HTML (un string):
o Crea el elemento correspondiente al argumento (que ha de tener
etiquetas HTML (con sus <>, para no confundirse con un selector CSS
del caso siguiente) y lo devuelve recubierto/envuelto en un objeto
jQuery, pero no lo inserta en el DOM (hay mtodos de JQuery para
hacerlo) .
Ejemplo:
p =$('<p>Prrafo tres</p>')

Fundamentos de la web 15
Argumentos de JQuery
Pasndole un selector de CSS (un string) :
o Devuelve los elementos del DOM correspondientes al selector CSS
que se pasa como argumento, o null si no hay ninguno.
Ej: En la pgina sencilla de la diapositiva 65
$('#dos') devuelve el segundo prrafo p

o Si devuelve varios elementos, se itera luego sobre ellos con .each


para acceder a cada elemento de la coleccin devuelta. Dentro se
hace referencia al elemento seleccionado con $(this).
$(p').each(function(){
$(this).addClass(parrafoNormal');});

o Para seleccionar todos los elementos $('*')

Fundamentos de la web 16
Argumentos de JQuery
Pasndole un selector de CSS (un string) :
Hijos de un elemento
$(selector1 > selector2) Elementos que cumplan selector2 y adems
sean hijos de elementos que cumplan selector1
Ejemplo: $(p > a)

Descendientes de un elemento
$(selector1 selector2) Elementos que cumplan selector2 y adems
sean descendientes de elementos que cumplan selector1
Ejemplo: $(div h2)

Fundamentos de la web 17
Argumentos de JQuery
Pasndole un selector de CSS (un string) :

o Filtros de ndice:
$("selector:first") p.ej $("p:first")
$("selector:last") p.ej $("p:last")
$("selector:eq(i)") p.ej. $("p:eq(1)")
(empieza por cero)
$("selector:gt(i)")
$("selector:lt(i)")

o Filtros de atributo
$("selector[attributo]")
$("selector[attributo=valor]")
$("selector[attributo!=valor]")

Fundamentos de la web 18
Argumentos de JQuery
Pasndole un selector de CSS (un string) :
o Filtros de contenido:
$("selector:content('text')")
$("selector:empty")
$("selector:has(selector)")

o Filtros de condicin:
$("selector:visible")
$("selector:hidden")
$("selector:disabled")
$("selector:enabled")
$("selector:checked")
$("selector:selected")

Fundamentos de la web 19
ndice
El modelo de objetos del documento (DOM)
Introduccin a JQuery
Argumentos de JQuery
Algunos mtodos de JQuery
Eventos en JQuery
JQueryUI
Bibliografa

Fundamentos de la web 20
Algunos mtodos de JQuery
Notacin e.func(args) es una funcin que se aplica a un
elemento e devuelto por jQuery().
o Ej: $('h1.title').func(args).
o Si no se indica otra cosa, devuelve el elemento tras aplicrsele la
funcin, por lo que se pueden llamar en cascada
P.ej. $('#content').find('h3').eq(2).html('nuevo texto
para el tercer elemento h3');

Recorrido del DOM


o $("selector").length Nmero de elementos
seleccionados

o $("selector-1").find('selector-2') Devuelve los hijos


seleccionados por selector-2.
P.ej $('#movies').find('tr');

Fundamentos de la web 21
Algunos mtodos de JQuery
Consultar/modificar elementos HTML
o $('selector').append('htmlString')
P.ej. $('body').append($('<p class=\'nuevo\'>
Fundamentos de la Web</p>'));

o $('htmlString').insertBefore('selector'),
.insertAfter('selector')
P.ej. $('<p>Ejemplo JQuery</p>').insertBefore($('.nuevo'));

o $('selector').remove(), .replaceWith(elem)

o $('selector').clone() Devuelve copia recursiva de los


descencientes

Fundamentos de la web 22
Algunos mtodos de JQuery
Consultar/modificar elementos HTML
o $('selector').html(['htmlString']) Los [] indican que el
argumento es opcional. Devuelve (o pone si hay argumento) el
contenido del/los elementos seleccionados como html.
P.ej. $('h1').html(); Devolvera "Pgina HTML sencilla"
P.ej. $('body').append( $("<ol/>").html
(<li>uno</li><li>dos</li>")) Aade una nueva lista
numerada.

o .attr('attr' [,nuevoValor]). Devuelve o pone el


valor del atributo
P.ej. $('img').attr('src', 'http://google.com')

o $('selector').is(:cond') Comprueba si el elemento cumple


la condicin (p.ej. ':visible', ':hidden', ':checked',
':selected', ':enabled', ':disabled)

Fundamentos de la web 23
Algunos mtodos de JQuery
Consultar/modificar elementos HTML
o val([val]) Devuelve o pone el valor (value) del elemento: ,
para botones la etiqueta, para textboxes el contenidopara mens el
texto de la opcin seleccionada

o .addClass('cssClass'), .removeClass('cssClass'),
hasClass()

o .css('propiedad') Devuelve propiedad CSS del elemento

o .css({'propiedad':'valor',}) Pone propiedades CSS al


elemento.

Fundamentos de la web 24
Algunos mtodos de JQuery
Animaciones
o .hide([duracion][,callback]),
.show([duracion][,callback]) Muestra/oculta el elemento,
tardando duracion ('fast', 'slow' o milisegundos), y cuando termina
llama a callback

o .slideUp([duracion][,callback]), Desaparece como


persiana
.slideDown([duracion][,callback]),
.slideToggle([duracion][,callback])

o .fadeOut([duracion][,callback]), Desaparece hacindose


transparente
.fadeIn([duracion][,callback])
.fadeTo(duracion, target, callback)
Target es un valor de transparencia entre 0.0 y 1.0

Fundamentos de la web 25
ndice
El modelo de objetos del documento (DOM)
Introduccin a JQuery
Argumentos de JQuery
Algunos mtodos de JQuery
Eventos en JQuery
JQueryUI
Bibliografa

Fundamentos de la web 26
Eventos con JQuery
Por los inconvenientes que tiene mezclar cdigo con aspectos
de presentacin, se considera que es mejor utilizar JSAPI o
JQuery para registrar manejadores de eventos (callbacks) que
ponerlos en el cdigo HTML (incluso si son llamadas a
funciones definidas en otra parte).
En los manejadores de eventos podemos programar acciones
jQuery que modifican el DOM.

Fundamentos de la web 27
Eventos con JQuery
Al poderse modificar localmente el DOM en el propio
navegador, la interaccin es mucho ms dinmica.
o Los elementos HTML cambian localmente en el
navegador como consecuencia de acciones del usuario
o Comparado con tener que realizar una nueva peticin
HTTP para que el servidor devuelva una nueva pgina
con los elementos HTML cambiados, la experiencia del
usuario es mucho ms fluida.

Fundamentos de la web 28
Eventos con JQuery
Registrar manejadores de eventos
$(selector).tipo-evento(func([event]){})
o Asocia a elemento la funcin func como un manejador para tipo-
evento. Cuando ocurra tipo-evento sobre elemento, el navegador
llamar a func(event) pasando en event los datos del evento.
Ejemplo:
$("#miBoton").click( validar);
function validar(){
if( $("#miTexto").val().length < 10 ) {
alert("Error")
} ;
Dentro del manejador se puede hacer referencia al elemento
HTML donde se produjo el evento con $(this).

Fundamentos de la web 29
Eventos con JQuery
Tipos de eventos aplicables a cualquier elemento:
o click, dblclick, mousedown/mouseup,
mouseenter/mouseleave
o keypress (event.which devuelve el cdigo ASCII
dentro del manejador)
o focus/blur (el elemento obtiene/pierde el foco de
entrada)
o focusin/focusout (el padre del elemento
obtiene/pierde el foco)

Fundamentos de la web 30
Eventos con JQuery
Ejecucin de los manejadores de eventos
o El navegador llama a un manejador de eventos cuando se produce el
evento sobre el elemento con el que est asociado.
o Los manejadores del elemento y los de sus ancestros en el DOM se
ejecutan en cadena antes del comportamiento predefinido (si existe):
La cadena comienza en el elemento en el que se produce el
evento y termina en el objeto global.
Si un manejador devuelve true, se ejecuta el siguiente en la
cadena.
Si el manejador devuelve false, se interrumpe la ejecucin en
cadena, y la del comportamiento predefinido, que es el ltimo.

Fundamentos de la web 31
ndice
El modelo de objetos del documento (DOM)
Introduccin a JQuery
Argumentos de JQuery
Algunos mtodos de JQuery
Eventos en JQuery
JQueryUI
Bibliografa

Fundamentos de la web 32
JQuery UI
En JQuery es muy fcil aadir extensiones (plugin)
La ms utilizada es la biblioteca JQuery UI, consistente en un
conjunto de controles de interaccin (widgets) y efectos
visuales. https://jqueryui.com/
Para utilizarla hay que aadir a las pginas HTML:
o <link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/TEMA/jq
uery-ui.css" /> donde TEMA es el tema (de aspecto) deseado.
Vase una lista en http://www.asp.net/ajax/cdn/jquery-
ui/cdnjqueryui1114
o <script src="http://code.jquery.com/ui/1.11.4/jquery-
ui.js"></script> Deber ir despus del de JQuery

Fundamentos de la web 33
JQuery UI
JQuery UI. Ejemplo con datepicker
Pgina HTML

Selector de fechas datepicker

Prrafos donde vamos a


mostrar la fecha introducida
de dos formas diferentes

Fundamentos de la web 34
JQuery UI
Ejemplo con datepicker
o Pgina HTML

Fundamentos de la web 35
JQuery UI
Ejemplo con datepicker
o Pgina HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo datepicker</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" />
<script
src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script
src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/app.js" ></script>
</head>

Fundamentos de la web 36
JQuery UI
Ejemplo con datepicker
o Pgina HTML
<body>
<section>
<form action="/">
Fecha:
<input type="text" id="datepicker">
<br><br><br>
<p>Fecha introducida:
<span id="copiaFecha"></span></p>
<p>Fecha introducida (UNIX):
<span id="fechaUnix"></span></p>
</form>
</section>
</body>
</html>

Fundamentos de la web 37
JQuery UI
Ejemplo con datepicker
o app.js: Configuracin del widget datepicker
$(function() { Para que se ejecute al terminar de cargar el documento
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo',
'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre',
'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr', May','Jun','Jul',
'Ago','Sep','Oct','Nov','Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Mircoles', 'Jueves',
'Viernes','Sbado'],

Fundamentos de la web 38
JQuery UI
Ejemplo con datepicker
o app.js: Configuracin del widget datepicker
dayNamesShort: ['Dom','Lun','Mar','Mi','Juv','Vie','Sb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','S'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};

Fundamentos de la web 39
JQuery UI
Ejemplo con datepicker Ms configuracin
o app.js
$.datepicker.setDefaults($.datepicker.regional["es"]);
$( "#locale" ).change(function() {
$( "#datepicker" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
Asocia un datepicker a nuestro
$("#datepicker").datepicker();
campo de texto
.

Fundamentos de la web 40
JQuery UI
Ejemplo con datepicker
app.js: Manejo de eventos
$("#datepicker").change(mostrarFecha);

function mostrarFecha() {
$('#copiaFecha').text($(this).datepicker('getDate'));

$('#fechaUnix').text($(this).datepicker('getDate').getTime()
/ 1000 + ' segundos desde el 1 de enero de 1970');
}

}
)

Fundamentos de la web 41
JQuery UI
Ejemplo con datepicker
o Pgina HTML

Fundamentos de la web 42
ndice
El modelo de objetos del documento (DOM)
Introduccin a JQuery
Argumentos de JQuery
Algunos mtodos de JQuery
Eventos en JQuery
JQueryUI
Bibliografa

Fundamentos de la web 43
Bibliografa
Fundamentos de JQuery
http://librosweb.es/libro/fundamentos_jquery/
Documentacin sobre diversas tecnologas Web, entre
ellas Javascript y JQuery http://devdocs.io/

Fundamentos de la web 44