Selector de clases múltiples jQuery

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS, o más precisamente, el Modelo de objetos del documento (DOM) y JavaScript. Al elaborar los términos, simplifica el recorrido y la manipulación de documentos HTML, el manejo de eventos del navegador, las animaciones DOM, las interacciones Ajax y el desarrollo de JavaScript entre navegadores.

El selector .class en jquery se usa para seleccionar varias clases. 

Sintaxis: 

$(".class1, .class2, .class3, ...")

Parámetro: 

  • clase: Este parámetro es necesario para especificar la clase de los elementos a seleccionar.

Ejemplo 1: 

HTML

<!DOCTYPE html>
<html>
<head>
  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $(".geeks, .for, .GeeksforGeeks").css(
        "background-color", "green");
    });
  </script>
</head>
<body>
  <center>
    <h1 class="geeks">
      Welcome to GeeksforGeeks
    </h1>
     
<p>Geeks1</p>
 
    <p class="for">Geeks2</p>
 
     
<p>Geeks3</p>
 
    <p class="GeeksforGeeks">
      Geeks3
    </p>
 
  </center>
</body>
</html>

Producción:

  

Ejemplo 2: 

HTML

<!DOCTYPE html>
<html>
<head>
  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $(".c1, .c2").css(
        "background-color", "green");
    });
  </script>
</head>
<body>
  <center>
    <h1 class="geeks">
      Welcome to GeeksforGeeks
    </h1>
    <p class="c1">Geeks1</p>
 
    <p class="for">Geeks2</p>
 
    <p class="c2">Geeks3</p>
 
    <p class="GeeksforGeeks">
      Geeks3
    </p>
 
  </center>
</body>
</html>

Producción:

  

Navegadores compatibles:

  • Google Chrome 90.0+
  • Internet Explorer 9.0
  • Firefox 3.6
  • Safari 4.0
  • Ópera 10.5

Publicación traducida automáticamente

Artículo escrito por rathbhupendra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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