Skip to content
Related Articles

Related Articles

jQuery | [attribute^=value] Selector
  • Last Updated : 27 Feb, 2019

The [attribute^=value] selector is used to select all elements with given attribute specified by attribute parameter that starts with the word specified by value parameter.

Syntax:

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

Parameters: This selector contains two parameter which are listed below:

  • attribute: It is used to specify the attributes which need to select (any html element).
  • value: It contains the string from which the value of every selected element’s value should start.

Return Value: It returns an array of all selected elements.

Example 1: This example uses [attribute^=value] selector to select those elements whose class name starts with top.






<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery [attribute^=value] Selector
    </title>
      
    <script src=
    </script>
</head>
  
<body>
    <h3 class="top-heading">
        Welcome to GeeksforGeeks
    </h3>
      
    <p class="top-content">
        A Computer Science portal for geeks.<br/> It
        contains well written, well thought and well
        explained<br/> computer science and
        programming articles 
    </p>
  
    <p class="topcoder">
        Competitive programming is not tough.
    </p>
      
    <p class="be-on-top">
        Every one should learn Programming.
    </p>
      
    <!-- Script to use attribute^=value selector -->
    <script>
        $(document).ready(function() {
            var select = $("[class^='top']")
            select.css({
                background:"green"
            })
        });
    </script>
</body>
</html>                    

Output:

Example 2: This example uses [attribute^=value] selector to select those elements whose class name starts with top.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery [attribute^=value] Selector
    </title>
      
    <style>
        div{
            width: 50px;
            height:50px;
            background-color: yellow; 
            margin: 20px;
        }
    </style>
</head>
  
<body>
      
    <!-- All div selected whose class
    starts with top -->
    <div class="top">
        One
    </div>
      
    <div class="top-only">
        Two
    </div>
      
    <div class="top second-class">
        Three
    </div>
  
    <div class="first top">
        Four
    </div>
    <div class="first top third">
        Five
    </div>
  
    <script    src=
    </script>
      
    <!-- Script to use [attribute^=value] selector -->
    <script>
        $(document).ready(function() {
            var select = $("[class^='top']");
            select.css({
                background: "green"
            });
        });
    </script>
</body>
  
</html>                    

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :