1. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Curso E-Ghost Julio 2009
2. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción
¿Qué es Javascript?
Javascript != Java
Creado por Bredan Eich para Navigator 2.0 (1995)
Lenguaje ligero interpretado en navegadores web (aunque no
exclusivamente)
Javascript es una implementación de ECMAScript (lenguaje de scripting
basado en prototipos)
El script se descarga directamente al navegador, y es ejecutado siempre
en el lado del cliente: tecnología del cliente, dependiente del
software del cliente (de su navegador)
3. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción
¿Cómo debería de ser Javascript?
Multinavegador
Debe respetar las “implementaciones” de todos los navegadores y sus
versiones más utilizadas.
No Intrusivo
Separar Javascript / código XHTML / CSS.
Versiones accesibles.
Ligero
Facilitar tiempos de carga
jsmin / mod-gzip / etc...
Ejecución rápida
Es un lenguaje de muy alto nivel... su ejecución a veces de demasiado lenta,
innavegable casi...
4. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción
DOM
Document Object Model
Representación estándar de un documento XML (o HTML/XHTML), que
representa como objetos los elementos que lo componen.
Independiente del lenguaje y/o de la plataforma.
Permite acceder y modificar dinámicamente tanto la estructura y como el
estilo de documentos.
Javascript posee un conjunto de métodos que permite acceder y modificar
los objetos y atributos de un documento XHTML.
Existe un estándar del W3C, implementado a medias por la mayoría de los
navegadores.
5. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción
¿Qué es jQuery?
Librería abstracción Javascript
Creada por John Resig (Sept. 2005)
Se encarga de “gustar” a todos los navegadores
IE6.0 / Firefox 2.0 / Safari 2.0 / Opera 9.0
Acceso DOM ágil y optimizado
Permite animaciones simples
Manejador Eventos
Facilitar AJAX
Ahorro espectacular de muchas líneas de código
6. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción
¿Por qué jQuery? (y no otra librería de abstracción)
API sencilla y potente
Muy ligera (19Kb minificada y gzipeada)
Potente sistema de plugins (http://plugins.jquery.com)
Buen soporte de la comunidad
Gran continuidad en su desarrollo
Si Google, IBM, BBC, Wordpress, Drupal, Digg, Meneame o Irontec ;)
utilizan jQuery... por algo será.
Funciona juntgero interpretado en navegadores web (aunque no
exclusivamente)
Javascript es una implementación de ECMAScript (lenguaje de scripting
basado en prototipos)
El script se descarga directamente al navegador, y es ejecutado siempre
en el lo con otras librerías de abstracción
7. Introducción a jQuery y nuevas funcionalidades de jQuery 1. 3
Introducción a jQuery
¿Por dónde empezar con jQuery?
Creando un documento XHTML e insertando jQuery en el mismo:
<!DOCTYPE …
<html lang="en">
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
8. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery
Core de jQuery
$()
Esta función es el núcleo de jQuery.
En realidad es un alias para la función jQuery().
Encapsula 1 ó más objetos DOM y permite interactuar con ellos de varias
maneras.
Mediante “selectores” o “expresiones” dentro de un contexto o no, parseará
el objeto DOM y lo introducirá en un objeto jQuery.
Automáticamente interactúa sobre los N objetos DOM que sean resueltos
mediante el selector escogido.
9. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery
$(expresión, [contexto])
Esta es la manera de crear un objeto jQuery a partir de una expresión.
La expresión se crea a partir de selectores y filtros dentro o no de un
contexto.
$('elemento del DOM') => devuelve array de elementos
seleccionados.
10. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery
$(html)
Esta es la manera de crear un objeto jQuery a partir de un elemento.
$('<p>hola</p>') => crea un objeto a partir del html que hemos
insertado. Después podremos manipularlo a nuestro antojo.
11. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (selectores)
Selectores
Selectores Básicos
$('*')
Convierte todos los elementos del DOM en un objeto jQuery.
$('name')
Busca los elementos con el nombre del tag.
$('input') => devuelve un array con todos los input que se
encuentren el en DOM.
$('#id')
Busca un elemento que tenga el atributo id.
$('#box_principal') => devuelve un array con un único elemento
con el atributo id igual a “box_principal”.
12. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (selectores)
$('.class')
Busca uno o varios elementos que contengan la clase.
$('.red') => devuelve un array con todos los elementos del DOM
que contengan la clase “.red”.
$('.class.class')
Busca uno o varios elementos que contengan las clases.
$('.red.selected') => devuelve un array con los elementos del
DOM que contengan las dos clases.
$('selector1, selector2, selectorN')
Devuelve un resultado combinado con con los selectores.
$('.red, .green, .blue, a') => devuelve un array con todos los
objetos del DOM que contengan las tres clases de colores más
con todos los elementos tipo a del DOM.
13. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (selectores)
Selectores Jerárquicos
Descendiente
$('#page a') => todos los elementos tipo a dentro del
“elemento” con el tag id igual a “page”.
Parent > child
$('#page > a') => todos los elementos tipo a dentro del
“elemento” con el tag id igual a “page” en un primer nivel, es
decir HIJOS de #page.
Previous + next
$('label + input') => todos los elementos label seguidos de un
input.
Previous ~ siblings
$('h2 ~ p') => todos los elementos tipo p después del h2 del
DOM.
14. Introducción a jQuery y nuevas funcionalidades de jQuery 1. 3
Introducción a jQuery (selectores)
Filtros
Filtros Básicos
:first | :last , primer | último
$('p:last') => devuelve el último p del documento.
:not(selector)
$('p:not(.text)') => devuelve todos los elementos tipo p que
no contienen la clase “.text”.
:eq(índice) | :gt(índice) | :lt(índice)
$('p:eq(2)') => el tercer el elemento del array de “p”s del
objeto.
$('p:gt(3)') => todos los p cuyo índice es mayor que 3.
$('p:lt(3)') => todos los p cuyo índice es menor que 3.
15. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (selectores)
:even | :odd
$('p:even') => p pares.
$('p:odd') => p impares.
:header
$(':header') => elementos del DOM tipo header (h1,h2,h3,...).
:animated
$('div:animated') => elemento animado del DOM.
16. Introducción a jQuery y nuevas funcionalidades de jQuery 1. 3
Introducción a jQuery (selectores)
Filtros de Contenido
:contains
$(“p.text:contains('foo')”) => todos los p con la clase .text
que contengan en el texto la palabra “foo”.
:empty
$('p:empty') => todos los elementos p que no tengan contenido
en su interior.
:has(selector)
$('p:has(a)') => todos los p que contengan en el interior
elementos tipo a.
Filtros de Visibilidad
:visible | :hidden
$('div:hidden') => todos los div ocultos.
17. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (selectores)
Filtros mediante Atributos
[attr]
$('div[class]') => devuelve todos los div que tienen clase.
[attr (=)(!=)(^=)($=)(*=) value]
= Igual
!= Diferente
^= Empieza
$= Acaba
*= Contiene
<a href=”ejemplo_atributos.html” title=”un ejemplo de
selectores con atributos” >ejemplo</a>
$('a[href$=html][title*=ejemplo]') => devuelve los a que en el
atributo href acabe por html y en el atributo title contenga
ejemplo.
En jQuery 1.3 “[@attr]” desaparece.
18. Introducción a jQuery y nuevas funcionalidades de jQuery 1. 3
Introducción a jQuery (selectores)
Filtros de Formularios
:input
$(':input',$('#formulario)) => todos los elementos tipo input,
textarea, select y button en el contexto elemento con id
“formulario”.
Por tipo
:hidden | :text | :password | :checkbox | :radio | :image |
:file | :button | :submit | :reset
$('input:submit , input:button') => devuelve un array con los
elementos tipo input cuyo “tipo” se submit o button
Por estado
:enabled | :disabled | :checked | :selected
$('checkbox:checked') => todos los checkbox que estan
checkeados.
19. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Atributos)
Atributos
Obtener y asignar valores mediante atributos
attr(name)
attr(key, value)
<input type=”text” name=”nombre” class=”current”
value=”foo” />
alert($('input').attr('name')); => mostrará el valor del
atributo nombre del input.
$('input').attr('name','apellido'); => seteará el atributo
name a “apellido”
20. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Atributos)
Obtener y asignar Clases
hasClass(class)
addClass(class) / removeClass(class)
toggleClass(class, switch)
<input type=”text” name=”nombre” class=”current”
value=”foo” />
$('input').hasClass('current'); => devolverá true si input
contiene la clase current.
$('input').removeClass('current').addClass('notCurrent'); =>
borrará la clase “current” y añadira la clase “notCurrent”.
21. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Atributos)
Obtener y asignar html
html() / html(html)
<p>Tengo una bici <strong>roja</strong></p>
$('p').html() => devolverá un string con “Tengo una bici
<strong>roja</strong>”
$('p strong:eq(0)').html('<em>azul</em>'); => insertará en la
primera etiqueta strong dentro de p “<em>azul</em>” .
Obtener y asignar texto
textl() / text(text)
<p>Tengo una bici <strong>roja</strong></p>
$('p').text() => devolverá un string con “Tengo una bici roja”
$('p strong:eq(0)').text('<em>azul</em>'); => insertará en la
primera etiqueta strong dentro de p
“<em>azul</em>” .
22. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Atributos)
Obtener y asignar valores
val() / val(valor)
<input type=”text” name=”nombre” value=”foo”>
$('input').val(“SUPER”+$('input').val());
<input type=”text” name=”nombre” value=”SUPERfoo”>
23. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Manipulación)
Manipulación del DOM
Insertar dentro del selector
$(selector).append(contenido) [al final]
$(contenido).appendTo(selector) [al final]
$(selector).prepend(contenido) [al principio]
$(contenido).prependTo(selector) [al principio]
<p>Hola </p>
$('<strong>qué tal</strong>').appendTo('p');
$('p').append('?').prepend('¿');
Resultado:
<p>¿Hola <strong>qué tal</strong>?</p>
24. Introducción a jQuery y nuevas funcionalidades de jQuery 1. 3
Introducción a jQuery (Manipulación)
Insertar fuera del selector
after(contenido) [después]
before(contenido) [antes]
insertAfter(selector) [insertar después]
insertBefore(selector) [insertar antes]
<p><a href=”” >aquí</a><p>
$('a').before('<em>Pincha </em>');
<p><em>Pincha </em><a href=”” >aquí</a><p>
25. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Manipulación)
Insertar alrededor del selector
wrap(html|elemento) / wrapAll(html|elemento)
wrapInner(html|elemento)
<p class=”ejemplo”></p>
<a>texto</a>
<a>texto2</a>
$('a').wrap('<div></div>');
Resultado:
<div><a>texto</a></div>
<div><a>texto2</a></div>
$('a').wrapAll($('.ejemplo'));
Resultado:
<p class=”ejemplo”><a>texto</a>
<a>texto2</a></p>
$('a').wrapInner('<em></em>');
Resultado:
<a><em>texto</em></a>
26. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Manipulación)
Sustituir (replacear) contenido
selector.replaceWith(contenido)
contenido.replaceAll(selector)
<a>texto<a>
$('a').replaceWith('<em>'+$('a').text()+' sustituido</em>');
<em>texto sustituido</em>
Borrar contenido
empty(): borra, vacía el contenido dentro del selector.
remove(): borra todo del DOM
Copiar contenido
clone(): copia el contenido.
27. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Manipulación, CSS)
● Manipulación del DOM, CSS
– CSS
● css(nombre)
$('p').css('color') => devuelve el valor del atributo de
css color
● css(nombre, valor)
$('p').css('color','#000') => aplica el estilo a p
$('p').css({'color':'#000','font-size','.85em', … }) =>
aplica el estilo a p
28. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Manipulación, CSS)
– Posicionamiento
● offset( )
– Devuelve la posición relativa al documento del elemento en
píxeles. [top,left]
● position( )
– Devuelve la posición relativa al padre del elemento en píxeles.
[top,left]
● scrollTop( ) / scrollLeft( )
– Devuelve el offset del primer elemento encontrado.
– Height / Width
● width() / height( )
● innerwidth() / innerheight( )
● outerwidth() / outerheight( )
Devuelven o setean valores de anchura o altura.
29. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Métodos Trasversales)
Métodos Trasversales
Métodos que se aplican a un selector que devuelven elementos del
DOM a partir de un selector.
Filtros
<input type=”text” class=”a” />
<input type=”text” class=”b” />
<input type=”text” class=”b” />
<input type=”text” class=”a” />
eq(índice)
$('input').eq(0) => devuelve el primer input
filter(función) / filter(expresión)
$('input').filter('.b') => devuelve de los input los que
contengan la clase “b”
is(expresión)
$('.a').is('input') => devuelve true en caso de que el
elemento sea de tipo input
30. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Métodos Trasversales)
not(expresión)
$('input').not('.a') => devuelve los input que no contengan la
clase “a”
Buscadores
<div><p>buscadores</p></div>
add(expresión)
$('div').add('p') => añade al selector principal los elementos
del DOM tipo p
children(expresión)
$('div').children('p') => devuelve todos los hijos tipo p de
div
find(expresión)
$('div').find('p') => devuelve todos los elementos de tipo p
que hay dentro de div, hijos y nietos.
contents()
$("iframe").contents().find("body").append('<p>hola</p>') =>
entra en el iframe busca el body y inserta al final del mismo
“hola”
31. Introducción a jQuery y nuevas funcionalidades de jQuery 1. 3
Introducción a jQuery (Métodos Trasversales)
next(expresión) / nextAll(expresión)
devuelve el siguiente / los siguiente/s elemento/s según la expresión.
prev(expresión) / prevAll( expr )
devuelve el anterior / los anteriores elemento/s según la expresión.
parent(expresión) / parents(expresión)
devuelve el/los nodos padres del elemento según la expresión.
andSelf()
<div><p></p><p></p><div>
$('div').children('p').andSelf() => todos p dentro del div y
el mismo div
32. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Eventos)
Eventos
Carga de la Página
ready(función)
$(document).ready(function(){
alert(“el documento está cargado”);
});
Captura de eventos
bind( type, data, fn)
Bindea un evento a un objeto jQuery como click, dblclick, mouseover, ...
$('a.click').bind('click',function(){
alert('click');
});
unbind( type, fn )
Desbindea el evento del objeto.
$('a.click')bind('mouseover',function(){$
(this).addClass('over');}).bind('click',function()
{alert('click');}).unbind('click'); => solamente quedará
bindeado el evento mouseover
33. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Eventos)
one( type, data, fn )
bindea el evento solo una vez y después se desbindea.
trigger( event, data )
Lanza el evento sobre un objeto.
$('a').trigger('click'); => lanza el evento click sobre el
elemento a.
triggerHandler( event, data )
Lanza el evento sobre un objeto y saca el “foco”.
live( type, fn )
Bindea el evento para los elementos actuales y futuros.
die( type, fn )
Es el unbind del live()
34. Introducción a jQuery y nuevas funcionalidades de jQuery 1. 3
Introducción a jQuery (Eventos)
Helpers
hover( over, out )
toggle( fn, fn2, fn3,fn4,... )
blur( )
change( )
click( )
dblclick( )
error( )
focus( )
keydown( )
keypress( )
keyup( )
load( fn )
mousedown( fn )
36. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Utilidades)
● Utilidades de jQuery
– Navegador y detección de opciones
● $.browser: datos sobre el navegador
● $.browser.version: versión del navegador
– $.support
valores booleanos sobre las opciones que acepta el navegador.
● $.support.boxModel
– cssFloat
– hrefNormalized
– htmlSerialize
– leadingWhitespace
– noCloneEvent
– objectAll
– opacity
– scriptEval
– style
– tbody
37. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Utilidades)
– Arrays y operaciones
● $.each(objeto, función)
– Iterador que sobre el objeto.
● $.extend()
– Extiende un objeto con otro devolviendo un objeto.
● $.grep(array,función)
$.grep( [0,1,2], function(n,i){
return n > 0;
}); => devuelve [1,2]
● $.makeArray(obejto)
– Crea un array a partir de un objeto.
● $.map(array,función)
– Pasa los valores de un array a otro mapeado los valores del primer
array.
● $.inArray(valor,array)
– Devuelve el índice del valor a buscar en el array, -1 si no está.
38. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Utilidades)
● $.merge(array,array2)
– Mergea dos arrays.
● $.unique(array)
– Saca los valores duplicados de un array
● $.isArray(objeto)
– Devuelve true cuando es objeto es un array. False cuando no.
● $.isFuction(objeto)
– True cuando es una función.
● $.trim(string)
– Borra los espacios en blanco del principio y del final de un array.
● $.param(objeto)
– Serializa en forma de url un objeto.
39. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Ajax)
● Ajax ¿Qué es ajax?
– Asynchronous Javascript and XML.
– Peticiones asíncronas de datos al servidor, realizadas desde
Javascript.
– No siempre se devuelve XML; casi siempre se trata de HTML o
JSON (AHAH)
– Nos permite construir sitios web interactivos sin necesidad de
recargar el documento descargado.
– Es posible gracias al objeto XMLHttpRequest.
● X-Requested-With = XMLHttpRequest
– Como siempre, implementación aleatoria en cada navegador
– Con jQuery nos da igual :)
40. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Ajax)
– Peticiones Ajax
● $.ajax( options )
– Carga un contenido remoto utilizando HTTP request.
● load( url, data, callback )
– Carga HTML de un fichero remoto i lo inserta en el DOM.
● $.get( url, data, callback, type )
– Carga una página remota utilizando HTTP GET request.
● $.getJSON( url, data, callback )
– Carga datos de tipo JSON utilizando HTTP GET.
● $.getScript( url, callback )
– Carga y ejecuta javascript utillizando HTTP GET request.
● $.post( url, data, callback, type )
– Carga una página remota utilizando HTTP POST.
41. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Ajax)
– Eventos de Ajax
● La función ajax tiene diferentes eventos:
– ajaxComplete(callback)
– ajaxError(callback)
– ajaxSend(callback)
– ajaxStart(callback)
– ajaxStop(callback)
– ajaxSuccess(callback)
– Ajax Misc
– $.ajaxSetup();
42. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Ajax)
– Petición ajax
$.ajaxSetup({
url: "ajax.php",
type: "POST",
DataType: “JSON”
});
$.ajax({ data: ({name: “ajax”}) , success:
function(){
alert(“success”)
}
});
43. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (efectos)
● Efectos
Efectos sobre el elemento mediante un efecto sencillo de mostrar
y ocultar los elementos.
● show() / hide()
$('#hiddenBox').show('fast',function(){alert(“show”);});
●
●
● toggle()
Cuando el elemento está en “hide” mediante el efecto show lo
muestra, y al revés.
44. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (efectos)
Efectos tipo cortina.
● slideDown() / slideUp()
●$('#hiddenBox').slideDown('fast',function()
{alert(“show”);});
●
● slideToggle()
Cuando el elemento está en “hide” mediante el efecto show lo
muestra, y al revés.
45. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (efectos)
Efectos tipo opacidad.
● fadeIn() / fadeOut()
$('#hiddenBox').fadeIn('fast',function(){alert(“show”);});
●
●
● fadeTo(speed,opacity,callback)
Cuando el elemento está en “hide” mediante el efecto show lo
muestra, y al revés.
46. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (efectos)
Efectos custom
● animate() / stop()
$('div').animate({"opacity": "0.5"}, 1000); => el div irá a
una opacidad de 0.5 en un segundo.
El stop() para la propagación del efecto, pudiendo dejar el
elemento como esta o devolverlo a un estado inicial.
47. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Debug
● Debug simple
– Siempre ha sido complicado debuggear javascript (con algunos
navegadores más que con otros). En general, en los últimos años,
Firefox (gecko), es el rey en el desarrollo del lado del cliente:
– Firebug:
● Inspeccionar DOM / Debug JS (Watch / Breakpoints / etc...) /
Profiling / Objeto console (console.debug)
– Livehttpheaders
● Permite observar exactamente las cabeceras HTTP tanto de petición
como de respuesta.
– WebDeveloper
● Completa barra de Herramientas que se complementa perfectamente
con las otras 2 herramientas.
48. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Enlaces
● http://www.jquery.com
● http://plugins.jquery.com
● http://ui.jquery.com/
● http://code.google.com/p/minify/
– Reduce el tamaño de tus .js y .css (y aumenta la velocidad de carga).
● http://dean.edwards.name/packer/
– Optimiza (y ofusca) tus .js
● http://www.getfirebug.com
● http://chrispederick.com/work/web-developer/
● http://livehttpheaders.mozdev.org/
49. Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Licencia Copyleft
Lander Ontoria Gardeazabal <lander@irontec.com>
Copyright