jQuery | Selector [atributo|=valor]

El selector [atributo|=valor] se usa para seleccionar cada elemento con un atributo específico, con un valor de string específico (como «geeks») o una string inicial seguida de un guión (como «geeks-forgeeks»).
 

Sintaxis:  

$("[attribute|='value']")

Parámetro:  

  • atributo: este parámetro es necesario para especificar el atributo que se buscará.
  • value : este parámetro es necesario para especificar la string con la que debe comenzar el valor del atributo.

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() {
            $("p[title|='GeeksForGeeks']").css(
              "background-color", "green");
        });
    </script>
</head>
 
<body>
    <center>
        <h1>Geeks For Geeks</h1>
        <p title="GeeksForGeeks">
          Geeks1
      </p>
 
 
       
        <p title="google">
          Geeks2
      </p>
 
 
       
        <p title="Tom">
          Geeks3
      </p>
 
 
       
        <p title="See You GeeksForGeeks">
          Geeks4
      </p>
 
 
       
        <p title=
      "GeeksForGeeks-is the best place to learn">
          Geeks5
      </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() {
            $("p[title|='google']").css(
              "background-color", "green");
        });
    </script>
</head>
 
<body>
    <center>
        <h1>Geeks For Geeks</h1>
        <p title="GeeksForGeeks">
          Geeks1
      </p>
 
 
       
        <p title="google">
          Geeks2
      </p>
 
 
       
        <p title="google- tom">
          Geeks3
      </p>
 
 
       
        <p title="See You GeeksForGeeks">
          Geeks4
      </p>
 
 
       
        <p title=
       "GeeksForGeeks-is the best place to learn">
          Geeks5
      </p>
 
 
    </center>
 
</body>
 
</html>

Producción: 
 

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 *