15 Bloque III Tema 9 JQuery

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
Eventos en JQuery
JQueryUI
Bibliografa
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.
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>
Sera convertida por el navegador en:
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.
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
ndice
Eventos en JQuery
JQueryUI
Bibliografa
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()
Es mucho ms compacto que JSAPI
Ejemplo: ocultar un elemento con id "textbox
//javascript
document.getElementById('textbox').style.display = "none";
//jQuery
$('#textbox').hide();
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)
ndice
Eventos en JQuery
JQueryUI
Bibliografa
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)
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>')
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 $('*')
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)
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]")
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")
ndice
Eventos en JQuery
JQueryUI
Bibliografa
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');
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
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)
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.
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
ndice
Eventos en JQuery
JQueryUI
Bibliografa
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.
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.
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).
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)
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.
ndice
Eventos en JQuery
JQueryUI
Bibliografa
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
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
JQuery UI
Ejemplo con datepicker
o Pgina HTML
JQuery UI
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>
JQuery UI
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>
JQuery UI
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'],
JQuery UI
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: ''
};
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
.
JQuery UI
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');
}
}
)
JQuery UI
o Pgina HTML
ndice
Eventos en JQuery
JQueryUI
Bibliografa
Bibliografa
Fundamentos de JQuery
http://librosweb.es/libro/fundamentos_jquery/
Documentacin sobre diversas tecnologas Web, entre
ellas Javascript y JQuery http://devdocs.io/

15 Bloque III Tema 9 JQuery

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

15 Bloque III Tema 9 JQuery

Uploaded by

Copyright:

Available Formats

Tema 9: JQuery

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

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

Recorrido del DOM

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

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

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

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

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

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

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

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

Selector de fechas datepicker

Prrafos donde vamos a

You might also like