83 of 119 menu

Selector button

The selector :button selects button elements and all elements with the type button. See the tags button, input with the type button. The equivalent of $(':button') is $('button'), $("input[type='button']"). Since :button is not part of the CSS specification, for better performance in modern browsers it is better to first filter the elements using a pure CSS selector and then apply .filter(':button').

Syntax

This is how we select buttons:

$(':button');

Example

Let's, according to the theory above, select all the buttons and give them a green background and a red border by adding the class marked to them using the addClass method:

<form> <input type="button" value="button"> <input type="file"> <button>button</button> <input type="reset"> <input type="radio"> <input type="text"> </form> .marked { background-color: green; border: 2px red solid; } $(':button').addClass('marked'); $('form').submit(function(event) { event.preventDefault(); // prevents form submission });

See also

  • tag button
  • tag input
  • method filter,
    which filters elements in a set by a given selector
  • method addClass,
    which adds a given CSS class to an element
enru