jquery 1.3 eghost julio2009

Introducción a jQuery y nuevas funcionalidades de jQuery 1.3

Curso E-Ghost Julio 2009


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)


Introducción

¿Cómo debería de ser Javascript?

MultinavegadorDebe respetar las “implementaciones” de todos los navegadores y sus

versiones más utilizadas.

No IntrusivoSeparar Javascript / código XHTML / CSS.

Versiones accesibles.

LigeroFacilitar tiempos de carga

jsmin / mod-gzip / etc...

Ejecución rápidaEs un lenguaje de muy alto nivel... su ejecución a veces de demasiado lenta,

innavegable casi...


Introducción

DOM

Document Object ModelRepresentació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.


Introducción

¿Qué es jQuery?

Librería abstracción JavascriptCreada 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 optimizadoPermite animaciones simplesManejador EventosFacilitar AJAXAhorro espectacular de muchas líneas de código


Introducción

¿Por qué jQuery? (y no otra librería de abstracción)API sencilla y potenteMuy ligera (19Kb minificada y gzipeada)Potente sistema de plugins (http://plugins.jquery.com)Buen soporte de la comunidadGran continuidad en su desarrolloSi 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

http://plugins.jquery.com/

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>



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.



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



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


Introducción a jQuery (selectores)

SelectoresSelectores 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”.



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



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.



FiltrosFiltros 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.



: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.



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.



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.


Introducción a jQuery (Atributos)

Atributos

Obtener y asignar valores mediante atributosattr(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”



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”.



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 textotextl() / 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>” .



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”>


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>



Insertar fuera del selectorafter(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>



Insertar alrededor del selectorwrap(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>



Sustituir (replacear) contenidoselector.replaceWith(contenido)

contenido.replaceAll(selector)<a>texto<a>$('a').replaceWith('<em>'+$('a').text()+' sustituido</em>');<em>texto sustituido</em>

Borrar contenidoempty(): borra, vacía el contenido dentro del selector.

remove(): borra todo del DOM

Copiar contenidoclone(): copia el contenido.


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


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.


Introducción a jQuery (Métodos Trasversales)

Métodos TrasversalesMé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



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”



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


Introducción a jQuery (Eventos)

EventosCarga de la Página

ready(función)$(document).ready(function(){

alert(“el documento está cargado”);});

Captura de eventosbind( 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



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



Helpers

hover( over, out )

toggle( fn, fn2, fn3,fn4,... )

blur( )

change( )

click( )

dblclick( )

error( )

focus( )

keydown( )

keypress( )

keyup( )

load( fn )

mousedown( fn )



mouseenter( fn )

mouseleave( fn )

mousemove( fn )

mouseout( fn )

mouseover( fn )

mouseup( fn )

resize( fn )

scroll( fn )

select( )

submit( )

unload( fn )


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

– $.supportvalores booleanos sobre las opciones que acepta el navegador.

● $.support.boxModel– cssFloat– hrefNormalized– htmlSerialize– leadingWhitespace– noCloneEvent– objectAll– opacity– scriptEval– style– tbody



– 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á.



● $.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.


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 :)



– 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.



– 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();



– Petición ajax

$.ajaxSetup({ url: "ajax.php", type: "POST", DataType: “JSON”});$.ajax({ data: ({name: “ajax”}) , success: function(){ alert(“success”) }});


Introducción a jQuery (efectos)

● EfectosEfectos 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.



Efectos tipo cortina.● slideDown() / slideUp()

●$('#hiddenBox').slideDown('fast',function(){alert(“show”);});●

● slideToggle()




Efectos tipo opacidad.● fadeIn() / fadeOut()

●$('#hiddenBox').fadeIn('fast',function(){alert(“show”);});●

● fadeTo(speed,opacity,callback)




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.


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.


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/

http://www.jquery.com/

http://plugins.jquery.com/

http://ui.jquery.com/

http://code.google.com/p/minify/

http://dean.edwards.name/packer/

http://www.getfirebug.com/

http://chrispederick.com/work/web-developer/

http://livehttpheaders.mozdev.org/


Licencia Copyleft

Lander Ontoria Gardeazabal <[email protected]>

Copyright


Licencia Copyleft

● Este documento está protegido bajo la licencia Reconocimiento-SinObraDerivada 2.1 España de Creative Common (http://creativecommons.org/licenses/by-nc-sa/3.0/es/)

Copyright © 2008 Irontec <[email protected]>

Se permite la copia, modificación, distribución, usocomercial y realización de la obra, siempre y cuando sereconozca la autoría de la misma, a no sea ser que seobtenga permiso expreso del autor. El autor no permitedistribuir obras derivadas a esta.

Esta nota no es la licencia completa de la obra, sinouna traducción de la nota orientativa de la licenciaoriginal completa (jurídicamente válida).

jquery 1.3 eghost julio2009

Technology