Open In App

jQuery [attribute|=value] Selector

Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery [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:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </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>


Output:

Example 2: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(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>
        <button>Change color</button>
    </center>
</body>
 
</html>


Output: 



Last Updated : 10 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads