Aprende JQuery y AJAX: de cero a experto

Name: Aprende JQuery y AJAX: de cero a experto
Rating: 4.0 (84 reviews)

Aprende JQuery y JQuery UI haciendo ejercicios prácticos con profesionales en el sector del desarrollo web

Highest Rated

Created byDavid Navarro, Oscar Morral, David Cabrerizo Martinez

Last updated 9/2018

Spanish

Spanish [Auto],

What you'll learn

Cambiar estilos de elementos con JQuery
Añadir eventos a los elementos
Animaciones
Efectos con Jquery
Cargar contenido dinámico con AJAX
Operaciones básicas y concatenación

Course content

8 sections • 63 lectures • 4h 0m total length

¿ Qué es JQuery ?1:46
En esta clase descubriremos qué es JQuery, JQuery UI y AJAX, librerías que utilizaremos para programar el frontend de nuestras páginas web.
Descargar e instalar Sublime Text1:17
En esta clase aprenderemos a descargar Sublime Text en nuestro Sistema Operativo.
Recomendamos este programa pero podéis utilizar cualquier otro.
Descargar JQuery2:10
En esta clase aprenderemos a descargar e implementar JQuery y JQuery UI en tu página web descargándolo.
Utilizar un CDN3:32
En esta clase aprenderemos a utilizar e incluir un CDN de JQuery en nuestra página web.
Declarar una variable1:23
En esta clase aprenderemos a declarar una variable en JQuery.
Mostrar variable en pantalla y la consola5:05
En esta clase vamos ha aprender a mostrar una variable al usuario por pantalla y a como mostrarla mediante la consola del navegador.
Operaciones básicas y concatenación3:50
En esta clase veremos las operaciones más básicas que nos permite hacer JQuery.

Seleccionar elementos por ID, clase o etiqueta3:21
En esta clase veremos cómo seleccionar elementos HTML por ID, clase o etiqueta en JQuery.
Seleccionar elementos por Atributo o tipo8:56
En esta clase veremos cómo seleccionar elementos HTML por atributo o tipo en JQuery.
Seleccionar elementos hijos5:07
En esta clase veremos la jerarquia en JQuery.
Selectores de filtraje4:21
En esta clase veremos los selectores y filtros en JQuery.

Evento Ready1:51
En esta clase veremos el evento Ready en JQuery.
Evento Click1:35
En esta clase veremos el evento Click en JQuery.
Evento Doble Click2:09
En esta clase veremos el evento Doble Click en JQuery.
Eventos con el Mouse3:52
En esta clase veremos todos los eventos MOUSE en JQuery.
Evento Hover1:49
En esta clase veremos el evento Hover en JQuery.
Evento Blur1:52
En esta clase veremos el evento Blur en JQuery.
Evento Focus3:19
En esta clase veremos el evento Focus en JQuery.
Evento On1:56
En esta clase veremos el evento On en JQuery.
Keyboard3:07
En esta clase veremos todos los eventos con el teclado en JQuery.
Submit1:59
En esta clase veremos el evento Submit en JQuery.
Change2:16
En esta clase veremos el evento Change en JQuery.
Resize1:35
En esta clase veremos el evento Resize en JQuery.
Scroll2:52
En esta clase veremos el evento Scroll en JQuery.

Efecto Hide / Show3:45
En esta clase veremos el efecto Show y Hide en JQuery.
Efecto Fade5:20
En esta clase veremos el efecto Fade en JQuery.
Efecto Slide3:12
En esta clase veremos el efecto Slide en JQuery.
Efecto Animate2:33
En esta clase veremos el efecto Animate en JQuery.
Parar efecto2:51
En esta clase veremos el efecto Stop en JQuery.
Callback. Ejecutar función al finalizar el efecto2:54
En esta clase veremos el Callback en JQuery.
Chaining. Múltiples efectos simultáneos.2:02
En esta clase veremos multiples efectos en JQuery.

Obtener ID, clase, texto o valor de un elemento5:39
En esta clase veremos como obtener el id, la clase, el texto o el valor de un elemento en JQuery.
Setear ID, clase, texto o valor de un elemento3:11
En esta clase veremos como setear el ID, la clase el texto o el valor de un elemento en JQuery.
Añadir nuevo código HTML4:35
En esta clase veremos como añadir nuevo código HTML a un elemento en JQuery.
Eliminar código HTML existente5:22
En esta clase veremos como utilizar la funcion remove en JQuery.
Interactuar con CSS3:22
En esta clase aprenderemos a modificar o interactuar con el css mediante JQuery.
Obtener dimensiones de elementos3:30
En esta clase aprenderemos a obtener las dimensiones de los distintos elementos con JQuery.

Métodos droppable y draggable (Arrastrable y soltable)15:43
En esta primera clase de Jquery UI aprenderemos los métodos Draggable y Droppable. Os dejámos los CDN de Jquery UI para que podaís utilizarlos en vuestras pruebas: <script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Y también como comentábamos en el vídeo os dejámos por aquí los tipos de cursor que tenemos en css:
cursor:context-menu; cursor:help; cursor:pointer; cursor:progress; cursor:wait; cursor:cell; cursor:crosshair; cursor:text; cursor:vertical-text; cursor:alias; cursor:copy; cursor:move; cursor:no-drop; cursor:not-allowed; cursor:all-scroll; cursor:col-resize; cursor:e-resize; cursor:ew-resize; cursor:n-resize; cursor:ne-resize; cursor:nesw-resize; cursor:ns-resize; cursor:nw-resize; cursor:nwse-resize; cursor:row-resize; cursor:s-resize; cursor:se-resize; cursor:sw-resize; cursor:w-resize; cursor:none;
Resizable6:53
Selectable6:29
En esta clase aprenderemos a utilizar el widget selectable y para ello necesitaremos una hoja de estilos que nos proporciona jquery UI que es esta:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
También el js de jquery UI que es:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Podéis descargar el material utilizado en clase.
Método Sortable (Ordenación de listas)1:40
En esta clase aprenderemos a utilizar el método sortable u ordenación de listas, es sencillo y útil para depende que objetivos.
Acordion2:11
Autocomplete3:59
En esta clase aprenderemos a utilizar la función autocomplete de Jquery Ui para autocompletar campos como por ejemplo un buscador.
Podéis descargar el material utilizado durante la clase.
Plugin Datepicker (Calendario)3:29
En esta clase aprenderemos a utilizar el widget datepicker y para ello necesitaremos una hoja de estilos que nos proporciona jquery UI que es esta:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
Y os dejamos también el código de configuración del datepicker.
Dialog4:18
Menu4:30
En esta clase aprenderemos a crear menús de forma sencilla con Jquery Ui.
Podéis descargar el material utilizado durante la clase.
Progress Bar (Barra de progreso)5:01
En esta ocasión vamos aprender a utilizar el widget de las barras de progreso. Creemos que ya habeís asimilado como funcionan los métodos de manera que no os los explicaremos en esta clase. Si teneis cualquier duda podeís preguntarnos!
Slider5:42
Spinner5:50
En esta clase aprenderemos a utilizar la función spinner de JQueryUI y a darle algunos usos.
Podéis descargar el material utilizado durante la clase.
Tabs2:00
Tooltip2:52
AddClass/RemoveClass6:04
En esta clase aprenderemos a utilizar la función addClass y removeClass de JqueryUI para eliminar o añadir clases a elementos.
Podéis descargar el material utilizado durante la clase.
Effects (Efectos)2:48
En esta clase vamos aprender a utilizar los efectos de jquery UI, como os comentabamos dejaremos en la descripción todos los efectos posibles para realizar con esta libreria: Blind,Bounce,Clip,Drop,Explode,Fade,Fold,Highlight,Puff,Pulsate,Scale,Shake,Size,Slide y Transfer.
Position4:56
En esta clase aprenderemos a utilizar la función Position, una utilidad de JQuery UI.
Podéis descargar el material utilizado en esta clase.

Requirements

Conocimientos básicos de HTML
Conocimientos básicos de CSS
Se recomienda saber JavaScript (nivel básico)
Se recomienda saber PHP (nivel básico)

Description

En este curso te enseñaremos todo lo necesario para que seas capaz de realizar una web profesional utilizando JQuery y JQuery UI, una de las librerías de Javascript más conocida.

Aprenderás desde lo más básico hasta lo más complicado, pero no te preocupes porque con nuestros ejercicios prácticos te será mucho más fácil de entender que si te soltásemos toda la teoría de golpe.

También veremos AJAX, que se utiliza principalmente para cargar contenido dinámicamente sin tener que recargar la página. AJAX es muy útil y da un toque increíble de calidad a las páginas web.

Finalizaremos el curso realizando una calculadora un tanto especial, pues contendrá animaciones, música...y un sinfín de cosas que nos permite hacer JQuery!

Who this course is for:

Personas que quieran poder realizar una página web con JQuery
Personas con interés por aprender cosas nuevas constantemente
Personas que por trabajo o hobby tengan que aprender JQuery

Aprende JQuery y AJAX: de cero a experto

What you'll learn

Explore related topics

Course content

Introducción a JQuery7 lectures • 19min

Selectores básicos4 lectures • 22min

Eventos13 lectures • 30min

Efectos7 lectures • 23min

Interacción con HTML6 lectures • 26min

AJAX4 lectures • 13min

JQuery UI17 lectures • 1hr 24min

PROYECTO FINAL: CALCULADORA5 lectures • 24min

Requirements

Description

Who this course is for: