input 셀렉터
셀렉터 :input는 폼 컨트롤 요소
- 입력 필드, 텍스트 영역, 드롭다운 목록 및
버튼을 선택합니다. 다음 태그들을 참고하세요:
input,
textarea,
button,
select.
:input는 CSS 스펙에 속하지 않기 때문에,
현대 브라우저에서 성능을 향상시키기 위해서는
먼저 순수 CSS 셀렉터를 사용하여 요소를 필터링한 다음
.filter(':input')를 적용하는 것이 좋습니다.
문법
다음과 같이 폼 컨트롤 요소를 선택합니다:
$(':input');
예시
위에서 설명한 이론에 따라,
모든 폼 컨트롤 요소를 선택하고
length 속성을 사용하여
그 수를 콘솔에 출력해 봅시다. 우리는
모든 13개의 태그가 포함된 것을 볼 수 있을 것입니다:
<form>
<input type="button" value="button">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">
<select>
<option>option</option>
</select>
<textarea></textarea>
<button>button</button>
</form>
textarea {
height: 25px;
}
let allInputs = $(':input');
console.log('태그 수: ' + allInputs.length);
$('form').submit(function(event) {
event.preventDefault(); // 폼 제출을 방지합니다
});
