Jquery

1,732 views

Published on

Introducción básica a Jquery

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,732
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery

  1. 1. Introducción a: Por: Oscar Ardila - @oscar3425
  2. 2. ¿Qué es Jquery? <ul><li>Es un framework desarrollado en Javascript.
  3. 3. Creada por John Resig, licenciado bajo GPL y MIT.
  4. 4. Básicamente sirve para “escribir Menos y hacer más” agilizando el desarrollo del lado del cliente dentro de las aplicaciones web. </li></ul>
  5. 5. Características <ul><li>Selección de elementos DOM.
  6. 6. Interactividad y modificaciones del árbol DOM.
  7. 7. Eventos.
  8. 8. Manipulación de la hoja de estilos CSS.
  9. 9. Efectos y animaciones.
  10. 10. AJAX.
  11. 11. Soporta extensiones. </li></ul>
  12. 12. ¿Cómo empiezo con Jquery? <ul>1. Descargar el framework desde la página oficial . 2. Cargamos el archivo a nuestro documento: <ul><script type=&quot;text/javascript&quot; src=&quot;../jquery.js&quot;></script> </ul>3.Creemos un objeto de tipo Jquery a partir de la referencia a document. Así: <ul>var x; x=$(document); </ul>4.Accedamos al método ready para entender como funciona: <ul>x.ready(funcion ); </ul></ul>
  13. 13. Explicación del código <ul>var x; // declaramos una variable por defecto se inicializará Undefined. x=$(document); // Creamos un objeto de tipo jquery a travéz de la referencia Document. x.ready(inicializarEventos); // Accedemos al método ready de x el cual se ejecutará tan pronto cargue el documento (recibe como parámetro la funcion que se quiere ejecutar) function inicializarEventos() { // Lo que queremos que se ejecute tan pronto cargue el método ready() } </ul>
  14. 14. ¿Cómo acceder a los elementos del documento? <ul>A través de selectores: <li>Selector de etiquetas: $(&quot;h1&quot;);
  15. 15. Selector por identificador: $(&quot;#idelemento&quot;)
  16. 16. Selector por clase: $(&quot;.miclase&quot;)
  17. 17. Selector por varias clases: $(&quot;.clase1.clase2&quot;)
  18. 18. Selector asterisco &quot;*&quot;: $(&quot;*&quot;)
  19. 19. Concatenar varios selectores distintos:
  20. 20. $(&quot;div,p&quot;) $(&quot;.clase1,.clase2&quot;) $(&quot;#miid,.miclase,ul) </li></ul>
  21. 21. Eventos <ul>Podemos ejecutar ciertas acciones ante las peticiones que hace algún usuario desdde su navegador. <li>click()
  22. 22. Sirve para generar un evento cuando se produce un clic en un elemento de la página.
  23. 23. dblclick()
  24. 24. Para generar un evento cuando se produce un doble clic sobre un elemento.
  25. 25. hover()
  26. 26. Esta función en realidad sirve para manejar dos eventos, cuando el ratón entra y sale de encima de un elemento. Por tanto espera recibir dos funciones en vez de una que se envía a la mayoría de los eventos.
  27. 27. Ver lista completa en la página oficial </li></ul>
  28. 28. ¿Cómo ejecutar alguna acción ante un evento? <ul>1. Debemos seleccionar algun elemento. $(“#elemento”) 2.Accedemos al evento que queremos gestionar. $(“#elemento”).click(ejecutaraccion) 3.Cuando creamos un evento debemos pasar como parámetro la función que queremos correr cuándo este se ejecute. En este caso debe estar definida la función function ejecutaraccion() {...} </ul>
  29. 29. Efectos con Jquery <ul>Podemos crear animaciones dentro de nuestro documento accediendo a los métodos del objeto Jquery que hemos creado. Ver lista completa de efectos </ul>
  30. 30. Introducción a: Por: Oscar Ardila - @oscar3425 $(document).ready(function() {alert(“ Gracias ”);}

×