jQuery | [attribute|=value] Selector

The [attribute|=value] selector is used to select each element with a specific attribute, with a specific string value (like “geeks”) or starting string followed by a hyphen (like “geeks-forgeeks”).

Syntax:

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

Parameter :

attribute : This parameter is required to specify the attribute to be searched.
value : This parameter is required to specify the string the attribute value should start with.

Example-1:

<!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 palce to learn"> 
          Geeks5 
      </p> 
    </center> 
  
</body> 
  
</html> 

Output:

Example-2:

<!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 palce to learn"> 
          Geeks5 
      </p> 
    </center> 
  
</body> 
  
</html> 

Output:

My Personal Notes

Recommended Posts: