jQuery y ASP

6,639 views
6,470 views

Published on

Fundamentos de jQuery

Published in: Devices & Hardware
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,639
On SlideShare
0
From Embeds
0
Number of Embeds
1,271
Actions
Shares
0
Downloads
89
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery y ASP

  1. 1. jQuery y ASP.NET: Una nueva experiencia de usuario<br />Julio Cesar Avellaneda Sua<br />http://julitogtu.wordpress.com<br />CoreGroupBogotaDotNet<br />MCP – MCC<br />@julitogtu<br />
  2. 2. jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>jQuery es un framework JavaScript.
  3. 3. Acceder al DOM (DocumentObjectModel)
  4. 4. Modificar el look de las páginas
  5. 5. Modificar el contenido de las páginas
  6. 6. Manejar eventos
  7. 7. Animaciones
  8. 8. Peticiones Ajax</li></li></ul><li>jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Sistema de plugins
  9. 9. Lenguaje cliente
  10. 10. No es invasivo
  11. 11. Compatibilidad con navegadores
  12. 12. Liviano
  13. 13. Sencillo de utilizar</li></li></ul><li>jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Cómo incluir código JavaScript:</li></ul><script type="text/javascript"><br />alert('Mensaje usando JavaScript');<br /></script><br /><ul><li>Cómo referenciar jQuery:</li></ul><script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script><br />
  14. 14. jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Alias para trabajar con jQuery:</li></ul>jQuery == $<br /><ul><li>Verificar estado de página:</li></ul>$(function(){<br />//código<br />})<br />
  15. 15. jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Selectores: permiten determinar con cual o cuales elementos se va a trabajar. Si conoces CSS ya sabes algunos selectores de jQuery.</li></li></ul><li>jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Filtros: permiten realizar filtros sobre los selectores</li></li></ul><li>jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Atributos: Características de los elementos HTML.
  16. 16. Agregar atributo simple:</li></ul>$(“selector”).attr(“clave”,”valor”);<br /><ul><li>Agregar múltiples atributos:</li></ul>$(“selector”).attr({clave: “valor”, clave: “valor”})<br /><ul><li>Remover atributo:</li></ul>$(“selector”).removeAttr(“clave”);<br />
  17. 17. jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Clases: Conjunto de estilos
  18. 18. Agregar clase:</li></ul>$(“selector”).addClass(“nombreclase”);<br /><ul><li>Remover clase:</li></ul>$(“selector”).removeClass(“nombreClase”);<br /><ul><li>Remover todas las clases (Sin parámetros):</li></ul>$(“selector”).removeClass();<br />
  19. 19. jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Estilos css
  20. 20. Agregar estilo:</li></ul>$(“selector”).css(“propiedad”,”valor”);<br /><ul><li>Agregar múltiples estilos:</li></ul>$(“selector”).css({<br />“propiedad” : ”valor”,<br />“propiedad” : “valor”<br />});<br />
  21. 21. jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Eventos: Agregar un manejador a un evento de un elemento del DOM.
  22. 22. Método corto:</li></ul>$(“selector”).evento(function(){<br />//Código<br />})<br /><ul><li>Múltiples eventos:</li></ul>$(“selector”).bind({<br />evento1: function(){….},<br />evento2: funciton(){….}<br />})<br />
  23. 23. jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Animaciones: Efectos/métodos sobre los elementos.
  24. 24. Fading: Trabajan con la opacidad de los elementos</li></ul>fadeIn() – fadeOut() – fadeToggle()<br /><ul><li>Sliding: Deslizando elementos</li></ul>slideDown() – slideUp() – slideToggle()<br /><ul><li>Ocultando/Mostrando elementos:</li></ul>hide() – show() – toggle()<br />
  25. 25. jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Llamados Ajax:
  26. 26. Load: Permite realizar el cargue de un archivo HTML en un elemento.
  27. 27. El HTML debe estar en el mismo dominio.
  28. 28. Permite cargar solo una parte del HTML
  29. 29. Solo se copia el contenido HTML, todo código JavaScript o jQuery no estará disponible.</li></li></ul><li>jQuery y ASP.NET: Una nueva experiencia de usuario<br /><ul><li>Página oficial: http://jquery.com/
  30. 30. jQuery UI: http://jqueryui.com/
  31. 31. jQuery Tools: http://flowplayer.org/tools</li></li></ul><li>jQuery y ASP.NET: Una nueva experiencia de usuario<br />GRACIAS!<br />

×