Your SlideShare is downloading. ×
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jquery

1,539

Published on

Introducción básica a Jquery

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,539
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introducción a: Por: Oscar Ardila - @oscar3425
  • 2. ¿Qué es Jquery?
    • Es un framework desarrollado en Javascript.
    • 3. Creada por John Resig, licenciado bajo GPL y MIT.
    • 4. Básicamente sirve para “escribir Menos y hacer más” agilizando el desarrollo del lado del cliente dentro de las aplicaciones web.
  • 5. Características
    • Selección de elementos DOM.
    • 6. Interactividad y modificaciones del árbol DOM.
    • 7. Eventos.
    • 8. Manipulación de la hoja de estilos CSS.
    • 9. Efectos y animaciones.
    • 10. AJAX.
    • 11. Soporta extensiones.
  • 12. ¿Cómo empiezo con Jquery?
      1. Descargar el framework desde la página oficial . 2. Cargamos el archivo a nuestro documento:
        <script type=&quot;text/javascript&quot; src=&quot;../jquery.js&quot;></script>
      3.Creemos un objeto de tipo Jquery a partir de la referencia a document. Así:
        var x; x=$(document);
      4.Accedamos al método ready para entender como funciona:
        x.ready(funcion );
  • 13. Explicación del código
      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() }
  • 14. ¿Cómo acceder a los elementos del documento?
      A través de selectores:
    • Selector de etiquetas: $(&quot;h1&quot;);
    • 15. Selector por identificador: $(&quot;#idelemento&quot;)
    • 16. Selector por clase: $(&quot;.miclase&quot;)
    • 17. Selector por varias clases: $(&quot;.clase1.clase2&quot;)
    • 18. Selector asterisco &quot;*&quot;: $(&quot;*&quot;)
    • 19. Concatenar varios selectores distintos:
    • 20. $(&quot;div,p&quot;) $(&quot;.clase1,.clase2&quot;) $(&quot;#miid,.miclase,ul)
  • 21. Eventos
      Podemos ejecutar ciertas acciones ante las peticiones que hace algún usuario desdde su navegador.
    • click()
    • 22. Sirve para generar un evento cuando se produce un clic en un elemento de la página.
    • 23. dblclick()
    • 24. Para generar un evento cuando se produce un doble clic sobre un elemento.
    • 25. hover()
    • 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. Ver lista completa en la página oficial
  • 28. ¿Cómo ejecutar alguna acción ante un evento?
      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() {...}
  • 29. Efectos con Jquery
      Podemos crear animaciones dentro de nuestro documento accediendo a los métodos del objeto Jquery que hemos creado. Ver lista completa de efectos
  • 30. Introducción a: Por: Oscar Ardila - @oscar3425 $(document).ready(function() {alert(“ Gracias ”);}

×