CSS jQuery

jQuery CSS : Aquí, vamos a aprender acerca de la CSS jQuery con sintaxis y ejemplos.

En los artículos anteriores, hemos hablado de los selectores de jQuery y cómo añadir contenido al DOM HTML con jQuery. En este artículo, vamos a aprender cómo utilizar CSS con jQuery al estilo de los elementos en el DOM de forma dinámica? Practicaremos esto en el mini Pokedex estábamos construyendo última vez así que asegúrese de tener este código con usted,

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>
<script>
var id = 0;
</script>
<body>
<div class="container">
<h1 class="center">My Pokedex</h1>
<div class="row cards">
<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" id="1">
<p class="center name">Squirtle</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" id="2">
<p class="center name">Charmander</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" id="3">
<p class="center name">Grookey</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" id="4">
<p class="center name" id="4">Eevee</p>
</div>
</div>
</div>
</div>
<div class="row cards">
<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" id="5">
<p class="center name">Wigglytuff</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" id="6">
<p class="center name">Galarian Ponyta</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" id="7">
<p class="center name">Pikachu</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" id="8">
<p class="center name">Mew</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 CSS - 4

I han nombrado todos los pokemons (esperemos que tienen razón). Asegúrese de que ha limpiado los index.js del artículo anterior. Lo primero que quiero mostrar es cómo ocultar y mostrar elementos en Mostrar. Si lo hacíamos con JavaScript nosotros sencillamente agarrarnos de ese elemento y en su propiedad de estilo define la presentación en ninguno. Primero vamos a obtener una referencia a estas tarjetas usando jQuery,

    const cards=$('.card');
cards[0].style.display="none";

de salida: La primera tarjeta se retira del DOM.

Esta es la forma en que normalmente haríamos uso de vainilla JS. Vamos a hacer esto utilizando el método jQuery ocultar () que oculta un cierto elemento del DOM. Antes de eso, el aviso de que tengo todas las cartas con un nombre class ‘tarjetas que he dado a mí mismo. Podemos utilizar este class para obtener una referencia a todas las cartas sobre el DOM. Esto sería una gran solución class el ejercicio class el artículo anterior. El objetivo de esta primera Let,

    const cards=$('.cards');
console.log(cards);

Salida:

    k.fn.init(2) [div.row.cards, div.row.cards, prevObject: k.fn.init(1)]
0: div.row.cards
1: div.row.cards
length: 2
prevObject: k.fn.init [document]
__proto__: Object(0)

Se puede ver el elemento 0 se nos da la primera fila de pokemons y el 1 de elemento nos da la segunda fila. Podemos todos los elementos en un único índice de poner tanto las filas dentro de un div con las tarjetas for ». for palo de momento nos dejó a lo que ya hemos hecho.

digamos que su pobre Squirtle perdió una batalla fuerte. No se puede tener en su equipo, ya que necesita más descanso y tiempo para sanar. Podemos eliminar el Squirtle de la Pokedex mediante el uso de un filtro de jQuery. Los filtros son nada más que pseudo-clases de CSS como : primero , : nth-child , : first-child etc. Son precedidos por dos puntos. Dentro de las tarjetas, variable de la primera tarjeta es la de la Squirtle para que podamos eliminar fácilmente mediante el selector de jQuery y añadiendo el método CSS jQuery ocultar a la misma. Vamos a hacer esto,

    $('.cards :first').hide();

salida

JQuery CSS - 5

Voila! El Squirtle ya no forma parte de la Pokedex. Vamos a ponerlo de nuevo utilizando el método show () ,

    $('.cards :first').show();

salida

JQuery CSS - 6

Grande. Ahora podemos Ocultar y mostrar los elementos que utilizan la piel () y show () métodos de jQuery . El estilo de dejar que nuestros elementos usando jQuery CSS ahora.

Quiero que el título sea un poco más pequeño. Así que vamos a darle un tamaño de fuente de 20 píxeles.

    $('h1').css('font-size','20px');

salida

Lo siguiente que quiero es dar todas estas tarjetas cierto color de fondo. Normalmente, el color de fondo representa el tipo class un Pokémon For ex class particular, verde un tipo de hierba, azul class tipo de agua, etc. Así que vamos a hacer esto,

    $('.cards :first').css('background','#90caf9');

salida

JQuery CSS - 7

Nuestra Squirtle tiene ahora un fondo de azul debido a su tipo de agua! Frio. Observe cómo la tarjeta interior permanece sin color. ¿Puedes averiguar por qué?

Esto es debido al elemento exacto que estamos estableciendo el color de fondo. En realidad estamos estableciendo el color de fondo del elemento de envolver la tarjeta debido a nuestro selector. Veamos ahora algunas filtros para apuntar a la tarjeta exacta ahora y darle un color de fondo amarillo eléctrico en nuestro pikachu.

    $('body > div > div:nth-child(3) > div:nth-child(3) > div').css('background-color','#ffea00');

salida

JQuery CSS - 8

Ahora puede ver toda la tarjeta que tiene un color de fondo. El elemento que nos estamos enfocando en realidad decide cómo las propiedades CSS se establecen. A modo de ejercicio, tratar de averiguar los tipos de todo el resto de Pokemon y darles un color de fondo class la misma.


Deja un comentario

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