[jQuery] Form 태그 선택자
2022. 6. 10. 16:22ㆍJavaScript/jQuery
Form 태그 선택자
- Form 태그 부내부의 입력에 관련된 태그들에 대한 선택자
- :input : 모든 입력에 관련된 태그들을 선택함
- :text : type 속성이 text인 input 태그를 선택함
- :password : type 속성이 password인 input 태그를 선택함
- :radio : type 속성이 radio인 input 태그를 선택함
- :checkbox : type 속성이 checkbox인 input 태그를 선택함
- :submit : type 속성이 submit인 input 태그를 선택함
- :reset : type 속성이 reset인 input 태그를 선택함
- :button : type 속성이 button인 input 태그를 선택함
- :image : type 속성이 image인 input 태그가 선택됨
- :file : type 속성이 file인 input 태그가 선택됨
- :enabled : 활성 상태인 input 태그가 선택됨
- :disabled : 비 활성 상태인 input 태그가 선택됨
- :selected : select 태그 내의 option 태그 중 현재 선택되어 있는 태그를 선택함
- :checked : checkbox나 radio에서 현재 check 되어 있는 태그를 선택함
2. :input
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(":input").css("background-color", "yellow");
});
</script>
</head>
<body>
<input type="text"><br>
<input type="password"><br>
<input type="number"><br>
</body>
</html>
3. :text, :password
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(":text").css("background-color", "yellow");
$(":password").css("background-color", "red");
});
</script>
</head>
<body>
<input type="text"><br>
<input type="password"><br>
</body>
</html>
4. :enabled, :disabled
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(":enabled").css("background-color", "yellow");
$(":disabled").css("background-color", "red");
});
</script>
</head>
<body>
<input type="text">활성 상태<br>
<input type="password">활성 상태<br>
<input type="text" disabled>비활성 상태<br>
<input type="password" disabled>비활성 상태<br>
</body>
</html>
Reference
source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/FormSelector/src/main/webapp
윤재성의 처음 시작하는 jQuery Programming
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] DOM 제어하기 (0) | 2022.06.10 |
|---|---|
| [jQuery] jQuery 이벤트 함수 (0) | 2022.06.10 |
| [jQuery] 상태 선택자 (0) | 2022.06.09 |
| [jQuery] 속성 선택자 (0) | 2022.06.09 |
| [jQuery] 인덱스 필터 선택자 (0) | 2022.06.09 |