volver a M06 Desarrollo web en entorno cliente

Referencias

Api de referencia jQuery
Completa referencia sobre selectores
Referencia sobre métodos para recorrer el DOM
Referencia sobre métodos para manipular el DOM
Descarga jQuery desde aquí

Ejercicios

Crea un pequeño código con jQuery que cree un alert con el texto: "Página cargada y lista" y que se ejecute solo cuando la página esté cargada y lista. Hazlo con una función anónima y con una función con nombre.

Dado el siguiente código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="primero">
Soy un experto espadachín y tengo una gran habilidad en el manejo de la muerte. No es una habilidad que me aporte placer, pero se me da bien, simplemente.
</div>
<div id="segundo">
Cuando el mal gobierne, una voz despertará del Reino Sagrado, llamará a los destinados a ser Sabios que moran en los cinco templos. Uno en una alta montaña... Uno bajo un vasto lago... Uno dentro de la casa de los muertos... Uno dentro de una diosa de la arena... Junto al Héroe del Tiempo, los que despertarán atarán al mal y regresarán la luz de paz al mundo...
</div>
<div id="tercero">
El cerebro es un dispositivo computacional que ejecuta un proceso electroquímico. Tu consciencia es una propiedad emergente de dicho proceso.
En otras palabras eres tu proceso electroquímico, fundamentalmente tienes la experiencia de una existencia continua. Eres tú en este momento temporal. el mismo tu que fuiste en el pasado y tienes la sensación de moverte en esta continuidad de ser tu en el futuro. A veces, el cerebro puede sufrir un traumatismo, lo que da una discontinuidad en el proceso electroquímico, como cuando noquean a un boxeador. Cuando esto ocurre el cerebro ya no ejecuta su proceso electroquímico generador de consciencia, por lo tanto se pierde la consciencia. En este momento temporal, tu consciencia, todo lo que eres, la continuidad de tu ser ha dejado de existir en el mundo físico. Momentos después, el proceso electroquímico puede comenzar de nuevo, lo que permite que la consciencia emerja a partir de la información almacenada en tu cerebro.
Pero... ¿Donde estás tú mientras tanto? ¿No hemos de suponer que, en el instante en que se pierde la consciencia, la persona muere? Que aparezca o no una nueva consciencia en el mismo cerebro es totalmente inconsecuente para la consciencia muerta. La nueva consciencia es simplemente una nueva persona, como emerge del mismo cerebro, tiene acceso a todos los recuerdos y estructuras cognitivas de la consciencia muerta, por lo que se cree una misma persona. Pero en realidad es solo un impostor. Hereda el cuerpo y cerebro del habitante anterior, que ahora está muerto.
</div>
</body>
</html>

Realiza un código con jQuery que si hay 2 o más div's en la página enseñe un alert con el texto: "Ser el elegido es como estar enamorado,nadie te dice si lo estás o no, solamente lo sabes, al cien por cien, de la cabeza a los pies".

Utilizando el código del ejercicio anterior y jQuery añade un salto de línea (br) entre cada párrafo. Usa como referencia el párrafo id="segundo" ($('#segundo'))

Dado el siguiente código

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <h3>Lista de juegos mejorados para Xbox One X</h3>
    <ol>
      <li>
        Assassin's Creed Origins
      </li>
      <li>
        Wolfenstein II: The New Colossus 
      </li>
      <li>
        Gears of War 4
      </li>
      <li>
        Super Mario Odissey
      </li>
      <li>
        Halo 5
      </li>
      <li>
        The Evil Within 2
      </li>
    </ol>
  </body>
</html>

Usando jQuery modifica la lista ordenada para cambiar el juego equivocado y sustituirlo por otro correcto (Fallout 4, por ejemplo). Por cierto el juego equivocado es Super Mario Odissey

Crea un script que al clicar en el botón "Construyeme" cree el siguiente elemento de la progresión, al clicar el botón "borra el primero" borre el primer elemento de la lista y al introducir un número y clicar el botón "borra el elemento" borre el elemento de la posición indicada

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h2>Ayúdame a construirme</h2>
    <ul>
      <li>
        2
      </li>
      <li>
        4
      </li>
      <li>
        8
      </li>
    </ul>
    <input type="button" name="construir" value="Construye"/>
    <input type="button" name="borrarFirst" value="Borra el primero"/>
    <input type="button" name="borraSeleccion" value="Borra el elemento"/>
    <input type="text" name="elementToDelete"/>
  </body>
</html>

Utilizando jQuery el botón Crear enlace tiene que crear un enlace en el primer párrafo con la siguiente especificación: texto: "nuevo enlace", href: "http://nuevoenlace.com", class: "myClass". Por otro lado el botón Clonar el enlace tiene que permitir clonar el enlace creado dentro del párrafo especificado para ello.

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h2>Creación i clonación de elementos con jQuery</h2>
    <p id="firstP">

    </p>
    <p>
      <h3>Aquí van los elementos clonados</h3>
    </p>
    <input type="button" name="creardorEnlace" value="Crear enlace"/>
    <input type="button" name="clonadorEnlace" value="Clona el enlace"/>
  </body>
</html>

Modifica el ejericio anterior añadiendo un botón y un input que permita cambiar el atributo href del primer enlace y añadir el atributo enlaceOriginal=true

Dado el siguiente código:

html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
      /*Asignar el evento click:
      *input(listaGeneral) => crearJuegoLista
      *input(listaAnual) => asignarListaYear
      */
      $(function(){
      });

      /*
      *Recorre el array asociativo juegos y crea un nuevo elemento de la lista
      * en el div de Listado de juegos general.
      * Asocia a ese elemento de la lista (li) el año del juego usando $.fn.data
      */
      function crearJuegoLista(){
        var juegos = {
          'Days Gone':'2018',
          'Far Cry 5':'2018',
          'Monster Hunter: World':'2018',
          'Assassins Creed Origins':'2017',
          'Horizon Zero Dawn':'2017',
          'Destiny 2':'2017',
          'Dark Souls III':'2016',
          'Final Fantasy XV':'2016'
        };
        //tu código empieza aquí 
      }

      /*
      *Recorre la lista general y consultando la información guardada en data
      * de los elementos crea un nuevo elemento en la lista del año que toque
      */
      function asignarListaYear(){
      }
    </script>
  </head>
  <body>
    <h2>Usando el data en jQuery</h2>
    <div>
      <h3>Listado de juegos General</h3>
      <ul>
      </ul>
    </div>
    <div>
      <h3>Listado de juegos en <span>2018</span></h3>
      <ul>
      </ul>
    </div>
    <div>
      <h3>listado de juegos del <span>2017</span></h3>
      <ul>
      </ul>
    </div>
    <div>
      <h3>listado de juegos del <span>2016</span></h3>
      <ul>
      </ul>
    </div>
    <div>
      <input type="button" name="listaGeneral" value="Crear listado general"/>
      <input type="button" name="listaAnual" value="Crear listado por año"/>
    </div>
  </body>
</html>

Implementa las funciones tal y como se especifica en los comentarios

Dado el siguiente código:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <div id="primero">
      Soy un experto espadachín y tengo una gran habilidad en el manejo de la muerte. No es una habilidad que me aporte placer, pero se me da bien, simplemente.
    </div>
    <div id="segundo">
      Cuando el mal gobierne, una voz despertará del Reino Sagrado, llamará a los destinados a ser Sabios que moran en los cinco templos. Uno en una alta montaña... Uno bajo un vasto lago... Uno dentro de la casa de los muertos... Uno dentro de una diosa de la arena... Junto al Héroe del Tiempo, los que despertarán atarán al mal y regresarán la luz de paz al mundo...
    </div>
    <div id="tercero" align="justify">
      El cerebro es un dispositivo computacional que ejecuta un proceso electroquímico. Tu consciencia es una propiedad emergente de dicho proceso.
      En otras palabras eres tu proceso electroquímico, fundamentalmente tienes la experiencia de una existencia continua. Eres tú en este momento temporal. el mismo tu que fuiste en el pasado y tienes la sensación de moverte en esta continuidad de ser tu en el futuro. A veces, el cerebro puede sufrir un traumatismo, lo que da una discontinuidad en el proceso electroquímico, como cuando noquean a un boxeador. Cuando esto ocurre el cerebro ya no ejecuta su proceso electroquímico generador de consciencia, por lo tanto se pierde la consciencia. En este momento temporal, tu consciencia, todo lo que eres, la continuidad de tu ser ha dejado de existir en el mundo físico. Momentos después, el proceso electroquímico puede comenzar de nuevo, lo que permite que la consciencia emerja a partir de la información almacenada en tu cerebro.
      Pero... ¿Donde estás tú mientras tanto? ¿No hemos de suponer que, en el instante en que se pierde la consciencia, la persona muere? Que aparezca o no una nueva consciencia en el mismo cerebro es totalmente inconsecuente para la consciencia muerta. La nueva consciencia es simplemente una nueva persona, como emerge del mismo cerebro, tiene acceso a todos los recuerdos y estructuras cognitivas de la consciencia muerta, por lo que se cree una misma persona. Pero en realidad es solo un impostor. Hereda el cuerpo y cerebro del habitante anterior, que ahora está muerto.
    </div>
    <input type="button" name="btn" value="Mostrar/Ocultar" />
  </body>
</html>

Utilizando la función $.fn.toggle crea un código que oculte y muestre los divs al clicar el botón "mostrar/ocultar"

Dado el siguiente código:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
    $(function(){
      $('button[name=btnMostrar]').click(mostar);
      $('button[name=btnOcultar]').click(ocultar);
      $('button[name=btnAparecer]').click(aparecer);
      $('button[name=btnDesvanecer]').click(desvanecer);
      $('button[name=btnDeslizarMostrar]').click(mostarDeslizando);
      $('button[name=btnDeslizarOcultar]').click(ocultarDeslizando);
    });

      function mostar(){
      }

      function ocultar(){
      }

      function aparecer(){
      }

      function desvanecer(){
      }

      function mostarDeslizando(){
      }

      function ocultarDeslizando(){
      }
    </script>
  </head>
  <body>
    <p>
      I know Kung Fu. Really?. Show me.
    </p>
    <button name="btnMostrar">Mostrar</button>
    <button name="btnOcultar">Ocultar</button>
    <button name="btnAparecer">Aparecer</button>
    <button name="btnDesvanecer">Desvanecer</button>
    <button name="btnDeslizarMostrar">Mostrar deslizando</button>
    <button name="btnDeslizarOcultar">Ocultar deslizando</button>
  </body>
</html>

Al clicar los botones tienen que provocar los efectos correspondientes. Después intenta ejecutar un alert informando de lo que ha ocurrido al acabar cada efecto.

JQuery

Referencias

Ejercicios

Menú de navegació

Cerca