jQuery의 :button 선택자: 버튼 요소 선택하기

jQuery의 :button 선택자는 버튼 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 버튼 요소를 쉽게 선택하여 스타일이나 동작을 조작할 수 있습니다. 여러 가지 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 모든 버튼 요소 선택

<button>Click Me</button>
<input type="button" value="Submit">
<input type="reset" value="Reset">
<a href="#" class="button">Anchor Button</a>

$(":button").addClass("styled-button");

이 예제는 모든 버튼 요소를 선택하여 "styled-button" 클래스를 추가합니다.

예제 2: 특정 클래스를 가진 버튼 요소 선택

<button class="primary-button">Primary Button</button>
<input type="button" class="secondary-button" value="Secondary">
<input type="reset" class="primary-button" value="Reset">

$(".primary-button:button").addClass("highlight");

이 예제는 클래스가 "primary-button"인 버튼 요소 중에 :button 선택자를 사용하여 선택하고 "highlight" 클래스를 추가합니다.

예제 3: 특정 폼 안에 있는 버튼 요소 선택

<form id="myForm">
  <button>Submit</button>
  <input type="button" value="Cancel">
</form>

$("#myForm :button").addClass("form-button");

이 예제는 ID가 "myForm"인 폼 안에 있는 버튼 요소를 선택하여 "form-button" 클래스를 추가합니다.

jQuery의 :button 선택자를 활용하면 웹 페이지에서 버튼 요소를 쉽게 선택하여 다양한 작업을 할 수 있습니다.