Taller de Jquery

of 13/13
Taller de jQuery 22 de Febrero de 2012 Jairo Chapela-Martínez
  • date post

    05-Dec-2014
  • Category

    Technology

  • view

    1.242
  • download

    2

Embed Size (px)

description

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.

Transcript of Taller de Jquery

  • 1. 22 de Febrero de 2012
  • 2. Librera en JavaScript Rpida, ligera y con muchas features Sirve para: Recorrer y manipular documentos HTML desde el navegador. Tratamiento de eventos. Animacin. AJAX.
  • 3. 14/01/2006 Anuncio de la primera versin. Creador: John Resig. En la actualidad: Existe la jQuery foundation. Equipo de ms de 10 personas. Proyectos paralelos: jQuery UI jQuery Mobile
  • 4. Para cargar la librera jQuery hay dos opciones: Opcin A: Descargar la librera de http://www.jquery.com Incorporarla al proyecto y cargarla con: Opcin 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. Se pueden obtener todas las versiones en http://code.jquery.com De cada versin existen dos variantes: Normal: jquery-1.9.1.js Compacta (minified): jquery-1.9.1.min.js Se recomienda la versin normal para la fase de desarrollo y la versin compacta para su uso en produccin.
  • 6. La funcin jQuery() o $() Sirve para seleccionar un elemento del documento HTML. Se pueden aplicar diversos mtodos sobre el resultado para llevar a cabo multitud de funcionalidades. Ejemplo: $(document).ready(function() { $("body").html("Hola caracola!"); });
  • 7. Cmo indicarle a la funcin $() qu elementos queremos seleccionar? * (para seleccionar todo) .clase #identificador Ejemplo: [atributo=valor] $("div#texto").fadeOut("slow"); :checked :disabled Un objeto (ej: document)
  • 8. La funcin $() 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 vaca: .empty() Procesar individualmente cada elemento: .each()
  • 9. DOM = Document Object Model Funciones de jQuery: Manipulacin de contenido: .append(), .appendTo(), .html(), Aplicacin de clases CSS: .addClass(), .removeClass(), .hasClass(), .toggleClass(), Acceso a atributos: .attr() Valores de campos en formularios: .val()
  • 10. AJAX = Asynchronous Javascript And XML Son peticiones asncronas al servidor HTTP desde una pgina ya cargada. En jQuery existe la funcin jQuery.ajax() Se le indica el URL del recurso a descargar. Es posible utilizar GET o POST (con sus variables). Mtodos .done(), .fail() y .always() para programar respectivamente comportamientos en caso de xito, error o en cualquier caso.
  • 11. La librera jQuery incorpora diversos efectos visuales: Efectos de fundido: .fadeIn(), .fadeOut(), ... Mostrar u ocultar: .show(), .hide(), .toggle(), ... Deslizar: .slideUp(), .slideDown(), ...
  • 12. Con jQuery se pueden atender diversos eventos: Movimientos de ratn: .click(), .hover(), ... Eventos de teclado: .keypress(), .keyup(), ... Foco de un componente: .focus(), Modificacin de un campo: .change()