5 ejercicios jquery para mejorar tus skills

Javascript Html jQuery

Practicar en la programación es muy importante para familiarizarse con la sintaxis y semántica de un lenguaje específico. Buscar ejercicios de codificación online puede ser una excelente solución para mejorar tus habilidades en la escritura de código.

En este artículo, veremos cinco ejercicios para practicar con jQuery.

¿Qué es jquery?

jQuery es una biblioteca de funciones javascript destinada a aplicaciones web, cuyo objetivo es simplificar la programación de páginas HTML. La API de jQuery permite gestionar fácilmente actividades que resultarían largas o complejas en JavaScript.

Los ejercicios que se propondrán tienen una dificultad gradual, con respecto a las funciones de jQuery, la interacción jQuery HTML y también el uso de diferentes palabras clave en jQuery. Al final del artículo encontrarás las soluciones. ¡No mires todavía!

¿Cómo obtener el valor de un un textbox usando jQuery? (El código h tml puedes escribirlo como prefieras, no hay vínculos, siempre que sea correcto para completar el ejercicio)
Encuentra un elemento que contenga una clase específica usando jQuery. Ejemplo de código:

<body>
    <div id="div1" class="divclass"></div>
    <div id="div2" </div>
    <div id="div3" </div>
</body>
<style>
    .divclass {
        width: 90px;
        height: 75px;
        margin: 5px;
        background-color:#F3E2A9
    }
</style>

Recupera el valor almacenado en un elemento div.
Ejecuta una animación modificando el número de fotogramas. Código de ejemplo:

<body>
    <p><input type="button" value="Run"></p>
    <div></div>
</body>

Eventos jQuery: muestra los textos cuando se activan los eventos mouseup y mousedown.

En estos ejercicios podrás practicar con algunas de las características cruciales de jQuery, las cuales ayudan a simplificar mucho las tareas, en lugar de desarrollarlas mediante código JavaScript puro (sin el apoyo de bibliotecas).

Conocer jQuery es una ventaja como desarrollador web, ya que permite ampliar tus conocimientos y hacer que tu currículum sea más atractivo.

Después de intentar resolver los ejercicios, veamos las soluciones con la explicación correspondiente del desarrollo:

En este ejercicio, también se tiene en cuenta el uso de HTML. Obviamente, el lenguaje de marcado solo sirve para mostrar los elementos en la pantalla con los que se interactuará. En este ejercicio se utiliza el jQuery this, diferente al que conocemos en JavaScript. $(this) se refiere al objeto al que pertenece. Básicamente, es igual a la palabra clave que encontramos en JS. Pero cuando esta palabra clave se utiliza dentro de $(), se convierte en un objeto jQuery y ahora podemos utilizar todas las propiedades de jQuery en este método.

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-git.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Como obtener el valor de un textbox usando jQuery:</title>
</head>
<body>
    <input type="text" value="Añade el input">
</body>
</html>

JavaScript:

$( "input" )
.keyup(function() {
    var tvalue = $( this ).val();
    console.log(tvalue);
})
.keyup();

En el ejemplo de código hay tanto CSS como HTML, por lo que debemos escribir HTML, CSS y JavaScript. En este ejercicio es importante destacar cuánto simplifica jQuery las operaciones a realizar cuando interactúa con los dos lenguajes de marcado. Solo se necesitan unas pocas líneas para obtener el elemento deseado. El método hasClass devolverá un valor booleano según la presencia (o ausencia) del elemento dentro de la clase especificada. En este ejercicio también usamos jQuery-CSS para resaltar la simplicidad de la biblioteca jQuery.

HTML + CSS:

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <div id="div1" class="divclass"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

.divclass {  
    width: 90px;
    height: 75px;
    margin: 5px;
    background-color:#F3E2A9
}

JavaScript:

console.log($( "#div1" ).hasClass( "divclass" ).toString());
console.log($( "#div2" ).hasClass( "divclass" ).toString());
console.log($( "#div3" ).hasClass( "divclass" ).toString());

Este ejercicio es muy sencillo. Siguiendo la línea del ejercicio anterior, jQuery es muy versátil cuando se trata de extraer datos. A menudo puede resultar útil en la programación web. En este caso, .data es un método incorporado que almacena datos asociados con los elementos correspondientes o devuelve el valor con el nombre indicado para el primer elemento en el conjunto de elementos coincidentes.

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-git.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Recupera el valor almacenado en el elemento div.</title>
</head>
<body>
    <div>
        Mis colores preferidos son
        <span></span>
        e
        <span></span>
    </div>
</body>
</html>

JavaScript:

$( "div" ).data( "test", { first: "Red", last: "Green." });
$( "span:first" ).text( $( "div" ).data( "test" ).first );
$( "span:last" ).text( $( "div" ).data( "test" ).last );

En este ejercicio, las cosas se vuelven interesantes. Aprendemos el uso de los eventos jQuery a través de las funciones jQuery. En jQuery, el método toggle ([duration] [, complete]) se utiliza para mostrar u ocultar los elementos correspondientes. Tiene los siguientes parámetros: duration - una cadena o un número que determina cuánto tiempo se ejecutará la animación. [Tipo: número o cadena]

complete : una función para llamar después de que se complete la animación. [Type: Function()].

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <style>
        div {
            width: 150px;
            height:85px;
            margin: 5px;
            float: left;
            background: #254BF4;
        }
    </style>
    <meta charset="utf-8">
    <title>Ejecuta una animación cambiando el número de fotogramas</title>
</head>
<body>
    <p><input type="button" value="Run"></p>
    <div></div>
</body>
</html>

JavaScript:

jQuery.fx.interval = 200;
$( "input" ).click(function() {
    $( "div" ).toggle(3000);
});

Un ejercicio muy útil para hacernos entender cuánto más rápido es jQuery que el JS nativo. Manejar eventos, funciones y animaciones se vuelve mucho más sencillo, ahorrando un número considerable de líneas de código. jQuery tiene una serie de funciones integradas dedicadas que también permiten gestionar directamente los eventos o las animaciones cuando se interactúa con el mouse en la página web. Leer la documentación de la biblioteca en este sentido es muy importante.

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <meta charset="utf-8">
    <title>Muestra el texto cuando los eventos mouseup y mousedown sie activan</title>
</head>
<body>
    <p>Presiona el mouse y suelta aquí.</p>
</body>
</html>

JavaScript:

$( "p" )
.mouseup(function() {
    $( this ).append("Mouse up." );
})
.mousedown(function() {
    $( this ).append( "Mouse down" );
});

Hemos visto brevemente la eficiencia de jQuery a través de algunos ejercicios de diferentes tipos. Sin descuidar la dinámica de un sitio web y aprovechando pocas pero efectivas líneas de código a nuestro servicio. Las herramientas a disposición de un desarrollador web son realmente numerosas, por lo que es importante conocerlas y apropiarse de ellas, para tener una mayor conciencia del código que se está escribiendo.

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo