jQuery :image Selector

Quiz

The :image selector in jQuery is used to select all the input elements of type "image".

The <input type="image"> element in HTML is an input element that acts as a submit button, but it displays an image instead of a regular button.

Syntax

Following is the syntax of :image selector in jQuery −

$(":image")

Parameters

Following are the parameters of this method −

":image" − This selector selects all <input> elements of type image.

Example 1

In the following example, we are using the :image selector to apply a blue border to all image input elements −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":image").css("border", "3px solid blue");
        });
    </script>
</head>
<body>
    <form>
        <input type="image" src="https://www.tutorialspoint.com/cg/images/logo.png" alt="Submit Button">
    </form>
</body>
</html>

After executing the above program, the image will be highlighted with a blue color solid border.

Example 2

In this example, we are adding a click event handler to the image input element using the :image selector −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":image").click(function(){
                alert("Image input clicked!");
            });
        });
    </script>
</head>
<body>
    <form>
        <input type="image" src="https://www.tutorialspoint.com/cg/images/logo.png" alt="Submit Button">
    </form>
</body>
</html>

When we click on th image, an alert will be displayed on the screen stating "Image input clicked".

jquery_ref_selectors.htm

Print Page