Objetivos

Uno de los ejercicios cuando estudiamos JS tradicional, fue modificar las clases en el DOM. El código "3_cambiandoclases.html" es el ejercicio mencionado. En este ejercicio te propongo que hagas el mismo efecto pero utilizando JQuery.

Instrucciones:

Crea un documento html en Visual Studio Code con el nombre 3_cambioclases_jquery.html
Copia el contenido del ejercicio "3_cambiandoclases.html"
Modifica el código para adaptarlo con instrucciones jQuery.
[Opcional] El botón "Eliminar clase" debe consumir la función removerClase() escrita en Js tradicional

Código: 3_cambiandoclases.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modificando Clases</title>
    <style>
        .mostrar{ display:block;}
        .ocultar{display:none}
        .cajaroja{border: 1px solid red}
    </style>
</head>
<body>
    <div>DIV1</div>
    <div id="div_ejemplo" class="mostrar">DIV2</div>

    <button onclick="mostrar();">Mostrar elemento</button>
    <button onclick="ocultar();">Oculte elemento</button>
    <button onclick="agregarClase();">Agregar clase</button>
    <button onclick="removerClase();">Eliminar clase</button>

    <script>
        function mostrar(){
            let elemento = document.querySelector('#div_ejemplo');
            elemento.classList.replace('ocultar','mostrar');
        }
        function ocultar(){
            let elemento = document.querySelector('#div_ejemplo');
            elemento.classList.replace('mostrar','ocultar');
        }
        function agregarClase(){
            let elemento = document.querySelector('#div_ejemplo');
            elemento.classList.add('cajaroja');
        }
        function removerClase(){
            let elemento = document.querySelector('#div_ejemplo');
            if(elemento.classList.contains('cajaroja'))
                elemento.classList.remove('cajaroja');
        }
    </script>

</body>
</html>