jquery 1.3 eghost julio2009
Post on 13-Jan-2015
3.689 Views
Preview:
DESCRIPTION
TRANSCRIPT
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Curso E-Ghost Julio 2009
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)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
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 a jQuery y nuevas funcionalidades de jQuery 1.3
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 a jQuery y nuevas funcionalidades de jQuery 1.3
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 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 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
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>
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.
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.
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.
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
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”.
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.
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.
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3
Introducción a jQuery (selectores)
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.
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.
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.
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.
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.
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
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”
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”.
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 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>” .
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”>
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>
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3
Introducción a jQuery (Manipulación)
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>
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Manipulación)
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>
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Manipulación)
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 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
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.
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
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
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”
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
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
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
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()
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 )
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Introducción a jQuery (Eventos)
mouseenter( fn )
mouseleave( fn )
mousemove( fn )
mouseout( fn )
mouseover( fn )
mouseup( fn )
resize( fn )
scroll( fn )
select( )
submit( )
unload( fn )
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
– $.supportvalores booleanos sobre las opciones que acepta el navegador.
● $.support.boxModel– cssFloat– hrefNormalized– htmlSerialize– leadingWhitespace– noCloneEvent– objectAll– opacity– scriptEval– style– tbody
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á.
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.
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 :)
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.
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();
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”) }});
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
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.
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.
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.
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.
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.
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/
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Licencia Copyleft
Lander Ontoria Gardeazabal <lander@irontec.com>
Copyright
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
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 <contacto@irontec.com>
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).
top related