jQuery

Personas con conocimientos básicos de Javascript, HTML y CSS que quieren conocer una de las librerías más utilizadas en la actualidad para dotar de funcionalidades 2.0 a sus páginas web.

Al finalizar el curso, el alumno dispondrá de conocimientos para:

• Utilizar la librería jQuery y aprovechar las características que ofrece.
• Hacer uso de los selectores para aplicar acciones sobre elementos específicos del DOM.
• Manipular los elementos del DOM.
• Capturar diferentes eventos sobre los objetos del DOM y aplicar acciones frente a estos.
• Realizar peticiones AJAX mediante la librería jQuery y procesar la respuesta del servidor.
• Aplicar animaciones a los elementos del DOM.

1. Introducción a jQuery
Introducción a jQuery.
Introducción
Historia
¿Cuál es el uso principal de JavaScript?
Qué es jQuery
¿Por qué utilizar jQuery?
Qué necesito para programar con jQuery
Navegadores Compatibles
Cómo incluir jQuery en nuestra página
Alojando la librería en nuestro servidor
Utilizando la librería desde un alojamiento externo
¿Qué opción debo utilizar?
2. Sintaxis Básica
Sintaxis Básica de jQuery
Sintaxis Básica
¿Por qué es necesario que el DOM haya sido cargado?
Esperar a que el documento haya sido renderizado
Capturando el evento "ready" del documento
Ejemplo
Utilizar el "atajo" $(function())
La función jQuery() o su alias $()
Sintaxis Básica de comandos jQuery
Estructura de un comando de jQuery
Función jQuery
Un selector
Un método de la librería
Parámetros del método
Encadenar varios métodos
Interoperabilidad con otras librerías
Activación del modo no conflicto
Activación básica
Activación con reasignación del alias
jQuery Migrate
3. Selectores Básicos
Selectores Básicos
Introducción
¿Qué es un selector?
Comprobar una Selección
Método 1. Mensaje de alerta con el número de elementos
Método 2. Aplicar un atributo CSS a los elementos seleccionados
Método 3. Mostrar por consola el resultado de la selección
Selectores básicos: $("elemento"), $("#identificador") y $(".clase")
Selector por tipo de elemento – $("elemento")
Selector por identificador de elemento – $("#identificador")
Selector por clase – $(".clase")
Combinar selectores
Combinaciones básicas
Combinación de selector de tipo de elemento y de selector de clase
Combinación de selector por identificador y de selector de clase
Combinación de varios selectores de clase
Selectores múltiples – $("selector1, selector2, selectorN")
Selectores Jerárquicos
Selector Hijo $("div > table")
Selector Descendiente $("div table")
Selector Contiguo $("div + table")
Selector Próximo Hermano $("div ~ table")
Guardar Selecciones
Uso de la función jQuery() con un contexto
4. Selectores de Filtrado I
Selectores de Filtrado I
Selectores de Filtrado por Atributo
Comparador por atributo asignado [atributo]
Comparador por coincidencia del atributo [atributo="valor"]
Comparador por comienzo del atributo [atributo^="valor"]
Comparador por final del atributo [atributo$="valor"]
Comparador por prefijo en el atributo [atributo|="valor"]
Comparador en contenido del atributo [atributo*="valor"]
Comparador por palabra en el atributo [atributo~="valor"]
Comparador por distinto al atributo [atributo!="valor"]
Comparador por múltiples atributos [atributo="valor"][atributo2="valor2"]
Selectores de Filtrado Básico
Selector :first
Selector :last
Selector :eq(indice)
Selector :gt()
Selector :lt()
Selector :even
Selector :odd
Selector :animated
Selector :focus
Selector :header
Selector :lang()
Selector :not()
Selector :root
Selector :target
5. Selectores de Filtrado II
Selectores de Filtrado II
Selectores de Filtrado Jerárquico
Selector :first-child
Selector :last-child
Selector :first-of-type
Selector :last-of-type
Selector :nth-child()
Selector :nth-last-child()
Selector :only-child
Selector :only-of-type
Selectores de Filtrado por Contenido
Selector :contains()
Selector :empty
Selector :has(selector)
Selector :parent
Selectores de Filtrado por Visibilidad
Selector :hidden
Selector :visible
Selectores de Filtrado por Elementos de Formulario
Selectores por tipo de elemento de formulario
Selector :checked
Selector :disabled
Selector :enabled
Selector :selected
6. Transversal
Transversal
Introducción
Acceso transversal a elementos del DOM
Acceso a elementos predecesores (parents)
Método .parent()
Método .parents()
Método .parentsUntil()
Método .offsetParent()
Método .closest()
Acceso a elementos descendientes (children)
Método .children()
Método .find()
Acceso a elementos hermanos (siblings)
Método .next()
Método .nextAll()
Método .nextUntil()
Método .prev()
Método .prevAll()
Método .prevUntil()
Método .siblings()
Métodos de filtrado
Método .eq()
Método .filter()
Método .filter() con selector como parámetro
Método .filter() con función como parámetro
Método .filter() con elemento como parámetro
Método .filter() con objeto jQuery como parámetro
Diferencias entre los método .find() y .filter()
Método .first()
Método .has()
Método .is()
Método .last()
Método  .not()
Método  .slice()
Iteraciones: .each y .map
Iteraciones con el método .each() o jQuery.each()
Método .each()
Método jQuery.each()
Iteraciones con el método .map() o jQuery.map()
Método .map()
Método jQuery.map()
7. Manipulación del DOM
Manipulación del DOM
Introducción
Modificar elementos del DOM y sus propiedades
Métodos genéricos de modificación de Atributos
Método .attr()
Método .removeAttr()
Métodos específicos de modificación de Atributos
Método .html()
Método .text()
Método .val()
Método .height()
Método .innerHeight()
Método .outerHeight()
Método .width()
Método .innerWidth()
Método .outerWidth()
Método .offset()
Método .position()
Método .scrollLeft()
Método .scrollTop()
Clases y Estilos CSS
Método .addClass()
Método .hasClass()
Método .removeClass()
Método .toggleClass()
Método .css()
Inserción y copiado de elementos del DOM
Creación de elementos con la función $()
Crear elementos dinámicamente con la función $()
Creación de elementos con métodos específicos
Método .after()
Método .insertAfter()
Método .before()
Método .insertBefore()
Método .append()
.appendTo()
Método .prepend()
Método .prependTo()
Método .wrap()
Método .wrapAll()
Método .wrapInner()
Método .clone()
Eliminación de elementos del DOM
Métodos específicos para la eliminación de elementos de la página
Método .detach()
Método .empty()
Método .remove()
Método .replaceAll()
Método .replaceWith()
Método .unwrap()
8. Eventos
Eventos
Introducción
Conceptos básicos sobre eventos en jQuery
Objetos de tipo Evento
Propiedades estandarizadas de un objeto de tipo Evento
Captura de Eventos con jQuery
Captura de un evento con métodos directos
Captura de eventos con el método .on()
Captura de eventos con el método .one()
Captura de eventos con el método .bind()
Captura de eventos con el método .live()
Captura de eventos con el método .delegate()
Prevenir comportamiento por defecto del evento
Eventos disponibles en jQuery
Eventos del ratón
Evento click
Evento dblclick
Evento mousedown
Evento mouseup
Evento mouseenter
Evento mouseleave
Evento mousemove
Evento mouseout
Evento mouseover
Método hover()
Método toggle()
Eventos del teclado
Evento keydown
Evento keypress
Evento keyup
Eventos de elementos de formularios
Evento change
Evento blur
Evento select
Evento submit
Evento focusin
Evento focusout
Evento focus
Eventos del navegador
Evento ready
Evento resize
Evento scroll
Evento unload
Cancelación de eventos
Método .die()
Método .unbind()
Método .undelegate()
Método .off()
Forzado de eventos
Métodos directos
Método .trigger()
Creación de eventos personalizados
9. AJAX
AJAX
Introducción
Conceptos Básicos
Servidor web
Configurar un entorno WAMP
¿Cómo funciona un servidor web?
Peticiones GET o peticiones POST
Tipos de Datos
Formato JSON
¿Por qué utilizar JSON?
Estructura
Política de Seguridad en peticiones AJAX
El método $.ajax() para realizar solicitudes asíncronas
Opciones del método $.ajax
Opciones Principales
Opciones de Control de la respuesta
Otras opciones interesantes
Establecer las opciones por decto con el método $.ajaxSetup()
Métodos abreviados para peticiones Ajax
Método .post()
Envío de un formulario con el método $.post()
Método .get()
Cargar un listado de datos a partir de una petición $.get()
Método .getJSON()
Método .getScript()
Método .load()
10. Efectos y Animaciones
Efectos y Animaciones
Introducción
Cuándo utilizar animaciones
Opciones comunes de las animaciones
Mostrar y ocultar elementos
Método .show()
Método .hide()
Método .toggle()
Modificando la opacidad
Métodos .fadeIn() y .fadeOut()
Método .fadeTo()
Método .fadeToggle()
Creando animaciones personalizadas
Parámetros del método .animate()