2. ¿QUÉ ES JQUERY?
Framework JavaScript creado por Jhon Resig
en el año 2005 y presentado el 2006.
Reunió una serie de funciones para que por
medio de programación fuera sencillo
encontrar o ―consultar‖ elementos en una
página Web y asignarles comportamientos.
JQuery = JavaScript Query.
Enero 2006:
Modificaciones DOM
Animaciones básicas
3. jQuery ofrece métodos para la mayoría de los
eventos — entre
ellos $.fn.click, $.fn.focus, $.fn.blur,$.fn.chan
ge, etc.
5. ¿QUÉ ES DOM?
DOM (Document Object Model – Modelo de objetos del documento).
Interfaz de programación para manipular dinámicamente contenido
estructurado dentro de un documento HTML mediante lenguaje
EMCAScript (JavaScript).
Ejemplo:
<html>
<head>
<script type="text/javascript">
function muestraValor(){
valor = document.getElementById(“inputDemo”).value;
alert(valor);
}
</script>
</head>
<body onLoad=“muestraValor()”>
<input type=“text” id=“inputDemo” value=“Valor del inputText” />
</body>
</html>
6. ¿POR QUÉ USAR JQUERY?
Mejoramiento sitios y sistemas web
Amplia variedad de características
Sintaxis fácil de aprender
Robusto en compatibilidad multiplataforma
Un solo archivo compacto
Cientos de plugins
Soporte
7. Facilidad de aprendizaje
Facilidad de uso
Flexibilidad
Robustez
― La usabilidad demuestra reducciones del ciclo de desarrollo de los
productos de 33-50% (Bosert 1991). ”
jQuery : “write less, do more.”
10. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
Selectors
Events
Attributes
CSS
Traversing
Manipulation
Core
Effects
Ajax
Utilities
Deferred Object.
11. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
Selectors (Selectores)
Basic (Básicos):
Seleccionar todos los elementos : $(“*”)
Seleccionar un elemento por tag : $(“div”)
Seleccionar por clase : $(“.class”)
Seleccionar por ID : $(“#id”)
Selección Multiple : $(“#id,.class,SelectorN”)
12. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
Selectors (Selectores)
Hierarchy (Jerarquía):
Seleccionar Hijo: $(“padre > hijo”)
Por Descendencia : $(“ancestro descendiente”)
Adyacente siguiente: $(“anterior + siguiente”)
Elementos después de Selector: $(“#id ~ div”)
13. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
Events (Eventos)
Document Loading (Carga de documento):
$(document).ready (function(){ acción a realizar });
Abreviado : $(function(){ acción a realizar });
$(window).load (function(){ acción a realizar });
$(window).unload (function(){ acción a realizar });
Diferencias entre $(document).ready y $(window).load
$(document).ready
$(window).load
Jerarquia DOM
Documento completo
Contenido(imágenes,textos,etc)
14. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
Events (Eventos)
Mouse events (Eventos del Mouse):
click, dblclick, focusin, focusout , hover …….
Form Events (Eventos de Formulario)
blur, change, focus, select, submit
Keyboard Events (Eventos de Teclado)
keydown, keypress, keyup
Otros (Event Object, Browser Events)
15. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
Attributes (Atributos)
.attr(Atributo): Obtiene valor de atributo
.attr(Atributo,valor): Setea atributo
$("#btn").attr("style","background-color:#f0f0f0");
.removeAttr(atributo)
$("#btn").removeAttr("style”);
.addClass(clase)
$("#btn").addClass(“claseCSS”);
.removeClass(clase)
$("#btn").removeClass(“claseCSS”).addClass(“otraCl”);
16. Referencia API (interfaz de programación de aplicaciones)
Attributes (Atributos)
.val(): Obtiene valor de elemento
$("#InputText").val();
.val(valor): Setea valor a elemento
$("#InputText").val(“Presentación”);
.html(): Obtiene html de un elemento
<div id=“divPrueba”> Contenido </div>
$("# divPrueba ").html(); = “Contenido”
.html(contenido): Setea valor a elemento
$("# divPrueba ").html(“Nuevo Contenido”);
17. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
• Core (Núcleo)
– jQuery.noConflict(); desde versión 1.0
• $ jQuery
• Muchas librerias utilizan $
$
$$
.html
$
18. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
• Core (Núcleo)
– Solución : Reemplazar $ por otro carácter
• var j = jQuery.noConflict();
• j(“#inputText”).val(“Ejemplo jQuery.noConflict();”);
j
$$
.html
$
19. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
Effects (Efectos)
Básicos: hide(), show(), toggle()
Fading: fadeIn(), fadeOut(), fadeTo(), fadeToggle()
Sliding: slideDown(), slideUp(), slideToogle()
Custom: animate(), delay(), stop() ……
Más efectos ? JQueryUI
20. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
Effects (Efectos)
Callbacks : Secuencia de llamada a funciones.
Ejemplo:
var funcionCallback = function(){
alert(“Fin de ejecución.”);
};
var efecto = function(){
$(“#ID”).fadeOut(300,funcionCallback);
};
efecto();
21. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
Ajax
$.get(url,parameters,function)
Ejemplo :
var valorAjax = $.get(“pagina.jsp”,{ valor:”PRO1”},
function(data){
$(“#divPrueba”).html(data);
});
¿Puedo manejar la respuesta de un AJAX?
- success, complete, error
valorAjax.error(function(){
alert(“El proceso no fue realizado de forma exitosa”);
});
22. REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)
Ajax
$. getJSON() : carga *JSON datos desde server
$.getScript() : Carga archivo JS desde server
.load() : Carga los datos HTML dentro de un el.
$(―#DIV‖).load(―documento.html‖);
$.post(): Carga datos de server con POST request.
23. JQUERY MOBILE
Framework para Smartphones y Tablets
Construido en base al núcleo de JQuery
Compatible con las principales plataformas
móviles
• Simplicidad
• Mejora Progresiva
• Accesibilidad
• Peso Ligero
• Tematización