jQuery | [attribute^=value] Selector

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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </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

Sep	OCT	Nov
	23
2019	2020	2021

Recommended Posts: