JQuery con ejemplos cortos

jQuery
Desarrollo de aplicaciones web

jQuery
● Es un framework Javascript
● El proposito es facilitar la inclusion de
Javascript en un sitio o aplicacion web
● Podemos verlo como una capa de abstraccion
● Transforma muchas lineas de codigo Javascript, en
funciones mas simples
● NO reemplaza a Javascript, sino que simplifica
su sintaxis

jQuery
● Existen multiples alternativas a jQuery
● Sin embargo, hoy dia es una de las mas
populares en el mercado
● Asimismo es una de las mas extensibles,
pudiendose encontrar plugins para casi
cualquier tarea en la web

Utilizando jQuery
● Para utilizarlo, debemos incluirlo en las paginas
en las que vamos a utilizarso
● Podemos descargar el framework desde
www.jquery.com
● Agregamos una referencia al archivo
descargado, en el head de la pagina
● <script type="text/javascript"
src="jquery-1.5.1.js"></script>

Utilizando jQuery
● Debemos agregar en el head esta referencia:
<head>
<title>jQuery test</title>
<script type="text/javascript"
src="jquery-1.5.1.js"></script>
</head>

Hello world!
● Este es un ejemplo de uso de jQuery:
<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>
● Esto carga en el divTest1, el string “Hello, world!”

Hello world!
● El equivalente sin jQuery, es un poco mas largo
<div id="divTest2"></div>
<script type="text/javascript">
document.getElementById("divTest2").innerHTML =
"Hello, world!";
</script>
● Ademas, es dependiente del browser

Ready event
● El ejemplo anterior manipula el contenido de la
pagina
● Es buena practica esperar a que el documento
este cargado y pronto para ser utilizado
● Esto permite
● Que las estructuras de la pagina esten cargadas
antes de comenzar a utilizarlas
● Que el codigo Javascript pueda ser colocado al
comienzo de la pagina

Encadenamiento
● Una caracteristica interesante de jQuery, es
que la mayoria de los metodos, retornan un
objeto jQuery
● Esto permite realizar cadenas de invocaciones,
como por ejemplo:

Encadenamiento
● Podemos hacer que el codigo se vea mas
intuitivo, como por ejemplo:

Selectores
● Una de las tareas mas comunes al usar
Javascript, es modificar el contenido de la
pagina
● Pero para hacer esto, necesitamos encontrar lo
que queremos cambiar
● Es para esto que se utilizan los selectores
● Para elegir un conjunto de elementos, hacemos
$(<query para seleccionar>)

#id
● Utiliza el identificador de un elemento en la
pagina, el cual debe ser unico

.class
● Permite seleccionar los elementos de una
determinada clase de estilo

element selector
● Tambien es posible seleccionar todos los
elementos de la pagina de un determinado tipo
● $("a")
● $("div")
● Tambien podemos combinar los ultimos dos
selectores
● $("span.bold").css("font-weight", "bold");

Selectores basados en atributos
● Ademas de los selectores anteriores, podemos
realizar selecciones de elementos basado en
los atributos de estos elementos

Filtramos por el valor de atributo
● Podemos utilizar operadores para filtrar los
valores de los atributos

Selectores padre/hijo
● jQuery permite realizar selecciones de
elementos, basados en el elemento padre
● Tenemos dos tipos
● Las selecciones basadas en el padre directo de un
elemento
● Las selecciones que permiten filtrar por cualquier
elementro ancestro del elemento buscado

Selectores padre/hijo
● Para seleccionar los elementos cuyo padre
directo es de un determinado tipo:
$("div > a")
● Para seleccionar los elementos que tenga
algun padre de un determinado tipo:
$("div a")

DOM (document object model)
● Uno de los principales aspectos de jQuery, es
que permite manipular el DOM del documento
html
● Es una forma de interactuar con el HTML/XML
o XHTML de la pagina
● jQuery viene con una serie de metodos que
permiten una manipulcion sencilla de los
componentes del documento

Manipulando el contenido
● La forma mas simple de manipulacion, es
obtener y guardar texto, valores y html
● Son similares, pero no lo mismo
● text: es una representacion textual del inner content
del elemento
● values: es para elementos del formulario
● html: es una representacion textual, pero
incluyendo markup html

Manipulando atributos
● En forma similar al contenido, podemos
manipular atributos, a traves del metodo attr()
● Por ejemplo:

● Para modificar el valor del atributo, agregamos
un parametro extra

● Tambien podemos manipular muchos atributos
juntos, utilizando un map

Manipulando clases CSS
● A traves de metodos como los anteriores,
podemos manipular tambien las clases de
estilo que un elemento tiene asignadas
● Supongamos que tenemos:

● Tenemos los metodos
● hasClass() que retorna si un elemento tiene una
clase
● addClass() para agregar una clase a un elemento
● removeClass() para quitar una clase de un
elemento

● El codigo anterior, controla si un elemento tiene
una clase, si la tiene la elimina, si no la tiene, se
la establece
● Como esto es una tarea muy comun, tenemos
el metodo toggleClass()
<a href="javascript:void(0);"
onclick="$(this).toggleClass('bold');">
Toggle class
</a>

● El mecanismo de selectores, permite que la
manipulacion de clases aplique sobre un
conjunto de elementos:

● Lo anterior genera una imagen como la
siguiente:

Manipulando el DOM
● Los metodos append() y prepend(), permiten
agregar elementos dentro de otros elementos,
al final y al principio, respectivamente:

Manipulando el DOM
● Ambos metodos reciben una cantidad infinita
de parametros:

Manipulando el DOM
● Tambien disponemos de los metodos before() y
after(), que son muy similares a los anteriores.
● La diferencia es que permiten hacer
inserciones en varios elementos a la vez

Manipulando el DOM
● Tambien tenemos los metodos remove() y
empty()
● Empty permite eliminar todos los hijos de un
determinado elemento
$('#divTestArea1').empty()
● Remove permite eliminar los elementos
seleccionados
$('#divTestArea1').remove()

Eventos
● jQuery provee un mecanismo interesante para
asociar codigo en funciones, a elementos en la
pagina
● Por ejemplo:

binding
● jQuery provee los metodos bind() y unbind()
para atachear y desatachear funciones a
conjuntos de elementos

binding
● Cuando jQuery invoque el evento, pasara
informacion relativa al mismo como primer
argumento
● Por ejemplo, informacion sobre la posicion del
mouse, puede encontrarse en este objeto, o
que tecla del teclado se ha presionado
● La informacion de referencia puede obtenerse
aqui:
http://api.jquery.com/event.which/

binding
● Por ejemplo, con el caso de un evento de
mouse, podemos obtener:

binding
● Tambien podemos pasar informacion propia, y
obtenerla dentro de la funcion, en el objeto que
representa el evento:

binding
● Con el metodo unbind(), podemos remover las
subscripciones a funciones que tienen los
elementos
● Por ejemplo:
$("a").unbind();
$("a").unbind("click doubleclick");

Que es AJAX?
● Javascript para la interacción con el browser y
para responder ante eventos
● DOM para acceder y modificar la estructura del
documento HTML
● XML para representar los datos que viajan
entre el servidor y el cliente
● El objeto XMLHttpRequest para intercambiar
datos XML asincronicamente con el servidor

load()
● Una de las formas mas simples de cargar datos
asincronicamente en jQuery, es a traves del
metodo load()
● Por ejemplo, supongamos que tenemos una
pagina content.html

load()
● Indicando cual es el elemento en el que
queremos cargar los datos, podemos utilizar el
metodo load():

load()
● Tambien podemos seleccionar parte de la
pagina a cargar, usando un selector como parte
de load():

get() / post()
● Estos metodos permiten enviar y recibir
paquetes HTTP contra el servidor
● Ambos son metodos estaticos, por lo que
pueden ser usados en el objeto jQuery o
directamente sin instancia:
● jQuery.get() / jQuery.post()
● $.get() / $.post()

get() / post()
● Estos metodos reciben una URL como
parametro, indicando donde queremos acceder
● Si queremos hacer algo con el resultado,
debemos utilizar una funcion de callback

parametros
● En caso de que lo necesitemos, podemos
enviar parametros al servidor, a traves de un
mapa

JSON
● JavaScript Object Notation
● Es un subconjunto de JavaScript
● Puede ser parseado por un parser JavaScript
● Puede representar objetos primitivos o complejos
● Pueden ser String, Objects, Booleans, Integers y
Arrays
● Un objeto:

JSON
● Es legible tanto por un humano como por una
maquina
● Tiene soporte de unicode
● Es autodocumentable
● Es mas liviano que XML
● ver: http://json.org/example.html
● Los algoritmos de parsing son eficientes, debido
a la estructura estricta pero simple
● Puede representar registros, listas y arboles

JSON
● Puede ser usado directamente en Javascript, para
ser convertido a una estructura Javascript
● Por ejemplo, podemos tener:
● var data = eval('<JSON STRING>')
● Luego, la variable data tendra la lista, la estructura
o el valor primitivo que represente el string JSON
● Podemos usarlo para acceder a campos por
ejemplo
● alert(data.name);

jQuery + JSON + Java (Web)
● Los tres elementos pueden ser combinados para
construir aplicaciones web empresariales
● jQuery, junto a su bibilioteca de widgets, puede
utilizarse para construir las vistas de nuestra
aplicacion
● Los componentes Java (Servlets, Web services,
EJBs) pueden utilizarse para implementar el
backend server side de la aplicacion
● JSON puede ser usado como formato de
intercambio de datos

JSON + Servlets
● Una forma simple de exponer informacion
desde el servidor, es utilizar Servlets (o
servicios REST) para enviar y recibir
informacion
● Necesitamos una forma simple de transformar
objetos desde y hacia el formato JSON
● Una libreria interesante, es google-gson, la cual
provee mecanismos para convertir
automaticamente desde y hacia JSON, objetos
Java

google-gson
● Se encarga de la serializacion/deserializacion
JSON-JAVA
● Gson gson = new Gson();
● gson.toJson(1); ==> imprime 1
● gson.toJson("abcd"); ==> imprime "abcd"
● gson.toJson(new Long(10)); ==> imprime 10
● int[] values = { 1 };
● gson.toJson(values); ==> imprime [1]

google-gson
● int one = gson.fromJson("1", int.class);
● Integer one = gson.fromJson("1", Integer.class);
● Long one = gson.fromJson("1", Long.class);
● Boolean false = gson.fromJson("false",
Boolean.class);
● String str = gson.fromJson(""abc"",
String.class);
● String anotherStr = gson.fromJson("["abc"]",
String.class);

jQuery UI
● Es un framework construido sobre jQuery, que
provee efectos de animacion, widgets
(controles), efectos y temas
● Puede ser usado para construir interfaces
graficas con un alto nivel de interactividad y
belleza grafica
● Entrar a:
● http://jqueryui.com/
● http://jqueryui.com/demos/

jQuery UI – Ejemplo sencillo
● Para agregar soporte en una pagina,
agregamos al head:
● <link type="text/css" href="css/themename/jquery-
ui-1.8.14.custom.css" rel="Stylesheet" />
● <script type="text/javascript" src="js/jquery-
1.4.4.min.js"></script>
● <script type="text/javascript" src="js/jquery-ui-
1.8.14.custom.min.js"></script>

● Supongamos que queremos agregar un date
picker a la pagina
● Agregamos lo siguiente:
<input type="text" name="date" id="date" />
● Y luego, en la funcion onReady()
$('#date').datepicker();
● Y obtenemos:

JQuery con ejemplos cortos

Más contenido relacionado

La actualidad más candente

Similar a JQuery con ejemplos cortos

Más de José Ricardo Tillero Giménez

JQuery con ejemplos cortos