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?

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


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.


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


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

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


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


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.



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


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


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


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>


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.


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


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



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
– $.support
valores 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)
● 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.



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/


Licencia Copyleft

Lander Ontoria Gardeazabal <lander@irontec.com>

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 <contacto@irontec.com>

Se permite la copia, modificación, distribución, uso
comercial y realización de la obra, siempre y cuando se
reconozca la autoría de la misma, a no sea ser que se
obtenga permiso expreso del autor. El autor no permite
distribuir obras derivadas a esta.

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

jQuery 1.3 Eghost Julio2009

Más contenido relacionado

La actualidad más candente

Similar a jQuery 1.3 Eghost Julio2009

Más de Irontec

jQuery 1.3 Eghost Julio2009