jQuery | :button Selector

Last Updated : 26 Feb, 2019

The jQuery :button selector selects button elements and input elements with type=”button”. The button element is not selected if we use input=” button” as a selector.

Syntax:

$(":button")

Example-1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
  </script> 
   
  <script> 
        $(document).ready(function() { 
            $(":button").css( 
              "background-color", "lightgreen"); 
        }); 
    </script> 
</head> 
  
<body> 
  
    <center> 
        <form action=""> 
            Name: 
            <input type="text" 
                   name="user"> 
            <br> Password: 
            <input type="password" 
                   name="password"> 
            <br> 
            <button type="button"> 
              Button 
          </button> 
            <br> 
            <input type="reset" 
                   value="Reset"> 
            <input type="submit"
                   value="Submit"> 
            <br> 
        </form> 
    </center> 
  
</body> 
  
</html> 

Output:

Example-2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> 
  </script> 
  
</head> 
  
<body> 
    <input type="button" 
           value="Test" /> 
    <br> 
    <input id="txtName" 
           type="text" /> 
    <input type="submit" 
           value="Test" /> 
    <br> 
  
    <button id="button1"> 
      This is a button 
  </button> 
    <br> 
  
    <script> 
        $(function() { 
            $(":button").css( 
            "border", "10px dashed green"); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

My Personal Notes

Related Articles