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

jQuery | :button Selector