:button

jQuery Reference

:button은 input[type="button"]과 button 요소를 선택하는 jQuery 전용 선택자입니다. input[type="submit"]이나 input[type="reset"]까지 모든 버튼 모양의 입력칸을 선택하는 것은 아닙니다.

문법과 적용 범위

$(":button");
$("#form").find(":button");
$("button, input[type='button']");

button 태그는 type이 submit이어도 선택됩니다. 반면 input 태그는 type이 button일 때만 선택되므로, 태그 이름과 type을 함께 봐야 합니다. :button은 표준 CSS 선택자가 아니어서 document.querySelectorAll()에 그대로 넘길 수 없습니다. 일반적인 CSS 선택자를 사용하고 싶다면 button, input[type="button"]처럼 두 선택자를 쉼표로 연결합니다.

jQuery 공식 문서의 :button 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery button-selector 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="form">
  <input id="a" type="button" value="일반 버튼">
  <button id="b" type="button">button 태그</button>
  <button id="c" type="submit">전송 button</button>
  <input id="d" type="submit" value="전송 input">
  <input id="e" type="reset" value="초기화 input">
</div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const $buttons = $("#form").find(":button");
      $buttons.addClass("marked");
      $("#output").text($buttons.map(function () { return this.id; }).get().join(", "));
    });
  </script>
</body>
</html>

실행 결과 확인

a, b, c에 테두리와 배경이 적용되고 결과에는 a, b, c가 표시됩니다. d와 e는 input의 type이 submit과 reset이므로 선택되지 않습니다. 이 예제의 div는 실제 양식이 아니어서 버튼을 눌러도 서버로 제출하지 않습니다.

사용할 때 주의할 점

실제 form 안의 button은 type을 생략하면 제출 버튼으로 작동할 수 있습니다. 스크립트용 버튼은 type="button"을 명시하세요.
모든 input만 선택하려고 input:button을 쓰면 button 태그가 빠집니다. 필요한 대상이 두 태그인지 먼저 결정하세요.
범위를 정하지 않은 :button은 페이지 전체의 버튼을 선택합니다. 특정 양식이나 도구 모음 안으로 범위를 좁히면 다른 버튼을 바꾸는 일을 피할 수 있습니다.

용도를 비교하려면 .addClass()로 선택한 버튼 꾸미기을 참고하세요.

jQuery Reference