jQuery селектор :button

Определение и применение

Селектор :button выбирает <input type="button"> и все элементы <button>, независимо от их типа. Например, <button type="submit"> тоже входит в результат.

jQuery синтаксис:

JavaScript

$(":button")

Добавлен в версии jQuery

1.0

Селектор в CSS

Это селектор jQuery, он не является частью спецификации CSS.

Пример использования

Селектор :button — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<form>
  <input type="text" placeholder="Ваш логин" /><br /><br />
  <input type="password" placeholder="Ваш пароль" /><br /><br />
  <label>Мужчина <input type="radio" name="sex" value="male" checked="" /></label>
  <label>Женщина <input type="radio" name="sex" value="female" /></label><br /><br />
  <label><input type="checkbox" name="type1" value="busy" />Женат / замужем</label><br /><br />
  <label><input type="checkbox" name="type2" value="free" />Холост / -а</label><br /><br />
  <label><input type="checkbox" name="type3" value="childfree" />Дети</label><br /><br />
  <input type="reset" /><input type="button" value="Кнопка" />
  <button type="button">Кнопка</button>
</form>

main.js

JavaScript

$(document).ready(function () {
    $(':button').css('border', '1px solid orange') // выбираем все элементы <input> и <button>, которые имеют атрибут type со значением button.
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием селектора :button мы выбрали и стилизовали все элементы <input> и <button>, которые имеют атрибут type со значением button.