jQuery :button Selector

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: In this example, we are using jQuery: button Selector.

HTML


<html>

<head>
    <title>jQuery :button Selectortitle>
    <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><br> Password:
            <input type="password" name="password">
            <br><br>
            <button type="button">
                Button
            button>
            <br><br>
            <input type="reset" value="Reset">
            <input type="submit" value="Submit">
            <br>
        form>
    center>
body>

html>

Output:

chrome-capture-2023-6-6

Example 2: In this example, we are using jQuery: button Selector.

HTML


<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
    script>
    <script>
        $(function () {
            $(":button").css(
                "border", "10px dashed green");
        });
    script>
head>

<body>
    <input type="button" value="Test" />
    <br><br>
    <input id="txtName" type="text" />
    <input type="submit" value="Test" />
    <br><br>
    <button id="button1">
        This is a button
    button>
    <br>

body>

html>

Output:

chrome-capture-2023-6-6-(1)

Explore