jQuery MasterClass con animaciones de sitios web

1. Introducción: Bienvenido al curso definitivo de jQuery. En este curso, aprenderás todo sobre jQuery, cómo agregar animación usando jQuery, cómo llamar a API usando Ajax, y mucho más africano leyendo este curso, puedes comenzar a usar jQuery de inmediato para sus sitios web. Y aprenderás estos increíbles trucos de animación, que hoy en día tienen los sitios web modernos. Estoy muy entusiasmado con este curso y espero que tú también lo estés. Vamos a sumergirnos en esto. 2. 01 ¿Qué es jQuery: Entonces, ¿qué es jQuery? Jquery es una biblioteca JavaScript ligera para que pueda acceder fácilmente a los elementos DOM y agregarle acción. Algún diálogo donde dice jQuery tiene razón menos y hacer más tipo de cosas. En palabras sencillas. Jquery es la forma de atajo para escribir código JavaScript. Ejemplo. Si quisiéramos agregar un oyente de eventos click para un botón, entonces puedes escribir el mismo código con jQuery en una sola línea. Ese es el poder de jQuery. La biblioteca Jquery tiene muchas características como manipulación DOM, manipulación de estilos, oyentes de eventos, efectos, animaciones, Ajax para hacer solicitud HTTP y mucho más. Hay muchas bibliotecas de JavaScript, pero jQuery es la biblioteca más popular y mejor para JavaScript. Y si estás trabajando en casi cualquier proyecto de sitio web, jQuery es muy útil para eso. Hay muchas grandes empresas reducen jQuery para sus sitios web, como Netflix, Google, Microsoft, Reddit, Stack Overflow y muchas más. Entonces, después de aprender jQuery, puedes agregar jQuery en tu pila tecnológica. Eso también te ayudará a conseguir el trabajo o convertirte en un mejor desarrollador web. 3. 02 de configuración de ambiente: Vamos a configurar rápidamente nuestro entorno para este curso. En el cuadro de descripción, obtendrás el archivo zip de recursos, descargarás y descomprimiste. En esta carpeta Recursos, obtienes esta carpeta de inicio jQuery, la abres y la abres en VS Code. Ahora aquí hay un archivo uno index.html y uno script.js. Enlazo este archivo script.js con nuestro archivo HTML. Así que vamos a ejecutar este archivo HTML con servidor en vivo. Entonces no necesitamos reprimir nuestro navegador ¿qué cada vez? Si no tienes esta pulgada extra y entonces te sugiero que instales esa aceleración. Ahora abramos la consola y veamos que está funcionando. 4. 03 Cómo instalar jQuery: Ahora primero que nada, veamos cómo agregar jQuery, HTML, CSS y proyecto JavaScript. Entonces hay dos formas de agregar jQuery en nuestro proyecto. Podemos descargar el archivo jQuery. Cómo comenzar a usar el enlace CDN. Puedes usar lo que quieras. Depende totalmente de ti. En primer lugar, veamos cómo descargar el archivo jQuery. Dirígete a jquery.com y haz clic en este botón Descargar jQuery. Ahora bien, si queremos ver código significa lo que hay dentro del archivo, luego da clic en desarrollo versión jQuery. Y si no quieres ver ese núcleo, entonces puedes usar la versión compresa jQuery. Ambos acordes son iguales, pero la diferencia es que el archivo de versión comprimido es menor que el archivo de versión de desarrollo ya que en glomérulo o zonas, eliminan todos los espacios innecesarios. Entonces por eso no podemos leer código en ese archivo. Copio aquí comprimir persona anotada. En código VS. Creamos un nuevo archivo llamado jQuery dot js y pegamos ese código en ese archivo. Guarda esto y ahora en nuestro archivo HTML al final del cuerpo. Y antes o la etiqueta script, agregamos una etiqueta script más. Y fuente, jQuery punto js. Y eso es todo. Instalamos nuestro jQuery. Ahora, veamos la segunda forma, que es la forma más sencilla y fácil. Volver a nuestro navegador. Y desplácese hacia abajo en esta página en otra sección de CDN. Aquí obtenemos Google CDN. Da click en él y copia este último barrio a3x. Ahora volvamos a VS Code y descomente esta etiqueta de script. Y después de eso, base ese enlace CDN. Si no quieres usar post way, entonces puedes eliminar esta etiqueta de script más antigua. Eso lo guardaré para su referencia. Y eso es todo. Instalamos jQuery con éxito en nuestro proyecto. 5. 04 sintaxis de jQuery: Entonces como te dije, jQuery es muy útil para acceder a elementos DOM y realizar acciones para ellos. Entonces aquí hay una sintaxis básica de jQuery. Qué elementos DOM de acceso no confunden al respecto. Es realmente muy sencillo. Déjame mostrarte que la sintaxis tiene tres partes principales. El primero es este dólar. Dollar se asigna para acceder a jQuery desde CDN. Descarga ese archivo jQuery localmente. Después de eso, tenemos selector, que se utiliza para definir el elemento o elementos, por ejemplo reescribir dólar p. Luego seleccionará todo el elemento de párrafo en nuestro archivo HTML. Y al fin, tenemos acción, que es la acción que queremos realizar. Qué ejemplo aquí simplemente agregamos hide. Ocultar es la acción que queremos realizar para todos los elementos de párrafo. Entonces solo esta pieza de código oculta todos los elementos de párrafo en nuestra página web. Se puede ver lo sencillo y fácil de ocultar todos los elementos de párrafo. Así que a los desarrolladores de sitios y las grandes empresas les gusta tanto jQuery. 6. 05 electores en jQuery: Los selectores son parte muy importante de jQuery porque se utiliza para seleccionar elementos HTML de página web en función de su nombre de etiqueta, apellido, ID, atributos y valor de atributos. Veamos cómo podemos hacer eso. Prácticamente. Lo Stovall en el archivo index.html, añadimos una etiqueta de párrafo dentro de él. Simplemente agregue texto aleatorio con Laura y phi al principio, párrafo uno. Ahora duplico este párrafo dos veces más y lo cambio a párrafo por párrafo T. Celdas estas y echar un vistazo. Tenemos tres párrafos. Ahora en el archivo script.js reescribe variable de exceso de jQuery, que es dólar. Y luego entre paréntesis, agregamos B entre comillas dobles. Ahora edad, tenemos que agregar acción, digamos ocultar. Entonces, ¿sabes qué pasará cuando guardemos el archivo? Escribe tu respuesta en el cuadro de comentarios para que pueda ver cuántas personas están aprendiendo conmigo. Ahora guarda esto. Y C son todas etiquetas p u ocultar. Entonces así es como seleccionamos todos los elementos de párrafo. Si escribimos aquí H1, eso seleccionará todas las etiquetas H1 de la página web. Ahora en el archivo HTML, agrego vidrio en el segundo párrafo llamado segundo. Ahora integridad, FUE de P. Añadimos punto segundo. Esto seleccionará todos los elementos que son de vidrio en segundo lugar, que es nuestro segundo párrafo. Guarde esto y vea que nuestro segundo párrafo ya está oculto. Si agregamos aquí P punto segundo, entonces seleccionará todos los párrafos cuyo nombre de clase es segundo. Funciona de manera similar a los selectores CSS. Ahora para el tercer párrafo, id, tercero. Ahora ¿puedes adivinar cómo podemos seleccionar elementos por su ID? Si usamos punto por nombre de clase, entonces usamos aquí tiene ID. Tan simple como eso. ¿Verdad? Tiene tercero. Llena esto y echa un vistazo. Párrafo con id tercero está oculto. Puedes ver lo fácil que es seleccionar elementos en jQuery. En JavaScript, tenemos que escribir documento punto get elemento por nombre de clase o por ID. Ahora hay muchos selectores aduaneros en jQuery. No quiero aburrirte por lo que cada selector individualmente. Entonces aquí hay una tabla de selectores, y en la columna de descripción, se puede leer su descripción. Es muy sencillo y fácil. Si tienes algunas dudas, entonces me vas a preguntar en la sección de comentarios. 7. 06 eventos: Por lo que los eventos son parte muy importante de cualquier página web. Básicamente es una respuesta a las acciones del usuario. Por ejemplo, en el sitio web de YouTube, presionas F para ver el video en pantalla completa. Haga clic en el botón Reproducir para reproducir el video. Entonces esto presionando G y Gleick en eventos. Así que hay cuatro tipos de eventos DOM disponibles en jQuery. Eventos de mouse, eventos de teclado, movimientos de enlace y documento. ¿Qué hacemos eventos? Entonces supongamos que Jack Miles orina. Ten en cuenta que no te estoy mostrando todos los eventos porque es un poco aburrido y consume mucho tiempo. Veremos eventos que son comúnmente útiles para nosotros. Si queremos consultar todos los eventos, puedes consultar la documentación oficial. Así que el primer evento es hacer clic en archivo HTML. Añado un botón, Digamos esconderse. Y dale a esto una identificación llamada btn hide. Ahora aquí lo que quiero hacer es cuando hacemos clic en este botón Ocultar, queremos ocultar este segundo párrafo en el archivo script.js. Primero seleccionamos el botón Ocultar. Entonces dólar tiene btn underscore altura. Ahora aquí agregamos evento de punto y clic. Ahora en este método Click, tenemos que agregar la función de devolución de llamada, que se ejecutará en este evento click. Así funcionan. Y dentro de esta función, reescribe dólar. Segundo punto ocultar. Básicamente esta expresión significa que cuando haces clic en este botón Ocultar btn, luego ejecutas esta función. Y esa función ocultará el segundo párrafo. Guarde esto y eche un vistazo. Haga clic en el botón Ocultar. Y el párrafo dos está oculto. Puedes ver lo sencillo que es agregar un evento click. Ahora para mouse, tenemos tantos eventos. Puedes escribirlos tú mismo. Ahora el teclado tiene sólo tres eventos. Presione la tecla N hacia abajo. Aquí en esta página web. Cuando presione la tecla Esc, entonces este segundo párrafo se ocultará. Y entonces si presionamos ascii, entonces el segundo párrafo será visible. Entonces para eso, agregamos aquí dólar y paréntesis. Ahora sobre qué elemento queremos agregar este evento clave. Queremos agregar este evento en la página web completa. Entonces agrego aquí cuerpo ahora punto clave abajo. Y pasamos aquí función. Ahora nuestra tarea es identificar si el usuario presiona la tecla H o ascii. Si haces eso antes en ese guión, entonces ya sabes, todos tienen su objeto de evento. Y obtenemos ese objeto de evento como el parámetro de esta función callback aquí mismo, event. Y este evento ha importado llamado la playa, que devolverá el valor ascii de k ¿Qué vamos a usar tu evento punto core, eso nos dará el nombre clave? Pero esto me gusta, ¿qué importa? Así que simplemente escribe el evento console.log, que esta y presiona edge. Verlo. Entonces 72, que es el valor ascii de edge, y luego presiona S y devuelve un T3. Así que volvamos a nuestro archivo script. Agregamos aquí condición si punto evento que equivale a 72, 10 dólares. Segundo. Ocultar. Después de eso, agregamos un evento en vivo más, punto v es igual a un T3. Después dólar. Segundo zapato, días de venta y Degas miran borde y su altura y presiona S y es visible. Ve lo fácil que es con jQuery. Ahora, ¿y si FUE de d abajo? Sumamos estos y echamos un vistazo. Ahora presiono la tecla Esc y no me doy cuenta. Ahora, me doy cuenta. Y el párrafo está oculto. Entonces, cuando presionamos la tecla y después de darnos cuenta que se ejecutará durante el 99% del tiempo, usaremos solo el evento key down para el teclado. Ahora, tenemos eventos de Guam, lo cual es muy útil cuando estamos trabajando con la forma. Entonces la sintaxis de todos los eventos es la misma para cada evento. Lavado, hay que definir un selector y luego el nombre del evento de punto, y luego agregar la función de devolución de llamada, que se ejecutará en esa acción. Tan simple como eso. Vas a escribir estos eventos tú mismo. Si te explico esto, todos los eventos uno por uno que no sean este tutorial no se completarán en 2 h. así que pruébalo tú mismo. Y si tienes algunas dudas, entonces me vas a preguntar en la sección de comentarios. 8. 07 Ocultar y mostrar efectos: El método Hide and Show ya es que hemos visto en la última lección, estas son la forma más fácil de ocultar y mostrar los elementos en nuestra página web. Ahora en el método hide and show, también podemos especificar el tiempo para completar esa acción. Digamos que queremos ocultar este párrafo en segundos. Esta función de altura. Pasamos tu tiempo en milisegundos, que es 2000. Y Taylor. Cuando hacemos clic en este botón, entonces se necesitan 2 s para ocultarlo. Aquí también podemos compra la función de devolución de llamada para este efecto de altura, que se ejecutará después de que se complete este efecto. Déjame mostrarte a lo que me refiero. Entonces después del tiempo, paso tu función de devolución de llamada. Y dentro de esta función de devolución de llamada, yoduro console.log tarea completada. Esto. Y ahora hago clic en este botón Ocultar y ver cómo se completa nuestra animación. Entonces esta clase completó sprint en consola. En esa función de devolución de llamada, vamos a ocultar otros elementos también, que se ocultarán después de leer esta animación. Ahora que R1 más impacto es alternado. Cadenas laterales, este alto defecto para alternar. Y también en archivo HTML, cambia el texto del botón para alternar esto y echar un vistazo. Entonces cuando hacemos clic en este botón de alternar, si nuestro párrafo es visible, entonces se ocultará. Y si no es visible, entonces se mostrará simple como eso. Ahora, antes de pasar al siguiente tema, quería darte un consejo muy importante para jQuery. Así que siempre que uses jQuery o JavaScript, escribe tu código en la función document.ready. Esta función se asegurará de que nuestro contenido completo esté cargado. Entonces en jQuery, podemos escribir documento dólar punto listo. Y dentro de esto pasamos devoluciones de función después de que nuestro documento esté listo. ¿Por qué volvió a morir la función del dólar? Esta es la taquigrafía para document.ready. Pero me gusta escribir este primero porque si después de algún día no hice este acorde, entonces podría olvidarme de esta clasificación. Pero puedes usar lo que quieras. Es totalmente correcto. Ahora. Más todo el código dentro de esta función. Perfecto. 9. 08 efectos de desvanecimiento y diapositiva: En jQuery, tenemos cuatro tipos de defectos los cuales se utilizan para pagar la visibilidad del elemento. Fade-in, fade-out, toga y V2. Ahora bien, estos efectos son bastante fáciles. La lectura se utiliza para desvanecer el elemento. Déjame mostrarte en el lugar de este efecto toggle. Yo solo agrego fade out más estos argumentos para esto. Por cierto, si no los eliminamos, también funcionará porque sus argumentos son casi palabra para todos los efectos. Guarda esto y echa un vistazo. Haga clic en este botón. Y Z, el segundo párrafo es fade out. Ahora el desvanecimiento es para el efecto de desvanecimiento. Y fade toggle es bastante útil para el efecto de desvanecimiento de alternar. En el lugar de este fade-out, agregamos fade toggle. Entonces estos, y echa un vistazo, haz clic en, haz clic en botón y di punto fuera. Y los efectos de desvanecimiento se están ejecutando. Ahora para ello a Efecto se utiliza para manejar el valor de desvanecimiento, que es 0-10 significa opacidad cero, y uno significa opacidad completa. Aquí, ¿verdad? Encajar dos. En la función, tenemos que pasar primero periodo de ese efecto, que es, digamos lento. Y luego pasamos frente a D, que es, digamos 01 phi. Guarde esto y eche un vistazo, haga clic en el botón y vea el párrafo es lo visible que es. Ahora, hablemos de los efectos secundarios que son solo tres efectos de diapositiva. Veamos Todos los efectos a la vez. Así que acabo de reemplazar este efecto de desvanecimiento. Esos se deslizan alternan. Habilite este argumento. Guarde esto y eche un vistazo. Haga clic en este botón y vea primero deslizarse hacia arriba, y luego se deslizará hacia abajo. Aquí. También puedes pasar velocidad en milisegundos, lento o rápido. Esta diapositiva de alternar realmente útil para el efecto de la barra lateral. 10. 09 Método de animación: Ahora hablemos del método animado en jQuery. Animar con ella se utiliza para crear animaciones personalizadas. Ese método tiene todas las mismas propiedades como otros efectos, velocidad y devolución de llamada. Pero en cualquier caso, tenemos que pasar objeto de propiedades CSS. El primer argumento, déjame mostrarte. Aquí. Agrego un trato con caja de cristal y agrego algo de texto ficticio aquí. Y quiero agregar algunos estilos para esta caja. Entonces después del título, agregamos etiqueta de estilo. Y para caja, agregamos peso 200 píxeles, altura a 100 píxeles. Color de fondo a materia oscura. Guarda esto y echa un vistazo. Mira, obtenemos caja de estomas. Ahora, cuando haga clic en este botón, quiero cambiar el ancho, alto y tamaño de fuente de este texto de este cuadro . Entonces para eso, usamos la propiedad animate. Entonces, eliminemos este efecto. Justo aquí. Dólar dot box punto animado. Ahora en la primera posición, tenemos que pasar objeto de propiedades CSS. Queremos encadenar. Así que agrega objeto. Y primero queremos cambiar el bit Garland en comillas dobles, 200 píxeles. Ahora para agregar múltiples propiedades, tenemos que usar coma, tal como lo hacemos en el objeto JavaScript. Ahora altura a 200 pixeles, coma. Ahora bien, si tenemos nombre de propiedad en palabras como talla única, entonces tenemos que convertir eso en CamelCase, sodio mover estas muertes y hacer esto como cápita. Y 20 pixeles. Guarda esto y echa un vistazo. Haga clic en este botón y vea ancho, alto, y se cambia una talla. Ahora a veces queremos agregar 200 píxeles en el ancho actual. También podemos hacer eso en este método. Aquí. yoduro más equivale a 200 píxeles. Guarde esto y vea que nos incrementan 200 píxeles en el debate actual. Ahora como otros efectos, también podemos pasar aquí la velocidad y la función de devolución de llamada. Entonces aquí escribo lento. Llena esto, y echa un vistazo y mira. Obtenemos esta pequeña animación. 11. 10 Modificar HTML con jQuery: En grado, tenemos algunos métodos para manipular elementos DOM. Podemos elegir el texto, qué elementos HTML, ya que ese atributo valores, etc. entonces hay tres métodos para eso. Texto punteado, que se utiliza para obtener o establecer el contenido del texto de los elementos seleccionados. Dot HTML, que se utiliza para obtener nuestro conjunto, el contenido con marcado HTML de los elementos seleccionados. Bueno, que se utiliza para obtener o establecer el valor de los campos de formulario como entrada, texto, seleccionado, valor de casilla de verificación, etcétera. Vamos a ver eso prácticamente aquí. Quiero obtener el texto del segundo párrafo. En el botón haga clic. Acabo de probar dólar. Segundo punto txt. Entonces agarra esto con las agendas de campo de registro de puntos de la consola y échale un vistazo. Da click en este botón y z, el texto dentro de este segundo párrafo. Ahora también podemos establecer el texto lo que queramos en este segundo párrafo para esa altura aquí mismo, dólar segundo punto texto. Y aquí en esta materia de texto, solo paso otro texto como este es jQuery Tutorial. Esas agendas. Y vea, cuando hagamos clic en este botón, el texto va a cambiar. Ahora tenemos un segundo método llamado HTML, que es muy similar a este método de texto. Entonces en el segundo párrafo, solo agrego aquí etiqueta negrita. Este párrafo dos. Ahora en este archivo script.js, duplico esta línea de consola y reemplazo este texto con HTML. Esto, y haga clic en este botón. Lo sentimos, tenemos que comentar esta línea. Ahora el archivo y ver aquí obtenemos el texto con elementos HTML. Por lo que el método fiscal devolverá sólo el texto. Y el método STR devuelve el texto con elementos HTML. Tan simple como eso. Ahora, ¿puedes adivinar cómo podemos establecer el HTML? Como decíamos, el texto, ¿no? Simplemente escribimos aquí como HTML. Y mala conformación. Añado aquí etiqueta m. ¿Qué enfatiza esto? Y z, obtenemos texto en italiano. Entonces esto es bastante fácil. Ahora, ¿y si quiero obtener el valor del elemento HTML? Digamos este botón. Aquí. El yoduro tiene piel de radián. Y después de eso confió método dot val para obtener el valor de este elemento. Entonces estos y en el botón, tenemos que agregar valor, valor propiedad es igual a b, d, y estos y z llegamos hasta aquí. Ahora bien, si quisiéramos cambiar este valor, entonces también podemos cambiarlo pasando valor aquí en bien materia. Ahora hay un método o atributos más. Entonces, si queremos obtener un valor de atributo demasiado específico, entonces usamos el método de atributo. Veamos el ejemplo. Así que olvidando el valor del atributo, tenemos que pasar aquí el nombre del atributo. Y si queremos establecer el valor de ese atributo, entonces podemos pasar aquí en segundo argumento, simple como eso. 12. 11 Modificar CSS con jQuery: Entonces en jQuery, podemos agregar, eliminar y alternar fácilmente clases, insertar. Podemos manipular CSS de cualquier manera fácil. Y es muy útil para crear animaciones. Aquí, digamos que queremos agregar una caja de clase. Lo que nuestro segundo párrafo. En este botón, haga clic en reescribir dólar. Clase Segunda Ed. Y pasa aquí el nombre de la clase entre comillas dobles. Estos. Cuando hacemos clic en este botón, ver paseos se agrega vidrio. Vamos a verificar eso. Inspeccionar. Así que haga clic derecho en la caja y vaya a Inspeccionar. Ver paseos vidrio se agrega aquí. Ahora ya sabes lo que hará el método de clase remota. Se quitará la clase. Pero aquí hay una cuestión útil que es la materia de cierre de toggle. Entonces en el lugar de esta clase add, agrego toggle class. Ahora el método del vidrio de lucha es básicamente alternar una clase que pasamos entre comillas dobles. Guarde esto y eche un vistazo. Ver, cuando hacemos clic en el botón, se agrega el vidrio de la caja, y luego se vuelve a hacer clic. Después quita la clase de caja. Este método es útil en muchos lugares como icono de la barra lateral cuando hacemos clic en el icono de hamburguesa. Y agregará clase, así que mostrará la barra lateral. Y luego volvemos a hacer clic. Ocultará el lado, pero técnica simple, pero muy útil. Ahora déjame mostrarte algo realmente genial. Aquí. Agrego estilo por clase. Segundo, digamos 300 pixeles. Y dirige a Jason. Todo para todas las propiedades. Cinnabon, segundo, facilidad de entrada y salida. Un estilo de bandeja de entrada. Basta con quitar esta altura, que no es necesariamente un anuncio aquí, importante para el ancho. Guarda esto y echa un vistazo, da clic en el botón y mira que tenemos esta animación suave. Esto se debe a esta propiedad de transición. Entonces, si queremos agregar o quitar el vidrio para la animación, entonces vas a usar esta propiedad de transición, que agregará animación suave para ti. Estos trucos los aprendí muy tarde en mi carrera de desarrollo web. Ojalá lo supiera para mis proyectos de post. Y por eso te estoy enseñando estos trucos. Ahora tenemos un método más o modificar CSS, que es el método CSS. Es similar al método animado que vimos anteriormente. El método css se utiliza para obtener o establecer las propiedades CSS del elemento seleccionado. Digamos que queremos saber el color de fondo de este trato. Entonces escribo aquí, dollar db dot box, dot CSS. Aquí pasamos el nombre de nuestra propiedad, que es el color de fondo. Esta expresión, la religión, el color de fondo de la caja. Almacenemos esto en una variable llamada color. Y simplemente considerado un tronco. Estos cambios de color y z. Aquí obtenemos este color. Ahora vamos incluso un paso más allá. Entonces ahora quiero establecer el mismo color. Lo que este tercer párrafo texto aquí. Me gusta dólar tiene tercer punto css. Y qué propiedad queremos establecer, ¿verdad? Es color. Y sea cual sea el valor que queramos establecer, tenemos que pasarlo en un segundo argumento. Digamos que queríamos configurar esto para leerlo aquí mismo, así. Ahora queremos establecer este color, que obtenemos de esta caja. Entonces solo escribimos aquí color. Guarde esto y vea color del texto escrito a este color de fondo de la caja. Ahora podrías pensar cómo podemos establecer aquí múltiples propiedades CSS. Entonces para eso, tenemos que pasar propiedades en el objeto, igual que variedad en CSS, pero tenemos que escribir propiedades entre comillas dobles. Déjame mostrarte aquí. Haber leído esta propiedad con corchetes en lugar de esta coma reescribir dos puntos. Ahora si queremos pasar segunda propiedad, entonces agregamos aquí coma y en comillas dobles, agrego fondo, guión, color, Goma, negro. Tenga en cuenta que podemos escribir aquí nombre de propiedad, igual que V escribiendo CSS. Pero en cualquier método met, tenemos que escribir eso en camelcase. Y eso es muy que los desarrolladores usan esta propiedad CSS con más frecuencia. Guarda esto y mira, aquí obtenemos nuestro estilo. 13. 12 métodos de forma útiles: Los eventos de bombardeo también son importantes en jQuery porque vas a usar para manejar el formulario. Así que hay muchos eventos de forma, pero estos son los eventos que es mayor valor estamos tratando con cualquier tipo de poema. Si quisiéramos conocer todos los eventos, entonces vas a usar la documentación de jQuery. Pero en general, solo necesitarás estos malos eventos de palma. Enfoque, desenfoque, Jane, envíe. Simplemente elimino todo el código HTML para el fresco y agrego un formulario con dos entradas y dos botones de radio para género y un botón Enviar. Ahora, veamos los eventos de formulario. Entonces primero está enfocado, lo que desencadenará cuando nos hayamos enfocado en algo. Digamos que seleccionamos este cuadro de entrada. Se puede ver este esquema que es una señal de enfoque. Y cuando hacemos clic fuera de esta entrada, entonces se elimina del foco. En este archivo script.js. Entrada de dólar hidruro para seleccionar todas las entradas y luego agregar evento de enfoque para esas. Ahora agregamos aquí la función que se ejecutará en el evento de enfoque. Y en eso, quiero cambiar el color de fondo de esa entrada específica, que está en progreso. Una vez que la adición, no use aquí la sintaxis constante de flecha porque jQuery tiene algún problema con esa sintaxis. Entonces estoy cambiando el color de fondo aquí. Pero puedes hacer lo que quieras. No hay límites para eso. Ahora justo aquí, dólar, esto es elegir el elemento de entrada actual y agregar aquí método CSS. Y en su interior, color de fondo, coma, jitomate. Guarde los cambios. Y David, C, cuando nos enfocamos en la entrada, ese color de fondo es tacaño. Ahora quiero hacer eso otra vez, ¿verdad? Cuando esa entrada está fuera de foco que tenemos evento de sangre. Duplico este código. Nuevamente, este enfoque para desenfocar y sesgar el color amarillo para vaciar esto y ver cuando nos enfocamos en la deuda, su color de fondo va a cambiar. Y luego otra vez de vuelta a la normalidad. Ahora, veamos evento de cambio. Este evento se activará cuando el valor de algo cambiará. Duplicé este núcleo una vez más. Y en el lugar del desenfoque, agrego un console.log. Dollar, esta web oscura. Guarda esto y mira cuando cambiamos este valor de botón de radio, obtenemos ese valor. Y si escribimos algo en cuadro de texto, y luego eliminamos la glucosa de esa entrada, un valor de entrada cambiará. Y entonces podemos ver ese valor aquí. Ahora, veamos el evento submit. Hasta el momento, enviar evento, tenemos que dar nuestro formulario id, Digamos formulario de registro. Ahora en el archivo script.js, dólar, transiciones de peligro y forma. Y luego agregamos enviar evento. Ahora pasa la función, que se ejecutará en enviar. En esta función, simplemente consolar el formulario de registro de puntos correctamente enviar esto y echar un vistazo. Cuando hacemos clic en este botón. Nuevamente, vea ese mensaje en consola, pero apenas un milisegundo. Y luego nuestra base refrescar. Así que vamos a detener esto. Entonces, en el evento submit, obtenemos aquí el objeto de evento en el primer parámetro. Y en ese objeto tenemos un método call prevent default, que evitará el comportamiento por defecto del evento submit, que está reprimiendo la página. Así que a la derecha, evento, punto prevenir default. Guarde estos y Degas. Ver, puedes ver aquí los formularios enviados. Entonces estos son estos eventos de formulario en jQuery los cuales te ayudarán en un manejo de formularios. 14. 13 AJAX en jQuery: Entonces, antes de comenzar a aprender Ajax, entendamos qué es h, x e y que necesitábamos. ASIC significa JavaScript asíncrono. Y XML. En palabras simples, is x se trata de cargar datos en segundo plano y mostrarse en la página web sin recargar toda la página. Muchas aplicaciones populares como Gmail, Instagram, Facebook, YouTube y muchas más que usan Ajax para cargar datos en segundo plano y actualizar esos datos existentes. Si notas, una vez que cargues este sitio web, incluso si los alumnos algo o alguien envió a tu correo electrónico, entonces no cargará todo el sitio web. Eso lo puede hacer HX. Hx en sí mismo, un poco complejo, pero también podemos usar Ajax en jQuery de manera muy sencilla. Entonces jQuery proporciona varios métodos para la funcionalidad Ajax. El primero es menor, que se utiliza para cargar datos del servidor en contenido HTML. Segundo, sin embargo, que se utiliza para cargar datos desde el servidor usando HTTP GET request and post, que se utiliza para enviar y cargar datos desde el servidor usando HTTP post request. Empecemos con el número uno, que es bajo. Entonces aquí hice una demostración de este acorde anterior en archivo JS. Ya no necesitamos eso. Y también de archivo HTML. Y agrega aquí solo un trato con salida id. Ahora creo un nuevo archivo llamado sample.txt. Y dentro de él agrego algo de texto, como este es texto de muestra. ¿Qué es x en D? Grady? Guarde esto. Ahora en esta salida, quiero mostrar este texto que escribimos en este archivo sample.txt. Así que en el archivo script.js, reescribir dólar tiene salida en la que queremos mostrar el texto. Señor oscuro. Ahora en el primer parámetro, agregaremos aquí nuestra URL de archivo, que es sample dot dx dy. Entonces si queremos enviar datos con esta solicitud, entonces podemos pasar esos datos en segundo parámetro. Pero aquí, no queremos pasar datos, así que no escribimos nada. Ahora, por fin, tenemos función con tres parámetros, estadísticas de respuesta, un XHR. Consolemos a cada uno de ellos. Y z, ¿qué obtenemos? ¿Esto? Y Degas, mira aquí obtenemos nuestros textos y en consola, en respuesta, obtenemos nuestro texto. En cambio como texto. Obtenemos éxito porque conseguimos esos datos con éxito. Y un XHR, que es XML HTTP request object. Podemos hacer algo así. Aquí paso condición. Si x es igual al éxito, entonces alerta el éxito. Y si el texto de estado equivale a dos errores, entonces el sumador de alerta más el texto de estado del punto XHR. Guarde esto y vea, llegamos aquí el éxito. Ahora hago un error tipográfico en nombre de archivo y luego sello este z que obtenemos aquí en no se encuentran. Entonces así es como obtenemos datos usando el método de carga. Ahora, veamos cómo usar GetMethod. Comento este objetivo. Y después de ese yoduro dólar punto obtener. Ahora como comando plus star, tienes que pasar nuestra API, agregas n. así que vuelve al navegador y busca Jason place holder. Abre este enlace. Desplázate hacia abajo y aquí obtienes API para degustación. Quiero obtener los datos de este usuario. Entonces copio esta URL. Ahora para el segundo parámetro, tenemos que pasar la función de devolución de llamada, que se ejecutará después de que obtengamos los datos. Y también obtenemos datos y estado como parámetro. Ahora vamos simplemente console.log estos datos y el estado de estos. Y echa un vistazo. Aquí obtenemos una variedad de usuarios. Y el estatus es el éxito. En esta función, vas a hacer lo que quieras para mostrar estos datos usando loop en nuestra página web o cualquier cosa. Las posibilidades son ilimitadas. Sólo hay que pensar. Ahora veamos cómo usar el método post. El método se suele utilizar para enviar datos. Entonces solo escribo aquí dollar dot post. Ahora, ¿puedes adivinar cuál será el primer argumento? ¿Verdad? Es URL API. Simplemente pego la misma API y los usuarios destinados a publicar, que se usa para agregar nuevo post. Ahora anteriormente, agregamos función de devolución de llamada, segundo argumento. Pero aquí agregamos datos como segundo parámetro. Estos datos dependen de APA, diferente API, sin embargo, diferente objeto de datos con título. Esto es datos y cuerpo. Esto es cuerpo. Y por fin tenemos que pasar la función de devolución de llamada. Así que acabo de copiar de GetMethod y pegarlo aquí. Y echa un vistazo. Ver, aquí obtenemos estos datos con 101 post ID y el estado es éxito. Entonces así es como funciona Ajax en jQuery. Hoy en día, utilizamos el método de la receta, que es aún más fácil que esto. Yo solo quería mostrarte en jQuery, pero puedes usar lo que quieras. Depende totalmente de ti. 15. 14 Animar el sitio web en scroll: Ahora es el momento de aprender algo más emocionante, que es que todo desarrollador web debe aprender. Y eso es integración vertical en scroll. Mira lo bonito que se ve este sitio web cuando agregamos animación en scroll. Entonces di este sitio web del proyecto. Para que puedas practicar directamente la animación en este sitio web. Este proyecto lo creé cuando estaba trabajando en HTML y CSS curso. Pero paré la creación de ese curso por algún tiempo. Y solo enfocándonos en los tutoriales de YouTube. Abro este proyecto, este archivo index.html, que vive servidor. Entendamos la lógica de esta animación. Desplazamos la página web. Cuándo va a aparecer esta sección. Entonces tenemos que mostrar esa sección con animación. Entonces aquí tenemos que realizar solo dos pasos. Tenemos que identificar en qué punto se mostrará este contenido. Y segundo, tenemos que agregar animación para ese contenido. Entonces la primera pregunta es cómo podemos identificar el contenido. Entonces para eso, usamos un plugin jQuery llamado puntos de pago, agua agregando cualquier misión, usamos biblioteca llamada Animate ab.js. Esta biblioteca cuenta con casi 100 estilos de animaciones. Son ambos problemas se resuelve. Ahora veamos esto en el carbón. Entonces, antes que nada, tenemos que agregar tres enlaces CDN para esto. Primero es para jQuery, luego para waypoints, y luego para cualquier main.css, jQuery CDN, abre este primer enlace y ve por esta CDN minificada. Copia esto, y al final del cuerpo. Basada en ella. Ahora vuelve al navegador y busca los waypoints CDN. Y abre este enlace CDN GAS. Ahora asegúrate de copiar este enlace jQuery dot waypoints dot js CDN. Ahora después del jQuery CDN, enlace CDN. Ahora de nuevo, vector browser respondió animar CSS en este primer enlace. Y en la sección de instalación y usos, obtendrás el enlace de CDN, copiarlo y pegarlo en la sección de cabecera. Ahora para escribir código jQuery, tenemos que crear un archivo js. Creo una carpeta llamada Jazz. Y en esta carpeta, cree un nuevo archivo llamado script.js. Ahora vinculemos este archivo con nuestro archivo index.html. Después del enlace waypoint CDN, agregamos script con fuente. Y aquí, sí, es menos script.js. Guarde esto y vuelva al archivo script.js. Aquí agregamos documento dólar punto listo. Y dentro de esto agregamos función. La configuración está hecha. Ahora veamos sobre la animación. Digamos West, queremos agregar animación en este título de tabla de contenidos. Entonces en el archivo HTML, tenemos que darle a este elemento clase o ID. Podemos seleccionar ese elemento específico usando esa vista lateral aquí, clase equivale a dos tablas de contenido. Datos. Guarde esto. Y en el archivo script.js, dólar tabla de contenidos título, waypoint. Y en eso, tenemos que pasar una función que se ejecutará cuando este elemental esté en la parte superior de la página. Ahora dentro de esta función se llama lo que nuestra animación. Básicamente, ¿qué queremos hacer cuando este elemento corra a la cima? Entonces por ahora solo escribo console.log solo para arriba. Ventas es. Y échale un vistazo, abre la consola y desplázate por la página. Verás, cuando estos datos corren a la cima, nos sale ese mensaje. Entonces el waypoint está funcionando. Ahora agreguemos animación para eso. Así que de todos modos, punto css sitio web. Desde aquí, puede seleccionar los diferentes tipos de animaciones. Y cuando pasemos el cursor sobre ellos, entonces vas a obtener un icono de copia. Ahora aquí, quiero este periodo en animación izquierda. Así que copia a esos enemigos en nombre de clase. En archivo script.js. Justo aquí. Tabla de dólares de contenido. Clase punto agg. En primer lugar, tenemos que escribir aquí, animar, poner doble subrayado cualquier clase de método porque sin deuda, ninguna animación no va a funcionar. Y después de eso, solo pegamos nuestra animación. Entonces este Andes y el color marca esta página. Y cuando este título corra a lo más alto, ver, ya podemos ver la animación. Pero aquí está el único problema. Cuando no llegamos a la cima, entonces este título sigue siendo visible. Entonces tenemos que ocultarlo primero. En la carpeta Estilos. Abre este estilo ese archivo CSS. Hola Dan, yoduro, un estilo de comentario para animación. Para un título de tabla de contenido de vidrio. Hicimos la opacidad a cero. Y después de ese cristal tabla de contenidos título animado, doble guión bajo animado. Hacemos la opacidad a uno. Este es el vidrio que agregamos en nuestro método de clase ED. Guarde esto y vea qué estado no es visible. Entonces llegamos a la cima. Entonces se ejecuta esta animación. Ahora aquí hay un último número. Es esto, queremos ver la animación cuando el título se elevó a la mitad de la pantalla justo al principio. Para mostrar que en esta función waypoint, tenemos que pasar un segundo parámetro, que es objeto y objeto indirecto. Tenemos una propiedad llamada offset. Y en comillas dobles, pasa 50 al 80 por ciento, lo que quieras. Guarda esto y echa un vistazo. Ver, cuando ese título llegue al 80 por ciento a la cima, entonces se ejecutará esta animación. Para que puedas ver lo sencillo que es aplicar esta animación. Ahora quiero que pruebes esta misma animación de estos tres títulos principales. Pausa el video y trata de resolver esto. Y después de eso, vas a ver la solución para estos títulos. Ya les he dado identificaciones. Entonces duplico este código. En el lugar de esta clase. Agregamos tiene intro. Aquí, también tiene intro. Y en style.css, tenemos que agregar el mismo estilo para la introducción de ID. Añadimos aquí coma y agregamos intro. Aquí. Intro, animar, doble subrayado, animados estos, y ver que obtenemos esta animación. Ahora aquí en el archivo script.js, creé una variable. Dejar desfasar este objeto de desplazamiento. Así que corta esto y pegarlo aquí. Ahora simplemente escribe aquí, desfase aquí también, quita este objeto y agrega Offset. Ver, ahora nuestro código se ve mejor. Ahora no quiero aburrirte mostrando todas y cada una de las animaciones para este proyecto. Vas a probar eso por ti mismo. Así que simplemente muy rápido, agrego toda la animación para este proyecto excepto estos enlaces y duración. Porque tenemos que agregar aquí retraso para estos dos últimos enlaces. Para ese retraso, tenemos que darle a cada enlace una clase o ID única en el archivo HTML. Aquí, elemento de lista, mantenga presionada Alt en Windows y opción en Mac. Y crea múltiples cursor haciendo clic. Y la clase correcta. Listar subrayado, subrayado uno. Ahora presione Motores de escape, estos dos a este uno o tres días. En archivo script.js. Copia la animación de este título. Y al final, lo pego. Ahora justo en el selector. Entonces lista oscura, enlace uno aquí. Así que la lista de puntos enlaza uno. Y en animación, quiero que me paguen ¿verdad? Ahora, replicar este objetivo a más tiempo y cambiar los selectores. Escuchando, escuchando y menos Linked. Lista enlazada tres días. Y en el archivo CSS Shine dot, hacemos lo mismo para estas tres clases. Estos colores NDA. Ahora podría preguntarse, ¿cuál es el retraso? Hasta el momento, delay en el archivo style.css, agregamos enlace de lista de puntos a una animación delay a 0.15 s. Ahora duplique este estilo y cambie por Lista enlazada tres y delay a 0.3 s. Así que los asistentes, y echa un vistazo. Mira, obtenemos esta increíble animación. Pero cada enlace y compra esta animación, el usuario sabrá que nuestros enlaces individuales. Para que puedas ver lo sencillo y fácil que es agregar animación en el desplazamiento. Sólo hay que entender la lógica. Espero que aprendas mucho de este tutorial.