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://jqueryui.com/home
● http://plugins.jquery.com/project/checkboxtree
 ¿Como utilizar JQuery?
● Descargar biblioteca desde http://jquery.com/ e
incluir la biblioteca en nuestra pagina web.
<script type="text/javascript" src="jquery.js"></script>

● Agregar directamente desde el sitio de oficial de

jQuery
<script type="text/javascript"
src="http://code.jquery.com/query-latest.min.js">
</script>
 ¿Como utilizar JQuery?
● Desde Google
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2
/jquery.min.js"></script>

● Desde Microsoft
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-
1.4.2.min.js"></script>
 Hacer mas con menos código
<div id="elem">texto de prueba</div>
<script type="text/javascript">
myid = document.getElementById(“elem");
myid.style.color = "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

http://api.jquery.com/
Veamos algunos ejemplos con la API de JQuery
 Plugins
● http://pixelcoblog.com/240-plugins-para-jquery/
 Recursos
En ingles
● http://docs.jquery.com/Tutorials

En español
● http://docs.jquery.com/Tutorials#Tutoriales_en_esp