Documentos de Académico
Documentos de Profesional
Documentos de Cultura
4 Jquery PDF
4 Jquery PDF
com/photos/robertbanh/4119832814
Tema 4
Libreras
Javascript. jQuery
Libreras Javascript. 1.
jQuery Introduccin a
las libreras
Javascript
2
Problemas con Javascript Libreras Javascript. jQuery 3
Ventajas:
Permiten una mayor productividad, simplificando las tareas ms comunes
Trabajo con DOM
AJAX
Animaciones
Widgets o componentes grficos
Amplan el propio lenguaje Javascript
POO basada en clases (p.ej. prototype.js)
Encapsulan las incompatibilidades entre navegadores
Inconvenientes:
Introducimos en nuestro cdigo dependencias de APIs no estndar
Muchas veces se habla de frameworks para recalcar la idea de que
adems aportan una filosofa o un estilo de programacin propio
Ejemplo Libreras Javascript. jQuery 5
AJAX en prototype.js
new Ajax.Request('/una_url',
{
method:'get',
//podemos pasar parmetros HTTP de manera sencilla.
parameters: {param1: 'valor1', param2: 'valor2'},
//El parmetro 'transport' no es ni ms ni menos que el XMLHttpRequest.
//Si la respuesta del servidor es de tipo JSON, automticamente se llama a
//eval() y se obtiene el resultado en el segundo parmetro
onSuccess: function(transport,json){
if (json)
alert("me han enviado un objeto con JSON!!);
else
alert("La respuesta del servidor es: " + transport.responseText);
},
onFailure: function(){ alert('Error') }
});
Algunas libreras Libreras Javascript. jQuery 6
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
Todoterreno
Prototype (http://prototype.js.org)
jQuery (http://jquery.com)
MooTools (http://mootools.net)
Closure (http://code.google.com/intl/es-ES/closure/)
...
Widgets:
DOJO (http://dojotoolkit.org)
ExtJS (http://www.sencha.com/products/js/)
YUI (http://developer.yahoo.com/yui/2/)
jQuery UI (http://jqueryui.com)
Animaciones
Scriptaculous (http://script.aculo.us)
jQuery UI
Frameworks avanzados Libreras Javascript. jQuery 7
8
Qu es jQuery? Libreras Javascript. jQuery 9
Seleccionando nodos y
ejecutando operaciones
bsicas sobre ellos
13
Selectores jQuery Libreras Javascript. jQuery 14
Podemos acceder a los nodos reales del DOM por posicin, bien con
notacin de array o bien con el mtodo get()
//cambiar el href del primer enlace de la pgina
//Como queremos usar el API DOM tenemos que acceder al nodo
$('a')[0].href = 'http://www.ua.es'
//idem, con get(). Podemos saber el tamao con size()
$('a').get(0).href = 'http://www.ua.es'
alert('Hay ' + $('a').size() + ' enlaces')
Bucles implcitos y explcitos Libreras Javascript. jQuery 16
Implcito
Cuando un selector engloba a varios nodos, el comando jQuery
implcitamente hace un bucle por todos los nodos
//Esto ocultara TODOS los prrafos
$('p').hide()
Explcito
Podemos movernos por el conjunto con each(), pasndole una funcin
a ejecutar para cada elemento. La funcin recibir automticamente
como parmetro el ndice del elemento actual dentro del conjunto. Con
this podemos acceder al elemento.
$('a').each(function(i)
{
alert(el enlace n + i + " apunta a " + this.href)
})
Selectores jQuery: atributos Libreras Javascript. jQuery 17
//De todos los botones de radio quedarnos con los marcados (CSS3)
$('input[type=radio]:checked')
//$('input[type=radio][checked]') no nos sirve porque
//seleccionara los marcados inicialmente, pero no AHORA
//campos de formulario deshabilitados (CSS3, tambin existe :enabled)
$('input:disabled')
//cualquier cabecera: h1,... h6
$(':header')
//podemos seleccionar solo un tipo de campo
(:checkbox, :radio, :reset, :submit, :text, :password, :file) o todos (:input)
Por ejemplo, $(':password') y
$('input[type=password]') seran lo mismo
//podemos combinar todo esto
$(':checkbox:checked:enabled')
//el filtro :not es la negacin. Campos NO checkbox (CSS3)
$('input:not(:checkbox)')
Libreras Javascript. 4
jQuery Navegacin y
manipulacin
del DOM
20
Navegar por el rbol Libreras Javascript. jQuery 21
//devuelve los hijos de cada uno de los nodos seleccionados (todos juntos)
//o sea, tendramos todos los <li> de todas las listas no ordenadas
$('ul').children()
//devuelve todos los <div> que contienen prrafos
$('p').parent('div')
//devuelve el ancestro ms inmediato
//averiguamos fcilmente qu <div> contiene a la imagen
$('#imagen').closest('div')
Acceso bsico al DOM Libreras Javascript. jQuery 22
remove([selector]), empty()
//Elimina todos los prrafos
$('p').remove()
//Elimina los prrafos pero solo los de la class 'nota'
$('p').remove('.nota')
//Esto borrara el contenido de los prrafos
//(pero los propios <p> seguiran estando)
$('p').empty()
clone()
//Hace una copia de todas las imgenes y las mete dentro
//del elemento con id=galeria
$('img').clone().appendTo('#galeria')
Creacin estructurada de HTML Libreras Javascript. jQuery 26
$('<input>',
{ type:'button',
value:'Clicame',
click:function() {
alert('hola!')
}
})
.appendTo('body')
Libreras Javascript. 5.
jQuery Eventos
27
Gestin de eventos Libreras Javascript. jQuery 28
$('input[type=button]').live(click,function() {alert(hola)})
<div id=miDiv></div>
//con el bind normal este botn no tendra listener para click
$('<input>',
{ type:'button',
value=Clica aqu})
.appendTo($(#miDiv))
Ejecutar cdigo cuando la pgina est lista Libreras Javascript. jQuery 32
33
Animaciones Libreras Javascript. jQuery 34
Simplificando la peticin
AJAX y el procesamiento de
la respuesta
36
AJAX Libreras Javascript. jQuery 37
Si sabemos que nos envan HTML podemos usar load() para cargar
la respuesta en algn punto del DOM
$('#resultado').load(
'getCotizacionHTML.php',
{empresa: 'AAPL', moneda:'eur' }
)
Tomar parmetros de un formulario Libreras Javascript. jQuery 39