Descargado 137 veces
Charla Jquery
- 1.
- 2. Temario ¿Qué esJQuery? ¿Qué es DOM? ¿Por qué usar JQuery? Frameworks JS y JQuery Referencia API Jquery Mobile Plugins Destacados
- 3. ¿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
- 4. ¿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>
- 5. Mejoramiento sitios ysistemas 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?
- 6. USABILIDAD Facilidad deaprendizaje 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
- 7. Frameworks JS yJQuery Fuente : http://www.webappers.com/
- 8. Frameworks JS yJQuery Fuente : http://www.webappers.com/
- 9. Referencia API (interfaz de programación de aplicaciones ) Selectors Events Attributes CSS Traversing Manipulation Core Effects Ajax Utilities Deferred Object.
- 10. 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”) Referencia API ( interfaz de programación de aplicaciones )
- 11. Selectors (Selectores) Hierarchy(Jerarquía): Seleccionar Hijo: $(“padre > hijo”) Por Descendencia : $(“ ancestro descendiente ” ) Adyacente siguiente: $(“anterior + siguiente”) Elementos después de Selector: $(“#id ~ div”) Referencia API ( interfaz de programación de aplicaciones )
- 12. Events (Eventos) DocumentLoading (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) Referencia API ( interfaz de programación de aplicaciones )
- 13. Events (Eventos) Mouseevents (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) Referencia API ( interfaz de programación de aplicaciones )
- 14. 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 ” ); Referencia API ( interfaz de programación de aplicaciones )
- 15. 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 ” ); Referencia API ( interfaz de programación de aplicaciones )
- 16. Core (Núcleo) jQuery.noConflict(); desde versión 1.0 $ jQuery Muchas librerias utilizan $ Referencia API ( interfaz de programación de aplicaciones ) . html
- 17. Core (Núcleo) Solución: Reemplazar $ por otro carácter var j = jQuery.noConflict(); j( “ #inputText ” ).val( “ Ejemplo jQuery.noConflict(); ” ); Referencia API ( interfaz de programación de aplicaciones ) . html
- 18. Effects (Efectos) Básicos: hide(), show(), toggle() Fading: fadeIn(), fadeOut(), fadeTo(), fadeToggle() Sliding: slideDown(), slideUp(), slideToogle() Custom: animate(), delay(), stop() …… Más efectos ? JQueryUI Referencia API ( interfaz de programación de aplicaciones )
- 19. 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(); Referencia API ( interfaz de programación de aplicaciones )
- 20. 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”); }); Referencia API ( interfaz de programación de aplicaciones )
- 21. 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. Referencia API ( interfaz de programación de aplicaciones ) *JSON : JavaScript Object Notation
- 22. Jquery Mobile Frameworkpara 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
- 23.
- 24.
- 25.