Humberto Gajardo Francino
Universidad de Tarapacá Arica
Que veremos en esta
presentación
● Que es jQuery
● Para que se usa
● Aspectos básicos
● Ejemplos de las API
● Ejemplos de plugins.
A quien va dirigido
● A los alumnos de computación e informática
● A los que les interesa el diseño y desarrollo
web
● A profesores
● A mechones y eternos.
Que es JQuery
jQuery es una rápida y concisa biblioteca de
JavaScript que simplifica el documento HTML
que comprende, el control de eventos,
animación, y las interacciones Ajax para rápido
desarrollo web.
jQuery está diseñado para cambiar la forma en
que se escribe JavaScript.
Que es JQuery
● jQuery se ha convertido en la librería Javascript
más utilizada actualmente.
● Se podría decir que está “ganado” la carrera en
el mercado de las librerías Javascript.
● Algunos usuarios de jQuery son Google,
Microsoft, IBM, Amazon, Twitter, WordPress,
Mozilla, Drupal, Humberto Gajardo, entre otros.
Características
● Acceso rápido y directo a los elementos de la pagina
(DOM).
● Mecanismos de selección robusto, directo y eficiente.
● Unifica estándares CSS para los distintos navegadores.
● Permite alterar contenido con muy poco código
● Gestiona interacción con los usuarios (manipulador de
eventos).
● Permite añadir animación a las paginas.
● Simplifica el uso de Ajax.
¿Por que jQuery y no otro?
● Es mas fácil de aprender.
● Compatibilidad entre versiones.
● Contempla más características que otros
Frameworks.
Licencia
● Licencia MIT
● Licencia publica general (GPL)
Veamos algunos ejemplos
● Http://[Link]/home
● [Link]
¿Como utilizar JQuery?
● Descargar biblioteca desde [Link] e
incluir la biblioteca en nuestra pagina web.
<script type="text/javascript" src="[Link]"></script>
● Agregar directamente desde el sitio de oficial de
jQuery
<script type="text/javascript"
src="[Link]
</script>
¿Como utilizar JQuery?
● Desde Google
<script type="text/javascript"
src="[Link]
/[Link]"></script>
● Desde Microsoft
<script type="text/javascript"
src="[Link]
[Link]"></script>
Hacer mas con menos código
<div id="elem">texto de prueba</div>
<script type="text/javascript">
myid = [Link](“elem");
[Link] = "blue";
</script>
<div id="elem">texto de prueba</div>
<script type="text/javascript">
$('#elem').css({'color': 'blue'});
</script>
Selección de elementos
● todos los elementos de tipo 'e' ● elementos con clase 'cla`
$('e'); $('.cla');
● elementos de tipo 'e' que son ● elementos con
descendientes de elementos
identificador 'contactos'
de tipo 'f'
$('f e'); $('#contactos');
● elementos de tipo 'e' que son ● elementos de tipo 'e' que
hijos de elementos de tipo 'f' contienen un atributo `atr`
$('f > e'); $('e[@atr]');
Manipulación de Elementos
● añadir clases a un elemento
$('a').addClass('clase');
● quitar clases a un elemento
$('tr').removeClass('clase');
● asignar reglas de estilo
$('td').css({'border': '4px solid red', 'color': 'red'});
Manejadores de eventos
Pasar el puntero sobre un elemento
$('tbody tr').hover(
function(e) {
$(this).addClass('over');
},
function(e) {
$(this).removeClass('over');
}
);
Sitio documentación de la API
[Link]
Veamos algunos ejemplos con la API de JQuery
Plugins
● [Link]
Recursos
En ingles
● [Link]
En español
● [Link]