Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

jQuery Avanzado - 100 trucos profesionales - 2018

Name: jQuery Avanzado - 100 trucos profesionales - 2018
Rating: 4.9 (508 reviews)

100 Tips avanzados de jQuery, que van desde simples optimizaciones de código hasta reconocimiento de cara y mucho más!

Created byFernando Herrera

Last updated 6/2025

Spanish

Spanish [Auto],

What you'll learn

Aprenderemos 100 trucos avanzados de jQuery
Mejorar tiempos de carga de tu aplicación
Comprender el por qué y cómo, de muchas funciones de jQuery
Crear, usar y modificar plugins
Aprenderemos a detectar rostros, aplicar filtros tipo instagram, gráficos y mucho más
Mejorar el rendimiento de tu aplicación

Course content

9 sections • 120 lectures • 11h 9m total length

Curso legacy2:16
Introducción1:03
¿Cómo funciona el curso?2:11
Una breve introducción para saber como trabaja el curso
¿Cómo hacer preguntas?3:39
Lineamientos para hacer preguntas, es algo básico, pero realmente ayudará mucho.
Instalaciones necesarias1:12
Instalaciones necesarias para seguir el curso sin ningún inconveniente
Repositorio y links útiles0:34
Creditos y links útiles
¡Únete a Nuestra Comunidad de DevTalles en Discord!0:18

Introducción a la sección1:13
Un breve resumen del contenido de esta sección
Evento - Dom Listo ( Dom Ready )8:01
Normalmente, desearemos manipular el DOM (Document Object Model), cuando la página este lista y completamente creada.
Ejecutar código en determinada página6:15
Aquí aprenderemos a ejecutar un código en una determinada página
Truco - Uso del operador lógico AND2:45
Dado que el operador lógico AND no evalúa la segunda expresión en caso de que la primera sea falsa, podemos hacer lo siguiente.
Usando el método jQuery is()5:53
Formas de utilizar el método is()
Contar cuantos elementos hay en el DOM2:29
Una técnica divertida para contar elementos en el DOM
Definir la función existe()2:28
Es una forma interesante de revisar si algo existe
Usando el segundo argumento de la función $( )4:44
¿Saben para qué sirve el segundo argumento del método $( )?
Modificando links y colocando íconos5:33
Aprenderemos formas de adicionar atributos bien interesantes.
Dominando el método end( )4:33
Es muy poco usado, pero ayuda mucho en la eficiencia y velocidad del código
Prevenir el click derecho y crear menú personalizado6:38
Aquí aprenderemos a prevenir que la gente pueda hacer click derecho en nuestra página.
Rompiendo los iframes3:42
A veces nuestras páginas son abiertas en navegadores internos en lugar de re-direccionar a las personas a nuestros sitios, aquí un tip interesante para prevenir eso.
Separar elementos de un URL usando anchor tags5:21
A veces cuando necesitamos revisar los URLs, usamos una expresión regular, pero existe un truco bastante útil para resolver este trabajo.
Hacer un contenido editable, incluyendo el estilo6:27
Este es un truco interesante que puede servirles bastante para realizar algún tipo de edición en pantalla
Prevenir que un texto sea seleccionado2:25
A veces, cuando tenemos funciones de drag and drop, no queremos que por accidente se seleccionen las cosas.
Examen #1

Introducción a la sección0:47
Un breve resumen de lo que haremos a continuación
Incluir jQuery de un CDN ( Content delivery network )4:46
Ya que es muy probable que muchos otros lugares tengan incluido jQuery en su sitio web y exista esa versión de jQuery en cache
Manipulaciones del DOM al mínimo6:18
Un error muy común de performance, es estar continuamente estar modificando el DOM para hacer tareas que podemos ejecutar una única vez.
Si el tiempo es crítico, usemos JavaScript plano2:48
Esta es un tema interesante si la velocidad es crítica para nuestra app.
Optimizar los selectores hasta donde sea posible6:04
El uso adecuado de los selectores es imprescindible para un buen uso de los recursos
Guardando elementos en el cache3:21
Siguiendo con el tema de mejorar la velocidad de selección, este es un tema principal.
Definir funciones repetidas una única vez3:54
De esta forma ocupan menos memoria y el programa corre mejor.
Tratar los objetos de jQuery como arreglos normales4:38
Si tratamos los objetos de jQuery como arreglos normales de JavaScript, nos podemos ahorrar hasta 5 veces más tiempo
Desenlazar elementos del DOM cuando hacemos modificaciones complejas a ellos5:07
Si aún queremos exprimir más la eficiencia, esta es una técnica necesaria
No esperes a que la página este lista3:50
Podemos acelerar la carga de los scripts de esta manera.
Creando un estilo para modificar múltiples elementos2:44
Aquí aprenderemos a crear un estilo para poder modificar mucho elementos a la vez.
Examen #2 - Optimizaciones
Tarea práctica #11:20
Realice lo que a continuación se le pide
Resolución de la tarea práctica #17:20
Esta es una forma de resolver el problema

Introducción a la sección0:44
Aquí vamos a tener un breve resumen de lo que la sección contiene
Detectar si JavaScript esta habilitado agregando una clase3:35
De esta forma podemos determinar si JavaScript esta habilitado o no.
Escuchar eventos de elementos que aún no existen4:47
Programadores nuevo en jQuery, usualmente tienen un par de dolores de cabeza con este problema
Unica llamada de un evento3:20
A veces queremos que disparar un evento una sola vez.
Simular eventos y simular parámetros6:31
Aquí aprenderemos a simular eventos, cosa que es sumamente útil cuando usamos librerías de terceros que no tienen APIs implementadas.
Trabajando con eventos cuando tocamos la pantalla con el dedo8:46
La idea es poder arrastrar un elemento por la pantalla simulando un dedo
Conoce tus eventos8:05
Aquí aprenderemos varias formas de usar el evento on()
Forma rápida de prevenir comportamientos por defecto2:46
Quizá estemos familiarizados con el preventDefault(), pero hay una forma más corta
Encadenar eventos2:56
Enviar y recibir parámetros de eventos que son disparados porque están enlazados al mismo elemento.
Crear eventos personalizados5:02
Puede ser que necesites tu propio sistema de eventos.
Examen #3
Juego para probar tus habilidades de jQuery0:22
Aquí un pequeño juego para determinar tu conocimiento de jQuery

Introducción a la sección1:28
Instalación previa - Lite Server6:35
Para realizar peticiones ajax, necesitamos un pequeño servidor para servir nuestros archivos, caso contrario, las peticiones ajax fallarán
Desplegar el tamaño de los archivos a descargar6:20
Aquí aprenderemos algo muy importante para saber el tamaño de los archivos mediante jQuery
Simplificar las peticiones ajax3:01
Aquí aprenderemos a simplificar las peticiones ajax en un línea de código
Ejecutar múltiples peticiones ajax en paralelo5:21
Aquí aprenderemos a disparar funciones ajax y que ejecuten un código cuando ambas terminen.
Obtener tu IP pública con jQuery2:41
En una sola línea de código, podemos encontrar nuestra ip publica
Cargar archivos externos y desplegarlos en nuestra página3:35
Esta es la petición ajax más simple, pero es muy útil
Serializando objetos5:03
En ocaciones, necesitamos enviar un URL con todos los parámetros de un formulario u objeto de forma segura y escapando los caracteres. Aquí tienen una forma de hacerlo
Subida de archivos binarios vía Ajax11:46
Esto sólo funciona en navegadores modernos.
Obteniendo la fotografía de una página de Facebook2:26
No es un gran secreto, pero puede ser de utilidad para varias personas.
Obtener información del clima7:46
Aquí aprenderemos a realizar una petición a un servicio que nos retorna información del clima
Obtener el último post de Tumblr de un blog6:35
Aquí podemos hacer uso del api pública de Tumblr
Encontrar la ubicación geográfica de una dirección IP2:51
Este es un servicio interesante que podemos usar y es totalmente abierto
Apis públicas4:33
Aquí tienen un listado de APIs públicas que pueden usar.
Usando los métodos globales de Ajax5:24
Podemos definir un comportamiento estandarizado para todas las peticiones ajax que se realicen.

Introducción a la sección1:45
Aquí tendremos un breve resumen de lo que esta sección contiene
Aprende a querer la consola8:58
Es realmente útil tener mensajes de consola para poder depurar nuestra aplicación
Convierte tu código para reusarlo eficientemente12:26
Aquí mostramos como crear plugins de jQuery.
Usa funciones anónimas para aislar el código5:32
De esta manera prevenimos posibles errores y conflictos.
Fusiona objetos con $.extend12:36
¿Cómo podemos personalizar plugins, si nuestro código esta aislado?
Uso de la función $.type( )5:00
Aprenderemos a usar la función jQuery.type()
El método map( )6:57
Es un método muy útil, pero poco usado
El método $.grep( )5:08
Este método nos ayuda mucho a trabajar con arreglos en jQuery
Ordenar elementos dentro de una colección de jQuery4:49
De la misma manera como funciona el sort de JavaScript, tenemos el sort en jQuery
Deferido / Promesas de jQuery6:03
Este es un tema interesante que nos ayudará a comprender o a mejorar cierto tipo de sintaxis cuando trabajamos con ajax.
Llamar métodos de jQuery condicionalmente5:08
Este es un truco interesante que puede ahorrarnos un par de líneas de código
Convertir una imagen en blanco y negro9:07
En esta clase aprenderemos a convertir una imagen a blanco y negro usando jQuery y canvas
Listas de callbacks6:17
jQuery ofrece un método muy poderoso para manejar los callbacks llamado $.Callbacks
Crear pseudo selectores personalizados7:22
Aquí aprenderemos a crear selectores de jQuery personalizados
Animaciones personalizadas8:21
Podemos crear nuestras propias animaciones personalizadas y mandarlas como parámetros en los easings o tipo de animación del método animate de jquery
Usando la cola de animaciones de jQuery8:01
Aquí aprenderemos a añadir funciones a la cola de animaciones de jQuery
Propiedades CSS personalizadas4:51
jQuery nos da el poder de crear propiedades que pueden ser reconocidas con el método .css( )
El método $.proxy( )7:33
El método proxy, nos ayuda a que controlemos el valor del objeto this
Enviar callbacks a los métodos de jQuery12:47
Aquí aprenderemos que muchos métodos de jQuery, pueden recibir métodos para realizar tareas aún más especificas

Introducción a la sección2:34
Una breve introducción a lo que veremos en esta sección
Probar si el navegador web soporta características HTML57:16
Esta es una excelente forma de confirmar si el navegador web soporta ciertas características que pueden ser necesarias para tu plugin
Usar media queries en jQuery / JavaScript5:35
CSS Media Queries permiten aplicar CSS condicional a diferentes pantallas, pero de la misma forma, podemos hacer condiciones en JavaScript/jQuery
Acelerar la carga de tu página con un cargador de scripts5:20
Entre más scripts tenga tu sitio web, más lento cargará
Obtener parámetros de elementos del DOM11:25
Este es un tip básico, pero ayuda mucho a re-utilizar el código
Un complemento perfecto para jQuery y JavaScript en general10:03
jQuery es excelente para manipular el DOM, pero le faltan muchas herramientas para manipular data.
Simplificar las funciones de fecha y tiempo en JavaScript14:53
Esta es una excelente librería que agrega todas las funciones de tiempo y fechas que JavaScript debería de tener por defecto
No tengan miedo de usar TypeScript9:55
TypeScript lejos de ser un lenguaje de programación que aprender, debería de ser un compañero para escribir mejor código de JavaScript
Uso del localstorage4:35
Una forma de poder realizar ciertos trabajos en jQuery, es poder mantener información persistente en el navegador web del cliente
Cortar, escalar, blur, cambiar colores y más sobre imágenes8:06
Ya vimos como cambiar a blanco y negro una imagen, que les parece si ahora hacemos más cosas con ellas
Leer e imprimir Markdown8:36
Aquí aprenderemos a utilizar una simple línea de markdown y convertirla en su representación HTML
Animar colores6:14
Por defecto, jQuery no puede realizar el cambio de colores con animaciones, pero esta librería te ayudará a hacerlo
Manejar animaciones por CSS9:06
De una forma sumamente simple, podemos controlar animaciones por CSS y jQuery
Mostrar un video de fondo5:44
Mostrar un video de fondo de pantalla es algo que se ve muy bonito y elegante en un sitio web
Mejorar los diálogos de tu aplicación7:13
Las alertas e inputs básicos son bastante feos y lo peor, es que detienen el funcionamiento de JavaScript hasta que son resueltos, pero aquí hay una solución para eso
Notificaciones en el área del favicon6:31
Este es un detalle bonito para tu aplicación o sitio web

Introducción a la sección1:59
Un breve resumen de lo que veremos en esta sección
Mejores selectores usando chosen6:24
Este debería ser el comportamiento por defecto de cualquier selector
Aplicar un blur a los elementos de la página3:01
Puede ser interesante aplicar un blur a elementos del HTML para ocultar contenido u otras cosas.
Generar códigos QR usando jQuery4:10
Aquí aprenderemos a generar nuestros propios códigos QR totalmente funcionales desde jQuery
Detectar rostros en jQuery12:17
Aprenderemos a utilizar un plugin que nos permite detectar rostros en jQuery
Disparar el modo de pantalla completa6:46
Es posible disparar el modo pantalla completa del navegador web mediante jQuery
Sistema de grid tipo pinterest10:51
Aquí aprenderemos a crear un sistema de grid tipo Pinterest
Convertir inputs en medidores (knob)6:15
Aquí aprenderemos a transformar nuestros inputs en una barras medidoras muy elegantes y útiles.
Trabajando con dinero y monedas9:16
Una forma de trabajar con dinero y monedas usando jQuery
Uso de GoogleMaps de una forma simple6:36
Aquí aprenderemos a utilizar GoogleMaps de una forma sumamente simple
Tablas verdaderamente responsive6:09
El problema de las tablas del bootstrap, es que no son realmente responsive. Aquí un truco para arreglar esto
Colocar máscaras a los inputs6:23
Aquí aprenderemos a colocar máscaras en los inputs
Validaciones de formularios8:43
Hacer una validación correcta, puede demorar un par de minutos extra, pero con un plugin especializado, aprovechamos el tiempo invertido por otras personas para que nosotros no tengamos que escribir toda la lógica nuevamente
Resaltar diferencias entre dos imágenes7:30
Si necesitas realizar comparaciones o demostraciones entre dos imágenes, esta es una forma de hacerlo de una forma elegante
Filtros de instagram usando JavaScript7:59
Una forma interesante de cambiar las imágenes utilizando filtros muy parecidos a los de instagram
Atajos del teclado en tu página o aplicación web5:35
Es un poco engañoso poder crear este tipo de shortcuts o atajos, pero con este plugin es sumamente simple
Ajustar textos en la web3:30
De esta forma podemos despreocuparnos de controlar los tamaños de ciertas fuentes en nuestra página web
Tomar una fotografía con la cámara5:48
Aquí podremos aprender a tomar una fotografía con la cámara de la computadora.
Selector de fechas responsive y validado10:15
Aquí tenemos un plugin para el manejo y selección de fechas dinámico y fácil de utilizar
Manejar un drag & drop6:53
Hacer un drag and drop puede ser una tarea tediosa, pero existen alternativas muy personalizables para realizar este trabajo
Hacer vibrar elementos para énfasis4:21
Tal vez no sea el plugin más útil de todos, pero seguramente es divertido y obtendrás la atención de tu usuario
Realizar gráficos dinámicos10:20
Siempre es bueno poder mostrar gráficos para desplegar información, las personas aman los gráficos

Requirements

Conocer los fundamentos de jQuery es necesario
Conocimiento básico de HTML, CSS y JavaScript es necesario

Description

Nota Legacy:

Después de varios años desde el lanzamiento inicial de este curso, queremos informarte que el mismo ha pasado a ser versión legacy. Esto implica que su contenido no recibirá actualizaciones adicionales y nuestro equipo de Co-instructores no continuará proporcionando soporte a preguntas relacionadas a este curso.

Sin embargo, queremos que sigas aprendiendo con confianza. Por eso, te invitamos a unirte a nuestra comunidad en Discord, donde podrás conectar con otros estudiantes, compartir conocimientos y recibir apoyo de nuestra comunidad.

¡Gracias por tu comprensión y por ser parte de nuestra comunidad de aprendizaje!

jQuery Avanzado – 100 Trucos y Tips

Este curso tiene un objetivo simple, mejorar tus habilidades en jQuery y JavaScript en general. Mediante 100 ejercicios prácticos, aprenderemos cosas como:

Mejorar enormemente tu manipulación del DOM
Optimizar lo tiempos de carga de nuestra aplicación o scripts
Mejorar tu comprensión en el uso de funciones y métodos de jQuery
Romper iFrames para la visualización de tu página web o webapp
Editar HTML en tiempo real
Optimizar tus selectores
Detectar diferentes capacidades de los navegadores web del usuario final
Encadenamiento de eventos
Múltiples eventos asíncronos en paralelo que convergen en una función
Subida de archivos binarios vía Ajax
Crear plugins y expandir objetos
Callbacks y promesas de jQuery
Animaciones personalizadas
Sistema de detección de rostros
Filtros tipo Instagram en JavaScript
Sistema de tarjetas tipo Pinterest
Y mucho más.

En el curso aprenderemos técnicas y desarrollaremos habilidades mediante ejercicios prácticos que tomarán tu conocimiento de jQuery y lo elevarán a otro nivel. Mi objetivo será guiarte a través de estos 100 ejemplos y que tu mismo puedas implementarlos sin problemas.

Cada ejercicio es único y no se repiten, cada video es un tema, cada sección es una colección de temas que tienen alguna relación entre sí. Las clases son cortas con videos de menos de 10 minutos de duración, hay tareas y ejercicios para hacer por tu cuenta con su respectiva resolución para que puedas auto evaluarte.

Cuando termines este curso de jQuery, tendrás nuevas habilidades y conocimientos que podrás aplicar en cualquier proyecto web, ayudándote a que tus webapps o páginas web tengan ese extra que deseas, sin contar que tus habilidades habrán mejorado enormemente.

Este curso NO es recomendable para personas que no conocen jQuery, no es para gente que jamás lo ha tocado, si deseas aprender de cero, tengo otro curso que es perfecto para ti, pero este no es.

Who this course is for:

Personas que conozcan jQuery que deseen mejorar y crear mejores programas
Diseñadores y desarrolladores web que deseen expandir sus conocimientos
Personas que quieran comprender mejor el por qué de muchas funciones y códigos de jQuery
Personas que quieran expandir su repertorio de trucos y plugins útiles

jQuery Avanzado - 100 trucos profesionales - 2018

What you'll learn

Explore related topics

Course content

Introducción7 lectures • 11min

Manipulación del Dom15 lectures • 1hr 8min

Performance, mejorando el rendimiento de nuestro código13 lectures • 53min

Eventos11 lectures • 47min

Ajax15 lectures • 1hr 15min

La clase maestra19 lectures • 2hr 19min

Plugins16 lectures • 2hr 3min

Plugins 222 lectures • 2hr 31min

Despedida2 lectures • 2min

Requirements

Description

Who this course is for: