charla jquery

Introducción JQueryJavaScript Query

Temario

• ¿Qué es JQuery?• ¿Qué es DOM?• ¿Por qué usar JQuery?• Frameworks JS y JQuery• Referencia API• Jquery Mobile• Plugins Destacados

¿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

¿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>

• 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

USABILIDAD

¿Por qué usar JQuery?

USABILIDAD• 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.”

¿Por qué usar JQuery?

es la facilidad con que las personas pueden utilizar

una herramienta

Frameworks JS y JQuery

Fuente : http://www.webappers.com/

http://www.webappers.com/

Referencia API (interfaz de programación de aplicaciones)

• Selectors• Events• Attributes• CSS• Traversing• Manipulation• Core• Effects• Ajax• Utilities• Deferred Object.

• 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”)


• Selectors (Selectores)– Hierarchy (Jerarquía):

• Seleccionar Hijo: $(“padre > hijo”)• Por Descendencia : $(“ancestro descendiente”)• Adyacente siguiente: $(“anterior + siguiente”)• Elementos después de Selector: $(“#id ~ div”)


• 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 Jerarquia DOM $(window).load Documento completo

Contenido(imágenes,textos,etc)


• 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)


• 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”);


• 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”);


• Core (Núcleo)– jQuery.noConflict(); desde versión 1.0

• $ jQuery• Muchas librerias utilizan $


.html

• Core (Núcleo)– Solución : Reemplazar $ por otro carácter

• var j = jQuery.noConflict();• j(“#inputText”).val(“Ejemplo jQuery.noConflict();”);


.html

• Effects (Efectos)

– Básicos: hide(), show(), toggle()– Fading: fadeIn(), fadeOut(), fadeTo(), fadeToggle()– Sliding: slideDown(), slideUp(), slideToogle()– Custom: animate(), delay(), stop() ……

Más efectos ? JQueryUI


• 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();


• 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, errorvalorAjax.error(function(){

alert(“El proceso no fue realizado de forma exitosa”);

});


• 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.


*JSON : JavaScript Object Notation

http://es.wikipedia.org/wiki/JSON

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

Jquery Mobile

• Componentes UI

Plugins Destacados

Introducción Jquery

FIN

charla jquery

Documents