6 - Selección de elementos utilizando las clases CSS definidas.

Recordemos que definimos clases en CSS cuando una regla de estilo puede ser igual para un conjunto de marcas HTML.

Mediante este nombre de clase podemos acceder a todos los elementos utilizando la función $:

x=$(".nombre de clase");

problema:Mostrar una serie de lenguajes de programación y aplicar un estilo resaltado para aquellos lenguajes que son orientados a objetos. Cuando se presione un botón agregar la propiedad background-color a todos los elementos de dicha clase.

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

<body>
  <p>Cuales de los siguientes lenguajes son orientados a objetos:
    <span class="resaltado">Java</span>, VB6, <span class="resaltado">C++</span>, C,
    <span class="resaltado">C#</span>, Cobol ?</p>
  <input type="button" id="boton1" value="ver resultado">

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#boton1");
  x.click(resaltar);
}

function resaltar() {
  let x = $(".resaltado");
  x.css("background-color", "#ffff00");
}

estilos.css

.resaltado{
  color:#000000;
}

El código nuevo es:

  let x = $(".resaltado");
  x.css("background-color", "#ffff00");

Primero generamos un objeto jQuery que guarda la referencia a todos los elementos que tienen definida la clase .resalatado y luego fijamos como color de fondo el amarillo a dichos elementos.


Retornar