jQuery HTML

En este tutorial, vamos a explorar aún más mediante la comprensión de jQuery cómo usar jQuery selectores para cambiar el contenido o HTML de una página?

Si no está familiarizado con los selectores de jQuery, tienen una lectura rápida a través aquí: selectores de jQuery.

Vamos a aprender cómo consultar el DOM utilizando selectores utilizando selectores de jQuery mediante la construcción de este sencillo e impresionante mini-Pokedex por lo que vamos a empezar. Voy a estar usando el mismo texto modelo con un CDN para jQuery y MaterializeCSS. Vamos a crear una plantilla para empezar,

index.html

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>Pokedex</title>
<style>
body {
background: whitesmoke;
}
.card-image img {
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="center">My Pokedex</h1>
<div class="row">
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/007.png">
</div>
<div class="card-content">
<p>Add content</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://giantbomb1.cbsistatic.com/uploads/scale_small/13/135472/1891761-004charmander.png">
</div>
<div class="card-content">
<p>Add content</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://d2skuhm0vrry40.cloudfront.net/2019/articles/2019-10-31-15-44/pokemon_sword_shield_starters_grookey.jpg/EG11/resize/300x-1/quality/75/format/jpg">
</div>
<div class="card-content">
<p>Add content</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://pokemonletsgo.pokemon.com/assets/img/common/char-eevee.png">
</div>
<div class="card-content">
<p>Add content</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIuCM0zB4HkGx85Z8D6EdRVrlGxAUWT1dbwZcZFNzonHle__6Uhg&s">
</div>
<div class="card-content">
<p>Add content</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcvGrOH5M64dkU9a-XC-P5rDkPLABag47e88zGybJtFbWPjsUh&s">
</div>
<div class="card-content">
<p>Add content</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://pokemonletsgo.pokemon.com/assets/img/common/char-pikachu.png">
</div>
<div class="card-content">
<p>Add content</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiOrI-gcZubLIku3Ogxl6SLC2_ZmDgNjrPpk095qBxuxKX8lxmvA&s">
</div>
<div class="card-content">
<p>Add content</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>

salida

JQuery HTML - 4

Así que ahora tenemos algo que se parece a esto. Bastante enfriar la derecha?

Nuestro ejercicio sería leer el contenido HTML, cambiar y añadir contenido html.

En primer lugar vamos a ver cómo leemos algún contenido HTML a través de jQuery? Asegúrese de que ha creado un archivo index.js en el directorio raíz y vinculado a la index.html. Antes de eso, vamos a añadir algunos nombres de Pokemon manualmente.

<p class="center name">Squirtle</p>
<p class="center name">Charmander</p>

salida

Mi Pokedex

JQuery HTML - 5

Squirtle

JQuery HTML - 6

Charmander

Grande. Vamos a ver cómo podemos conseguir este contenido en jQuery,

index.js:

const names=$('.name');
console.log(names);

Tenemos una referencia a todos los elementos con el nombre de class dentro de nuestra variable nombres.

salida

    .fn.init(2) [p.center.name, p.center.name, prevObject: k.fn.init(1)]
0: p.center.name
1: p.center.name
length: 2
prevObject: k.fn.init [document]
__proto__: Object(0)

Como siempre volver un objeto jQuery y dentro de ésta que tenemos en el 0 ª y 1 de los índices de los nombres de nuestros primeros dos pokemons que hemos añadido. Vamos a ver,

    console.log(names[0],names[1]);

salida

    <p class="center name">Squirtle</p>
<p class="center name">Charmander</p>

Ahora tenemos estos elementos espalda. Para obtener el nombre de nuestros pokemon, vamos realmente tiene que apuntar el contenido de texto dentro de estos elementos. En jQuery hacemos esto,

    names.text();

salida

    SquirtleCharmander

El texto () Método nos devuelve el contenido del texto de ese elemento. Está bien, me he dado cuenta de que tengo que cambiar el título de nuestro sitio un poco, por lo que vamos a hacer esto ahora,

    const title=$('h1');
console.log(title.text('My Awesome Pokedex'));

salida

Podemos especificar el contenido del texto tiene que ser class ese elemento apuntado por pasar como una cadena dentro del método texto () . Se sobrescribirá completamente el contenido del texto actual con la que acabamos de añadir. También podemos ver el código HTML dentro de un elemento utilizando el método html () ,

    title.html();

salida

    "My Awesome Pokedex"

También podemos utilizar este método para añadir un poco de HTML a ese elemento. Vamos a usar estos dos métodos para establecer los nombres de algunos pokemons. Antes de hacer eso, vamos a darle un identificador único para cada pokemon y también escribir algo de HTML class algunas de las tarjetas,

<p class="center name">Squirtle</p>
...
<div class="card-content" id="1">

Ahora vamos a añadir algunos nombres utilizando el método de texto () . Creo que el 7 de pokemon en el Pokedex es Pikachu así que vamos a nombrar este pequeño individuo. Asegúrese de que ha dado un class del centro y nombre.

     <p class="center name">Add content</p>

index.js:

    $('#7 p').text('Pikachu');

salida

“Pikachu”
The pikachu card has the pikachu name on it

Vamos a añadir un poco de html en nuestra jigglypuff ahora.

index.js:

    $('#5').html('<p class="center name">Jigglypuff</p>');

salida

Mi Pokedex

JQuery HTML - 7

Jigglypuff

Nuestra Jigglypuff tiene un nombre ahora! Excelente. Pero espera, ¿era realmente Jigglypuff? No, es Wigglytuff! Podemos corregir esto usando el método de texto ().

index.js:

    $('#5 p').text('Wigglytuff');

Ahora tenemos la Wigglytuff, como debe ser! Sin embargo, lo que si se quiere actualizar cada elemento de la página y establecer que es el texto interno. La asignación de un identificador único, obteniendo una referencia a todos aquellos elementos sería tedioso. Podemos evitar esto mediante el uso de la propiedad de vainilla JS, que también está disponible en jQuery,

    names[3].textContent="Eevee";

salida

Mi Pokedex

JQuery HTML - 8

Eevee

esta manera se puede actualizar fácilmente el nombre o incluso el código HTML class todas las cartas. A modo de ejercicio, trate de nombrar todos estos Pokémon usando el primer método, así como el segundo método. Completar esta mini Pokedex por lo que podemos escribir un poco más JQuery en el próximo artículo y aprender algo más mientras completamos esta aplicación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *