Aunque con la llegada de ECMA Script 6 pienso que el uso de jQuery cada vez está menos justificado, esta librería de Javascript sigue estando ampliamente extendida y de hecho es la más usada del mercado.
Durante mucho tiempo, he utilizado esta librería para programar con Javascript. Por su sencillez, la he utilizado incluso mucho más que el propio Javascript nativo. Sin embargo, salvo que necesites aprender jQuery porque es una tecnología que te requieren usar en un proyecto, pienso que no se justifica su aprendizaje. Este curso que tienes ante tí está muy trabajado, con gran cantidad de ejercicios y videotutoriales, pero todo lo que tienes aquí lo tienes en el curso de Javascript con ECMA Script 6, el cual te recomiendo por encima de este.
¿Para qué sirve?
Lecciones
Instalación
Ejemplo básico
Llamada a función I $(document) espera a que el código de la página esté cargado, si quiero esperar a que además las imágenes de la página estén cargadas usaré $(window) en su lugar. Llamada a función II Llamada a función III Llamada a función IV Acerca de la función click A veces esta […]
Método val()
Ejercicio val() Crear una página con un <input type=”text”> y dos botones. Al pulsar sobre un botón se modificará el value del cuadro de texto. Al pulsar sobre el otro botón, se mostrará un mensaje de alerta con el value del cuadro de texto
Eventos
Para realizar los siguientes ejercicios de eventos, dibujar en pantalla un cuadro de texto (un <input type=”text” >). Ejercicio Para ejecutar una función cuando el elemento toma el foco: Para lanzar una función cuando el elemento pierde el foco: Ejercicio Mouse up, Mouse down Ejercicio Objeto evento Es creado automáticamente […]
Efectos
Para realizar los siguientes ejercicios de efectos, dibujar en pantalla una capa roja y dos botones (los botones no deben estar dentro de la capa). show / hide Cuando haga click sobre uno de los botones, la capa roja deberá ocultarse. Cuando haga click sobre el otro, deberá mostrarse. “show” […]
Ejercicios CSS
Ejercicio Ejercicio Nota: un elemento “span” es una capa (div) alineada con el texto.
Slider
Ejercicios 1. Empezando 2. Con un solo botón 3. Con efecto Pista: 4. Sin definir número de elementos Pista: 5. Slider que avanza automáticamente Pista 6. Con cambio de dirección Pista
Método attr
Añadir un atributo Eliminar un atributo: Recuperar el valor de un atributo: Ejercicios attr() 1. Cada vez que hacemos click sobre el botón la imagen cambia, así hasta el infinito. 2. Imágen aleatoria Al pulsar el botón, cambiar la imágen por una aleatoria. $(this) Ejercicio imagen secreta Una imagen es […]
addClass / removeClass / hasClass / toggleClass
Asociar una clase Cambiar clase, si está, quitarlo, si no está, ponerlo Desasociar clase ¿Tiene clase? Ejercicios 1. animate.css Usando addClass, hacer que al pulsar un botón este coja los estilos necesarios y suministrados por la librería animate.css para que se produzca la animación correspondiente Para que funcione, habrá que añadir el […]
Accesos al hijo, al padre y al hermano
closest(); closest() devuelve la primera coincidencia envolviendo al elemento indicado (en este caso $(this)). parent() devuelve el elemento inmediatamente por encima, sólo si este coincide con el selector especificado. parents() devuelve todas las coincidencias por encima del elemento indicado. find Busca el input type=”radio” y cambia su propiedad checked a […]
Bucle
Ejercicios 1. Ejercicio tipo test con bucle Para recorrer todos los radios que estan marcados usaremos: 2. Ejercicio presupuesto 3. Carta de recomendacion A continuación te facilito los textos que puedes usar. No hace falta que los uses todos; con tres de cada categoría, sirve Motivo Cuento con varios años […]
Hacer un filtro
Al pulsar sobre un enlace, las capas de colores inferiores deben filtrarse en función del enlace pulsado. Para ello, recorreremos todas las capas, añadiendo o eliminando el class “oculta” en el caso de que el href (con #) del enlace coincida con alguno de los class de la capa Utilizaremos […]
text() y html()
Para devolver el texto contenido en el cuerpo de un elemento: Para escribir una cadena de texto en el cuerpo de un elemento: Ejercicio método HTML Crear una capa cuyo id será “wrapper”.Tendré dos botones que harán las siguientes acciones: Pintar una capa roja dentro de wrapper. Mostrar un alert […]
Detectar cuando pulso fuera de cierta capa
DOM
Document Object Model
Plugins
Monteserín Gallery Descargar monteserinGallery.js y atendiendo a la documentación del enlace, reproducirlo con nuestras propias fotos. Ver monteserin gallery Kwicks Enlce a kwicks Ejercicio: implementar el plugin kwicks para que muestre tres pestañas con la siguiente apariencia: LightBox 2 Plugin lightbox Descargar este plugin y echarlo a andar siguiendo su documentación. Notas: […]
Validación de formularios sin plugin
Validar si hay algo escrito 1. Validar si hay algo escrito 2. Validar si hay algo escrito II 3. Validar si es un número Validar mail 1. Validar mail I Validar que hemos escrito un único carácter y que es una letra o un número. /^ y $/ delimitan el principio y el […]
Buenas prácticas con jQuery
Refrescar el DOM sólo cuando sea necesario Evitar acceso repetido a objetos jQuery
Cómo crear un plugin de jQuery con parámetros
index.html plugin.js