22 de Febrero de 2012
●   Librería en JavaScript●   Rápida, ligera y con muchas “features”●   Sirve para:    –   Recorrer y manipular documentos...
●   14/01/2006 → Anuncio de la primera versión.●   Creador: John Resig.●   En la actualidad:    –   Existe la jQuery found...
Para cargar la librería jQuery hay dos opciones:• Opción A:      Descargar la librería de http://www.jquery.com      Inc...
●   Se pueden obtener todas las versiones en    http://code.jquery.com●   De cada versión existen dos variantes:    –   No...
●   La función jQuery() o $()    –   Sirve para seleccionar un elemento del        documento HTML.    –   Se pueden aplica...
●   ¿Cómo indicarle a la función $() qué    elementos queremos seleccionar?    –   * (para seleccionar todo)    –   .clase...
●   La función $() devuelve un objeto que puede    ser:    –   Un descriptor propio de un elemento del        documento.  ...
●   DOM = Document Object Model●   Funciones de jQuery:    –   Manipulación de contenido: .append(),        .appendTo(), ....
●   AJAX = Asynchronous Javascript And XML    –   Son peticiones asíncronas al servidor HTTP        desde una página ya ca...
●   La librería jQuery incorpora diversos efectos    visuales:    –   Efectos de fundido: .fadeIn(), .fadeOut(), ...    – ...
●   Con jQuery se pueden atender diversos    eventos:    –   Movimientos de ratón: .click(), .hover(), ...    –   Eventos ...
Taller de Jquery
Upcoming SlideShare
Loading in …5
×

Taller de Jquery

985 views

Published on

Presentación utilizada en el taller de Jquery, realizado el 22 de febrero de 2013 en la E.T.S.E.T, organizado por el GDG Vigo.

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

  • Be the first to like this

No Downloads
Views
Total views
985
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Taller de Jquery

  1. 1. 22 de Febrero de 2012
  2. 2. ● Librería en JavaScript● Rápida, ligera y con muchas “features”● Sirve para: – Recorrer y manipular documentos HTML desde el navegador. – Tratamiento de eventos. – Animación. – AJAX.
  3. 3. ● 14/01/2006 → Anuncio de la primera versión.● Creador: John Resig.● En la actualidad: – Existe la jQuery foundation. – Equipo de más de 10 personas.● Proyectos paralelos: – jQuery UI – jQuery Mobile
  4. 4. Para cargar la librería jQuery hay dos opciones:• Opción A:  Descargar la librería de http://www.jquery.com  Incorporarla al proyecto y cargarla con: <script src="jquery-1.9.1.min.js"></script>• Opción B: •Utilizar los CDN: http://code.jquery.com/jquery-1.9.1.min.js  http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  5. 5. ● Se pueden obtener todas las versiones en http://code.jquery.com● De cada versión existen dos variantes: – Normal: jquery-1.9.1.js – Compacta (minified): jquery-1.9.1.min.js● Se recomienda la versión normal para la fase de desarrollo y la versión compacta para su uso en producción.
  6. 6. ● La función jQuery() o $() – Sirve para seleccionar un elemento del documento HTML. – Se pueden aplicar diversos métodos sobre el resultado para llevar a cabo multitud de funcionalidades. Ejemplo: $(document).ready(function() { $("body").html("Hola caracola!"); });
  7. 7. ● ¿Cómo indicarle a la función $() qué elementos queremos seleccionar? – * (para seleccionar todo) – .clase – #identificador Ejemplo: – [atributo=”valor”] $("div#texto").fadeOut("slow"); – :checked – :disabled – Un objeto (ej: document)
  8. 8. ● La función $() devuelve un objeto que puede ser: – Un descriptor propio de un elemento del documento. – Una lista de dichos descriptores.● Para manejar esas listas: – Acceso al primer elemento de la lista: .first() – Comprobar si la lista está vacía: .empty() – Procesar individualmente cada elemento: .each()
  9. 9. ● DOM = Document Object Model● Funciones de jQuery: – Manipulación de contenido: .append(), .appendTo(), .html(), … – Aplicación de clases CSS: .addClass(), .removeClass(), .hasClass(), .toggleClass(), … – Acceso a atributos: .attr() – Valores de campos en formularios: .val()
  10. 10. ● AJAX = Asynchronous Javascript And XML – Son peticiones asíncronas al servidor HTTP desde una página ya cargada.● En jQuery existe la función jQuery.ajax() – Se le indica el URL del recurso a descargar. – Es posible utilizar GET o POST (con sus variables). – Métodos .done(), .fail() y .always() para programar –respectivamente– comportamientos en caso de éxito, error o en cualquier caso.
  11. 11. ● La librería jQuery incorpora diversos efectos visuales: – Efectos de fundido: .fadeIn(), .fadeOut(), ... – Mostrar u ocultar: .show(), .hide(), .toggle(), ... – Deslizar: .slideUp(), .slideDown(), ...
  12. 12. ● Con jQuery se pueden atender diversos eventos: – Movimientos de ratón: .click(), .hover(), ... – Eventos de teclado: .keypress(), .keyup(), ... – Foco de un componente: .focus(), … – Modificación de un campo: .change()

×