Este documento introduce jQuery y jQuery Mobile. jQuery es una biblioteca JavaScript de código abierto que facilita el desarrollo del lado del cliente en aplicaciones web. jQuery Mobile extiende jQuery para crear aplicaciones móviles. El documento explica cómo configurar y usar jQuery y jQuery Mobile, incluida la manipulación del DOM, el manejo de eventos y las llamadas Ajax.

1. Introducción a
jQuery

2. Conociendo jQuery
▹ Es una Librería desarrollada en Javascript.
▹ Libre y de código abierto, tiene doble Licencia como son: la de MIT y la
Pública General de GNU GPL.
▹ Como dice su slogan traducido: haz más con menos código, ayuda en
gran manera a agilizar y facilitar el desarrollo del lado del cliente dentro
de las aplicaciones web.
▹ Es la Librería más popular, potente y con la mayor comunidad activa de
JavaScript.
2

3. Qué podemos hacer con jQuery
▹ Selección de elementos DOM. (Modelo de Objetos del Documento)
▹ Interactividad y modificaciones del árbol DOM.
▹ Manejo de Eventos.
▹ Manipulación de la hoja de estilos CSS.
▹ Efectos y animaciones.
▹ Interacciones AJAX.
▹ Utilizar extensiones(Addons, Plugins) propias y de terceros.
3

4. Concepto de DOM
▹ Es la forma estándar que los
navegadores web acordaron en seguir
para representar los Objetos HTML en el
documento.
▹ Nos sirve como interfaz, en este caso
entre jQuery y la página web porque nos
proporciona una representación de la
fuente HTML como una red de objetos
sin formato.
▹ Esta red también se le compara como un
árbol, igual al árbol genealógico familiar
por las relaciones que mantienen los
elementos entre sí.
▹ Por eso se utiliza la misma terminología
que usamos cuando nos referimos a las
relaciones familiares: Padres, Hijos,
Hermanos y así sucesivamente.
4

5. 5 Concepto de Ajax (asynchronous javascript and xml)
Es una tecnología asíncrona, en el
sentido de que los datos adicionales
se solicitan al servidor y se cargan en
segundo plano sin interferir con la
visualización ni el comportamiento
de la página, es decir, no se debe
recargar toda la página para
presentar los datos que responde el
servidor.

6. 6 Manipulando objetos DOM
Para acceder al elemento input que tiene asignada la clase
numérico.-
<input type="text" class="numerico">
Mediante el tipo de elemento y clase asignada:
$( "input.numerico" ).html( "123456" );
Esta sentencia accede al elemento tipo INPUT que tenga como
clase numérico y le da el valor de 123456.
<input type="text" class="numerico" id="codigo">
Tambien Mediante su id:
$( "#codigo" ).html( "123456" );
De las dos maneras se asigna al elemento input el valor 123456
jQuery, como su nombre lo indica,
actúa como una sentencia en sql, en
donde puedes navegar por los
diferente elementos DOM accediendo
a ellos para manipularlos, por
ejemplo:

7. 7 Manejo de eventos
jQuery tiene la capacidad de manejar
eventos tales como:
▹ Eventos del navegador
▹ Carga del Documento
▹ Eventos de objetos
▹ Eventos de formulario, de
teclado, mouse entre otros.
Por ejemplo para ejecutar una acción en el evento click de un
botón.
< button type="button" id="ejemplo"></button>
$( "#ejemplo" ).click(function() {
alert( "Evento .click() invocado." ); });

8. 8 Llamadas Ajax
$.ajax({ url: "/rest/getContacto",
data: { codigo: 524 },
success: function( data ) {
$( "#contacto" ).html( "Contacto: " + data + "" );
}
});
En este ejemplo, se consume un
servicio que devuelve los datos de
contacto, el servicio recibe como
parámetro un código, y devuelve la
respectiva respuesta del servidor, la
misma que se asigna al elemento
contacto.

9. Como configurar Jquery
1.- Para configurar esta libreria, lo primero que debes hacer es
descargar jQuery en su página oficial:
http://docs.jQuery.com/Downloading_jQuery#Current_Release
2.- Crea una subcarpeta llamada “js” dentro de tu proyecto y
copiar allí el archivo .js de jQuery.
3.- Importar en el html el framework de la siguiente manera:
<script src=”js/jQuery-1.x.x.min.js”></script>
9

10. jQuery en acción
Aplicativo Web
Veamos un pequeño aplicativo web hecho con Html, jQuery y Php
10

11. Introducción a
jQuery Mobile
11

12. 12 Qué es jQuery Mobile
▹ Basado en el núcleo de jQuery.
▹ Orientado para la creación de App para dispositivos táctiles-móviles,
facilita y agiliza el desarrollo de las mismas.
▹ Ligero, pesa alrededor de 30Kb.
▹ .Compatible con dispositivos de gamas bajas medias y altas .
▹ Variedad de controles gráficos predefinidos, ahorrando tiempo al
momento de diseñar la parte gráfica del app.

13. 13 Como funciona?
Al ser desarrollado bajo el núcleo de jQuery, hereda las bondades de la
misma, resumidamente podemos decir que: agrega una capa extra que
permite entre varias cosas manejar eventos que se ejecutan sobre los
diferente elementos DOM y comunicarse en segundo plano vía ajax con
servidores, sumándole la posibilidad de utilizar variedad de controles
gráficos que facilitan el desarrollo de los aplicativos.

14. Para crear un app con jQuery Mobile necesitamos crear un archivo .html,
hecho esto tenemos dos opciones para el desarrollo de la app:
1. Cada opción del app es una página individual por lo que el menú
apuntará a cada html al momento de cambiar de opción.
2. Un solo archivo html, el cual contiene las diferentes opciones del app
debidamente seccionadas mediante tags específicos para dicha
función.
14
Anatomia de un app con
jQuery Mobile.

15. 15
Una vez activo, jQuery Mobile hace dos cosas: primero, optimiza las funciones nativas para
mejorar su performance en equipos móviles , segundo, modifica el HTML y genera un layout con
una serie de elementos gráficos predefinidos que acelera sustancialmente la velocidad de
producción.
Instalar jQuery Mobile
Aunque es posible y es una técnica muy común en sitios web, instalar jQuery Mobile enlazando
directamente a los archivos almacenados en la nube, se recomienda ampliamente no aplicar esa
técnica para aplicaciones PhoneGap. Muy frecuentemente tu aplicación será utilizada sin
ninguna conexión a internet o con conexión intermitente. Si los archivos de jQuery están
enlazados a documentos en la nube, la aplicación quedaría posiblemente inutilizable.
1.- Para poder utilizar jQuery mobile, se necesita tener jQuery previamente configurado en
nuestro archivo html.
Anatomía de un app con jQuery Mobile.

16. 16
2.- Debes descargar el plugin de jQuery Mobile desde su sitio web oficial:
http://jquerymobile.com/download/ , crea una carpeta con el nombre “jQueryMobile”,
descomprime el archivo .zip que acabas de descargar y copia allí todos los archivos que
contiene. Al final deberías tener una estructura similar a esta:
Anatomía de un app con jQuery Mobile.
2.- Luego se debe configurar en el html de la siguiente manera:

17. 17
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,
initial-scale=1"/>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
...aquí iría el contenido...
</body>
</html>
Anatomía de un app con jQuery Mobile.

18. 18
jQuery Mobile aprovecha al máximo los nuevos elementos de HTML5 y hace un uso intensivo de
los atributos personalizados que se definen con el prefijo “data-”
Por ejemplo “data-role”, uno de los atributos más usados en jQuery Mobile, permite definir el rol
a nivel de funcionalidad y apariencia del elemento que lo contiene. Al definir el rol de un
elemento, este atributo permite crear páginas, botones, menús y muchos elementos más.
Al insertar el atributo “data-role” en cualquier tag lo convertimos en un elemento de la interfaz.
Sin necesidad agregar ningún código adicional jQuery agrega todos los elementos gráficos,
clases y hasta animaciones necesarios para el funcionamiento de ese elemento en particular.
Por ejemplo, para crear una página se utiliza el atributo data-role=”page” de esta forma:
<div data-role=”page” id=”inicio”>
Inicio
</div>
Anatomía de un app con jQuery Mobile.

19. 19 Cuando jQuery Mobile renderiza la aplicación comprende que este div debe ser interpretado
como una página. Le agrega el código y eventos necesarios para que se comporte y vea como
tal.
Usando el mismo principio, vamos a utilizar el atributo data-role=”header” para agregar un
encabezado a la página que acabamos de crear:
<div data-role=”page” id=”inicio” >
<div data-role=”header”>
<h1> Inicio </h1>
</div>
</div>
Ya tenemos una página con un encabezado.
Anatomía de un app con jQuery Mobile.

20. 20 Cuando jQuery Mobile renderiza la aplicación comprende que este div debe ser interpretado
como una página. Le agrega el código y eventos necesarios para que se comporte y vea como
tal.
Usando el mismo principio, vamos a utilizar el atributo data-role=”header” para agregar un
encabezado a la página que acabamos de crear:
<div data-role=”page” id=”inicio” >
<div data-role=”header”>
<h1> Inicio </h1>
</div>
</div>
Ya tenemos una página con un encabezado.
Anatomía de un app con jQuery Mobile.

21. jQuery en acción
Aplicativo Web
Veamos el app anterior con jQuery Mobile
21

22. ”
Enlaces de Interés
22
www.jquery.com
www.jquerymobile.com
www.html5.com
www.w3schools.com/jquerymobile
www.w3schools.com/jquery
https://es.wikipedia.org/wiki/GNU_General_Public_License

23. ”
GRACIAS
Pablo Viteri
pablov@yaesta.com
23