jQuery :button Selector

Quiz

The :button selector in jQuery is used to select all <button> elements and <input> elements of type "button".

Syntax

Following is the syntax of jQuery :button Selector −

$(":button")

Parameters

This selector will select all button elements.

Example 1

In the following example, we are using the "jQuery :button" Selector to select all button elements −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":button").css("color", "blue");
        });
    </script>
</head>
<body>
    <button>Button Element</button>
    <input type="button" value="Input Button">
</body>
</html>

After executing the above program, all the button elements will change their text color to blue.

Example 2

Here, we are selecting all button elements and adding a click event when focused −

<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Select all button elements and add a click event
            $(":button").click(function(){
                alert("Button clicked!");
            });
        });
    </script>
</head>
<body>
    <button>Click Me</button>
    <input type="button" value="Click Me Too">
</body>
</html>

When we click the button element, an alert will be displayed on the screen.

jquery_ref_selectors.htm

Print Page