jQuery

DIPLOMADO:
DESARROLLO WEB - FRONT END
DESIGNER

Edelfré Flores Velásquez

Qué es jQuery?
 jQuery es una biblioteca JavaScript rápida,
pequeña y rica en funciones. Hace que cosas
como la manipulación de documentos
HTML, la gestión de eventos, la animación y
Ajax sean mucho más sencillas con una API
fácil de usar que funciona en una multitud de
navegadores. Con una combinación de
versatilidad y extensibilidad, jQuery ha
cambiado la forma en que millones de
personas escriben JavaScript. (jQuery.com)
¿Por qué aprender jQuery?
 Escribe menos, haz más:
$("p.neat").addClass("ohmy").show("slow");
 Desempeño
 Plugins
 Es estándar
 ... y diversión!
Otros Proyectos Relacionados
jQuery UI
 La interfaz de usuario de jQuery es un
conjunto de interacciones de interfaz de
usuario, efectos, widgets y temas
construidos sobre la librería jQuery
JavaScript. Tanto si está creando
aplicaciones web altamente interactivas
como si sólo necesita añadir un selector
de fecha a un control de formulario,
jQuery UI es la elección perfecta.
jQuery Mobile
 jQuery Mobile es un sistema de interfaz
de usuario basado en HTML5 diseñado
para que los sitios web y las aplicaciones
sean accesibles en todos los teléfonos
inteligentes, tabletas y dispositivos de
escritorio.
QUnit: A JavaScript Unit
Testing framework.
 QUnit es un marco de pruebas de
unidades JavaScript potente y fácil de usar.
Es usado por los proyectos jQuery,
jQuery UI y jQuery Mobile y es capaz de
probar cualquier código JavaScript
genérico, ¡incluyéndose a sí mismo!
Sizzle
 Un motor selector de CSS de JavaScript
puro diseñado para ser fácilmente
colocado en una biblioteca anfitriona.
window.onload
 No podemos usar el DOM antes de que
la página haya sido construida. jQuery nos
da una forma más compatible de hacerlo.
◦ El camino DOM
window.onload = function() { // hacer cosas con el DOM}

◦ La traducción directa de jQuery

$(document).ready(function() { // hacer cosas con el DOM});

◦ La manera jQuery
$(function() { // hacer cosas con el DOM });
Aspectos del DOM y jQuery
 Identificación: cómo obtengo una
referencia al nodo que quiero.
 Traversal: cómo me muevo alrededor
del árbol DOM.
 Manipulación de nodos: cómo obtener
o establecer aspectos de un nodo DOM.
 Manipulación de Árboles: cómo
cambiar la estructura de la página.
The DOM tree
Selección de grupos de objetos
DOM
name description
getElementById returns array of descendents with the
given tag, such as "div"
getElementsByTagName returns array of descendents with the
given tag, such as "div"
getElementsByName returns array of descendents with the
given name attribute (mostly useful
for accessing form controls)
querySelector * returns the first element that would
be matched by the given CSS selector
string
querySelectorAll * returns an array of all elements that
would be matched by the given CSS
selector string
 Identificación del nodo jQuery
// id selector
var elem = $("#myid");

// group selector
var elems = $("#myid, p");

// context selector
var elems = $("#myid < div p");
•

// complex selector
var elems = $("#myid < h1.special:not(.classy)");
jQuery / DOM comparación
DOM method jQuery equivalent
getElementById("id") $("#id")
getElementsByTagName("tag") $("tag")

getElementsByName("somena $("[name='somename']")
me")
querySelector("selector") $("selector")
querySelectorAll("selector") $("selector")