jQuery [attribute*=value] Selector

Last Updated : 10 Jul, 2023

jQuery (“[attribute*=value]”) Selector is used to select all elements with attribute specified by attribute parameter that contains the word specified by the value parameter.

Syntax:

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

Parameters: This selector has two parameters.

attribute: attribute specifies the attributes that need to find.
value: value is the string that is matched with the value of every element having the specified attribute.

Example 1: In this example, we are using jQuery [attribute*=value] Selector.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <input type="text" name="name" placeholder="Name" />
    <br />
    <!--This input element contains name 
    attribute which have name string in it-->
    <input type="text" name="fathers_name"
           placeholder="Father's Name" />
    <br />
    <!--This input element contains name 
     attribute which have name string in it-->
    <input type="text" name="address"
           placeholder="Address" />
    <br />
    <input type="email" name="email"
           placeholder="Your Email" />
    <br />
    <input type="password" name="password"
           placeholder="Your Password" />
    <br />
    <input type="button" value="Register" />
</body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        $("input[name*='name']").css({
            background: "green"
        });
    });
</script>
 
</html>

Output:

Example 2: Here is another example of jQuery [attribute*=value] Selector.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">.
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: yellow;
            margin: 20px;
        }
    </style>
</head>
 
<body>
    <!--All these will be selected because
    target attribute contains first as value-->
    <div target="first"> First div </div>
    <div target="first"> First div </div>
    <div target="first"> First div </div>
    <div target="second first">
        Second Div
    </div>
    <!-- this will be selected as target 
     attribute contains first as value-->
    <div target="second">
        Second Div
    </div>
    <button id="CC">Change Color</button>
</body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
    // change color.
    $("#CC").click(function () {
        $("div[target*='first']").css({
            background: "green"
        });
    });
</script>
 
</html>