The jQuery :button selector selects the HTML button element and the input type="button" element. We don’t need to use the attribute type="button" to select the button element. It requires only to specify :button to select the button element.
Syntax of jQuery :button Selector
The syntax of jQuery :button selector is given below.
It requires no tag name before the selector name to select the button element. However, if you want to select only the specified button element. You have to specify the class name, tag name or id of the element.
jQuery :button Selector Selects Button Element in a Form
The form contains many input fields and an HTML button element to submit the button. If you want to select the button element, you have to use the selector to select the element. You have to use the method as given in the example below.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $( ":button" ).css( "background", "yellow" ); }); </script> <form action="#"> <label>Name</label> <input type="text" name="name" placeholder="Enter your name..."><br> <label>Email</label> <input type="email" name="email" placeholder="Enter your email..."> <button type="button">Submit</button> </form> |
Output
The above example contains the input text and email field. To submit the form, it contains the button element. After selecting the button, jQuery applies the background color as ‘yellow’ to the button. However, you can also apply other effects to the button using jQuery.
Select Form Input Element with Attribute type=”button”
In addition to the above button element, the selector also select the input element with type="button". Both button element and input type button creates a similar button to submit the form. See the example below contains a form with input type elements.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $( ":button" ).css( "color", "red" ); }); </script> <form action="#"> <label>Your Subject</label> <input type="text" name="subject" placeholder="Enter your subject"><br> <label>Your Message</label> <textarea rows="5" cols="10" name="message"></textarea> <input type="button" value="Submit"> </form> |
Output
The above example contains the button element with text in red color. The selector first selects the input type element to apply other effects.
I hope you like the above examples of jQuery :button selector. If you have any queries regarding the above selector, please comment below.
Also tell me, what other methods you are using with the selector by commenting below.
References