jQuery | [attribute*=value] Selector

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

Syntax:

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

Parameters: This selector have two parameters.

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

Return: It returns an array of all selected elements.

Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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="Adress" />
    <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=
  </script>
    
<script>
    $(document).ready(function() {
        $("input[name*='name']").css({
            background: "green"
        });
    });
</script>
  
</html>

chevron_right


Output:

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
</script>
  
<script>
    // change color.
    $("#CC").click(function() {
        $("div[target*='first']").css({
            background: "green"
        });
    });
</script>
  
</html>

chevron_right


Before:

After:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.