Todo jQuery... de novato a experto
4.3 (36 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
736 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Todo jQuery... de novato a experto to your Wishlist.

Add to Wishlist

Todo jQuery... de novato a experto

Aprende desde lo básico de jQuery hasta hacer aplicaciones con esta sorprendente librería
4.3 (36 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
736 students enrolled
Last updated 5/2017
Spanish
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 27 hours on-demand video
  • 10 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Tener conocimiento de las funciones de jQuery
  • Instalar la librería jQuery en su computadora
  • Aplicar diferentes formas de seleccionar los elementos HTML para modificarlos, eliminarlos o crear nuevos
  • Conocer los diferentes métodos dentro de jQuery.
  • Curso completo de jQuery
  • Curso completo de jQuery UI
  • Curso completo de aplicaciones con jQuery
  • Curso completo de jQuery Mobile
View Curriculum
Requirements
  • Tener conocimientos básicos de HTML, JavaScript y CSS
  • El alumno aprenderá a instalar la librería jQuery en su computadora
Description

La librería JavaScript más utilizada en el mundo es jQuery, porque nos da una sorprendente potencia para programar páginas dinámicas compatibles con todos los navegadores,!hasta con Internet Explorer!

En este curso revisaremos desde la instalación de la librería, su conexión a las páginas html, su sintaxis básica, los selectores, los eventos para manejar el ratón, el teclado y eventos del sistema.

Estudiaremos la forma de modificar las dimensiones del modelo de caja de los elementos HTML con los métodos (mas intuitivos de jQuery) y poder cargar archivos planos o ejecutar archivos de lenguaje de servidor, como PHP.

También analizaremos los efectos como slide, animate, fadein entre muchos otros. entre muchas otras funcionalidades, como cambiar una clase o una propiedad CSS, añadir o borrar elementos HTML y modificar las dimensiones de un evento.

Incluye cuatro cursos:

  • jQuery básico o "core"
  • jQuery por ejemplos
  • jQuery UI (user interface)
  • jQuery mobile (para dispositivos móviles)

y ejemplos para hacer:

  • Una galería de imágenes
  • Una galería 3D
  • Un juego de memoria
  • Juegos de arratrar y soltar
  • Un drop-menu
  • Un tooltips con imágenes
  • Efectos de rollovers

Todos los videos son completamente descargables.

Who is the target audience?
  • Desarrolladores y diseñadores de páginas web
Compare to Other Web Development Courses
Curriculum For This Course
231 Lectures
27:01:07
+
Bienvenido al curso
1 Lecture 17:32
Estoy para servirte en:
facebook.com/arceanguiano
TT: @fjarce2000
Preview 17:32
+
Descarga e instalación de jQuery
4 Lectures 30:41
La librería JavaScript más utilizada  en el mundo en jQuery, porque nos da una sorprendente potencia para programar páginas dinámicas compatibles con todos los navegadores,!hasta con Internet Explorer!
Preview 03:37

En este curso revisaremos desde la instalación de la librería, su conexión a las páginas html, su sintaxis básica, los selectores, los eventos para manejar el ratón, el teclado y eventos del sistema.
Hola, mundo
09:08

También analizaremos los efectos como slide, animate, fadein entre muchos otros. entre muchas otras funcionalidades, como cambiar una clase o una propiedad CSS, añadir o borrar elementos HTML y modificar las dimensiones de un evento.
¿Dónde escribir el código?
08:07

Desde la versión 5.5 de Dreamweaver tenemos la integración para escribir jQuery con código sugerido y verificación de sintaxis, lo cual nos ayudará a evitar errores de captura y a escribir más rápido y mejor código.
jQuery y Dreamweaver
09:49

Introducción a jQuery
6 questions
+
Selectores
8 Lectures 48:20
Uno de los puntos más fuertes en los jQuerys, es el hecho que podemos mdificar las clases de estilos en cascada en tiempo de ejecución. Es decir, recibir o detectar un evento y modificar el estilo de algún elemento de la página, lo cual nos dará enormes posibilidades de desarrollar efectos impactantes y a la vez ligeros.
Preview 11:55

Otro punto muy importante (por eso se llama J-Query o querys para JavaScript) es el hecho que podemos seleccionar cualquier elemento dentro de la estructura DOM y manipularlo a nuestro antojo.
Seleccionar una etiqueta y el selector "this"
06:28

Otra enorme herramienta de programación será el poder seleccionar a uno o más elementos del documento DOM por medio de algún argumento dentro de la etiqueta del elemento. No olvide bajar las imágenes y el archivo html para realizar este ejercicio.
Seleccionar un objeto por medio de un atributo
08:27

El evento ready() nos permitirá sincronizar nuestro código cuando los elementos de la página hayan terminado de crearse. Es el equivalente al evento onload()  que se ejecuta en JavaScript
El método ready
03:29

Si deseamos modificar a todos los elementos de un documento DOM, contamos con el comodín asterisco (*) con el cual podremos modificar a todo el documento.
El selector universal, asterisco (*)
04:14

También podemos crear clases de estilos en cascada y asociarla a un elemento en tiempo de ejecución, es decir, puede ser que la regla no exista y crearla por medio de un controlador de evento o listener, ya sea por medio de un botón o el movimiento del cursor del ratón.
Seleccionar una etiqueta con una clase CSS
05:28

Otro selector de elementos, que nos puede ser de mucha utilidad, es el de first, el cual, como su nombre nos lo indica, selecciona el primer elementos de una lista o de un conjunto de párrafos.
Seleccionar el primer elemento con first
02:31

Otros selectores, que nos permitirá manejar, por ejemplo, tablas o listas, es de pares y nones, lo cual nos permite alternar estilos. No olvide bajar la tabla que se anexa al video para que realice su ejercicio.
Seleccionar entre elementos pares y nones
05:48

Selectores en jQuery
12 questions
+
Eventos
6 Lectures 27:29
Una de las enormes ventajas que tenemos con jQuery son los eventos. Dos de ellos, que funcionan a la perfección, son el click y el doble click, que lo podemos aplicar a cualquier elemento del documento, como puede ser una imagen, un párrafo o una tabla.
Preview 05:36

Otros eventos que son muy utilizados en las animaciones y efectos que podemos realizar con jQuery son mouseenter y mouseleave, que nos permiten realizar efectos "rollover" y "rollout". Estos efectos los podemos aplicar tanto en imágenes, textos y otros elementos del documento.
Los eventos mouseenter y mouseleave
02:40

Los eventos mousedown y mouseover nos permitirán detectar cuando el apuntador del ratón izquierdo está abajo o cuando arriba. Con ellos podremos hacer muchos efectos interesantes, ya que los podemos aplicar a cualquier elemento de la página.
Los eventos mousedown y mouseup
01:33

El método hover() toma dos funciones tipo callback y es la combinación de los métodos mouseenter() y mouseleave().

La primer función se ejecuta cuando el apuntador del ratón entra al elemento HTML y la segunda función se activa cuando el apuntador del ratón sale del elemento.

$("#p1").hover(function(){
  alert("Entró!");
  },
  function(){
  alert("Salió!");
});

El evento hover
05:18

Focus 

El evento focus() se dispara cuando el apuntador del ratón entra a una caja de un formulario HTML. La función se ejecuta cuando tenemos el "foco" sobre el campo:

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
}); 

Blur

El evento blur() se dispara cuando el apuntador del ratón sale de una caja de un formulario HTML. La función se ejecuta cuando perdemos el "foco" sobre el campo:

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});
Los eventos focus y blur
08:09

keydown()

El evento keydown() se dispara cuando pulsamos una tecla dentro de una caja de un formulario HTML.

$("input").keydown(function(){
  $("input").css("background-color","yellow");
});

keyup()

El evento keyup() se dispara cuando levantamos la tecla de una caja de un formulario HTML.

$("input").keydown(function(){
  $("input").css("background-color","#ffffff");
});
Los eventos keydown y keyup
04:13

Eventos en jQuery
10 questions
+
Efectos con jQuery
11 Lectures 59:55
Dentro de los efectos con los que contamos en jQuery, se encuentra el de mostrar y oculpar cualquier elementovisual del documento DOM. Podremos hacer en forma sencilla animaciones que serían imposibles con sólo HTML.
Preview 04:09

El efecto de toggle nos permitirá ocultar y mostrar un elemento del documento DOM de manera muy sencilla, permitiéndonos  hacer efectos interesantes con muy poco código.
Ocultar y mostrar con toggle
03:43

También contamos con el efecto de desvanecimiento, conocidos como fade-in y fade-out. Como parámetro podemos indicarle la velocidad del efecto con parámetros "slow" y "fast", asi como en número de milisegundos.
Desvanecido con fadeIn, fadeOut
08:25

Otro efecto que podremos realizar con casi nada de código, es del deslizamiento de cualquier elemento hacia arriba y hacia abajo. Al igual que los otros efectos, podremos controlar su velocidad con los parámetos "slow" y "fast", asi como manejar el tiempo en milisegundos.
Efecto slideUp y slideDown
06:59

El efecto animate es uno de los más poderosos en jQuery, pode podemos tomar una o varias atributos de un elementos y animarlos.
Efecto animate
06:43

Con el efecto animate pomeos animar más de una propiedad. De hecho podemos animar casi cualquier propiedad, a excepción de la propiedad de color, donde necesitamos otra librería. Si deseamos animar alguna propiedad css con guión, por ejemlo padding-top, la tenemos que convertir a CamelCase, como paddingTop.

Efecto animate con varias propiedades
05:16

El efecto animate lo podemos manejar con valores relativos, es decir, pequeños incrementos que se pueden sumar o restar cuando tenemos alguna propiedad numérica. Usaremos los operadores += para incrementar y -= para decrementar.
Efecto animate valores relativos
03:04

Por medio del método animate, podemos tener una pila de animaciones y jQuery las ejecutaría de una por una, con lo cual podemos hacer animaciones más elaboradas.
Efecto animate en una pila o queue
07:24

El método stop(), en jQuery, se utiliza para detener una animación o efecto antes de que se termine.

El método stop () funciona para todas las funciones de efectos jQuery, incluyendo animaciones de deslizamiento, la decoloración ylas animaciones customizadas.

El parámetro opcional (StopAll) especifica si también la cola de animación debe ser detenida o no. El valor predeterminado es falso, lo que significa que sólo la animación activa se detendrá, permitiendo que las animaciones en cola para ser realizado posteriormente.

El parámetro opcional
goToEnd especifica si o no para completar la animación actual inmediatamente. El valor predeterminado es false.

Así que, por defecto, el método stop () mata a la animación actual que se realiza en el elemento seleccionado.

Detener una animación con stop
05:35

Todos los efector tienen como parámetro una función de callback, la cual se ejecuta cuando el efecto termina, con la cual podemos enlazar varios efectos, haciendo efectos más elaborados de manera muy sencilla e intuitiva.
Funciones de callback en animaciones
03:14

Por lo general escribimos las sentencias jQuery una a la vez (una después de la otra).

Sin embargo, existe una técnica llamada encadenamiento, que nos permite ejecutar varios comandos con jQuery, uno tras otro, en el mismo elemento o elementos.

Sugerencia: De esta manera, los navegadores no tienen que encontrar el mismo elemento  más de una vez.

Para encadenar una acción, sólo tiene que añadir la acción a la acción anterior y unirlas por medio de un punto.


Cuando encadenamos métodos en jQuery, la línea de código puede ser bastante larga. Sin embargo, jQuery no es muy estricto acerca de la sintaxis: puede darle formato como usted desee, incluyendo saltos de línea y sangrías.
Encadenamiento de métodos y animaciones
05:23

jQuery básico: efectos
16 questions
+
jQuery y HTML
6 Lectures 42:06
Una parte muy importante de jQuery, es la posibilidad de manipular el DOM.

jQuery viene con un montón de métodos DOM relacionados, lo que hace que sea fácil de acceder y manipular los elementos y atributos en cualquier página web.

Leer el contenido - text (), html () y val()

Tres simples, pero útiles, métodos jQuery para la manipulación de DOM son:

  text () - Establece o devuelve el contenido de texto de los elementos seleccionados
  html () - Establece o devuelve el contenido de los elementos seleccionados (incluyendo el formato HTML)
  val () - Establece o devuelve el valor de los campos del formulario

Preview 06:58

Aunque ya tenemos en JavaScript una función similar (innerHTML) en jQuery tenemos el método html() que nos permite leer y escribir el código html de un objeto dentro del DOM.

Este método no funciona para documentos XML. 

Si el selector regresa más de un elemento, sólo el primer elemento regresa su código HTML.

Esta función puede presentar algunos problemas con el navegador Internet Explorer, en versiones antigüas, ya que se basa en el comando innerHTML de JavaScript:

Leer y escribir código HTML
06:53

Desde jQuery, podemos modificar a nuestro gusto cualquier valor de cualquier etiqueta de un documento DOM en tiempo de ejecución. Primero debemos identificar el objeto, ya sea por medio de un identificador, etiqueta o clase, y luego utilizar el método attr().

Si el selector regresa más de un elemento, sólo se modificará el primero.

Modificar los atributos con el método attr()
07:48

Otra forma que tiene el jQuery para interactura con HTML es que podemos leer y escribir en las cajas de texto de los formularios. Esto lo realizamos por medio de método val().
Leer el valor de un campo de texto con val()
04:47

Otra de las funciones que tiene el método val() es poder escribir en cajas de texto (input) dentro de las formas. No solo podemos leer y escribir en las cajas de input, si no en cualquier elemento de una forma.
Escribir en una caja de texto con val()
05:32

El método val() nos permite leer inforación de los comobo box, ya sea que nos regrese un sólo valor o que nos regren múltiples valores . En este último caso, necesitamos interpretar el resultado como un arreglo. Si ningún valor ha sido seleccionado, regresa un valor null.
Leer los resultados de un combo por medio del método val()
10:08

jQuery básico: manejo del HTML
6 questions
+
jQuery: DOM, Añadir y remover elementos en una página web
6 Lectures 47:03

Asi como tenemos el método append(), que añade texto al final de un párrafo, tenemos el método prepend() para añadirlo al inicio. Aunque es un poco menos común su uso, aqui ponemos un ejemplo del mismo:
Añadir texto al inicio de un objeto con prepend()
04:04

Otra funcionalidad muy práctica en jQuery es que podemos añadir elementos antes y depués de otro elemento encontrado. esto lo podemos hacer por medio de los métodos after() y before(). En el siguiente ejemplo añadiremos un párrafo, un botón y una imagen, los cuales no existen en la página inicial:
Añadir elementos con after() y before()
11:41

Existen dos métodos en jQuery que nos permiten eliminar elementos de una página web. Estos son:

  • remove(): Elimina los subnodos y el nodo contenedor.
  • empty(): Elimina los subnodos o elementos hijos, pero no al contenedor. Sólo lo vacía.
Eliminar elementos con remove() y empty()
11:01

Una herramienta formidable para hacer nuestras páginas dinámicas es el poder añadir estilos en cascada en tiempo de ejecución. Para ello contamos con el comando addClass().

Preview 07:33

Otro método que nos va a hacer de mucha utilidad es poder eliminar clases completas de un elemento del documento DOM, ya sea en tiempo de ejecución o en tiempo de autor. Para ello utilizamos el método removeClass().
Remover los estilos de un elemento con removeClass()
06:23

jQuery básico: DOM manipulación de nodos
6 questions
+
Modificar las dimensiones con jQuery
3 Lectures 13:41
El manejo de las dimensiones del modelo de caja en jQuery es muy claro, ya que cada una de las dimensiones tiene su propio método, simplificándonos la vida, al contrario de HTML, que parece un tema para iniciados.
Preview 03:26

  • width(): el ancho del elemento sin padding, border ni margen.
  • height(): la altura del elemento sin padding, border ni margen.
  • innerWidth(): el ancho del elemento con el padding,pero sin el border ni margen.
  • innerHeight(): la altura del elemento con el padding,pero sin el border ni margen.
  • outerWidth(): el ancho del elemento con el padding y el borde, pero sin el margen.
  • outerHeight(): la altura del elemento con el padding y el borde, pero sin el margen.
  • outerWidth(true): el ancho del elemento con el padding, el borde y el margen.
  • outerHeight(true): la altura del elemento con el padding, el borde y el margen.
Los métodos para manejar las dimensiones del modelo de caja
04:04

Podemos cambiar las dimensiones de un elemento en web por medio de los métodos width y height, asi como cambiar dichos atributos por medio del métod attr. Estos métodos no tienen un efecto de animación.
Modificar las dimensiones por medio de width y height
06:11

jQuery básico: Modificar las dimensiones
5 questions
+
jQuery y AJAX
6 Lectures 46:07
AJAX es un conjunto de tecnologías tradicionales, como el JavaScript, el HTML y el XML, para crear aplicaciones asíncronas. Es el acrónimo de Asynchronous JavaScript And XML. Esta tecnología permite mandar y recibir información (entiéndase datos) desde el background del navegador por medio del objeto XMLHTTPRequest, el cual se encuntra implementado desde 2004 en todos los principales navegadores (incluso en Internet Explorer).
Preview 04:39

El método load() es simple, pero poderoso. Nos permitirá leer una archivo en el servidor (en este caso de texto) y ponerlo en cualquier elemento de nuestra página.

Su sintaxis básica es:

$(selector).load(URL,data,callback);

Cargar archivos de texto con load()
08:55

En la función load(), que nos sirve para cargar archivos externos, tendremos un segundo parámetro, que es una función quese ejecuta automáticamente cuando el proceso de carga termina. Estas funciones son mejor conocidas como "callback".

En esta función tendremos tres parámetros:

  • respuesta- contiene el resultado de la carga, si esta fue exitosa
  • estado -regresa una cadena con el estado de la carga: "success" o "error"
  • xhr - contiene el objeto XMLHttpRequest
La función de callback en la carga de texto con load()
06:16

Con los métodos get y post podremos solicitar información a una página de internet que utiliza algun lenguaje intermedios en el servidor, como pueden ser PHP, Coldfusion o ASP.

  • GET - Solicita la información de una página determinada. Puede quedar la información en la memoria caché del navegador.
  • POST - Envía la información a ser procesada. Nunca se guarda en memoria caché la información
El comando GET en jQuery
06:40

El método pos enviía la información por medio de los bloques Multipurpose Internet Mail Extensions o MIME  (en español "extensiones multipropósito de correo de internet") y en jQuery nunca guarda la información en el caché del navegador.

El primer parámetro que ncesitamos es la URL, posteriormente se envían los parámetros como si ffueran un objeto hecho al vuelo (con llaves) y porteriormente, y de forma opcional, tenemos una función de callback que se ejecuta scuando se termina la carga de nuestro archivo.
El método POST para enviar parámetros desde jQuery
10:45

Para tener completo control en el envío y recepción de datos, podemos utilizar el método ajax(), el cual es más completo, pero al tener tantos parámetros (32 parámetros opcionales, algunos de los cuales ya están desactualizados) se recomienda mejor utilizar métodos como load(), post() o get(). Aqui se da un ejemplo de cómo utilizar los principales parámetros:
El método ajax()
08:52

jQuery básico: Ajax
7 questions
+
Crear una galeria con jQuery
7 Lectures 59:02
En este video daremos los primeros pasos, construyendo las divisiones HTML para nuestra galería.
Preview 08:59

Ahora realizaremos los estilos en cascada para estructurar la galería.
Creación de los estilos en cascada para la galería
07:18

En este video haremos el carrusel de imágenes auxiliados de las instrucciones en JavaScript. Las transiciones las efecturesmo con jQuery.
Creación del carrusel de imágenes con javaScript
09:57

Programaremos los botones de las imágenes para poder saltar la selección de las mismas por medio de los eventos de jQuery
Programación de los botones de las fotos
08:33

Programaremos con jQuery las flechas para avanzar y retroceder en la galería
Programación de las flechas adelante y atras
11:10

Agregaremos textos para cada uno de las imágenes
Agregar textos y últimos toques a la galería
10:42

Por último, añadiremos los toques finales y daremos algunas conclusiones sobre posibles cambios de la galería desarrollada.
Conclusión de la galería
02:23
37 More Sections
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
1,049 Reviews
13,101 Students
35 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.