Front/jQuery
jQuery - 선택자(속성 선택자)
by Hyeon_
2021. 12. 14.
jQuery 선택자(selector)
- jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음
- 중간에 자바스크립트 코드 같이 작성
- HTML 태그를 쉽게 선택하기 위해 선택자 사용
선택자 종류
- 직접 선택자
- 인접 관계 선택자
- 필터 선택자
- 속성 선택자
- 컨텐츠 탐색 선택자
속성 선택자
- HTML 태그(요소)의 지정된 속성 값에 따라 선택자로 정의
속성 선택자 문법
태그명[속성] : []만의 속성을 포함하는 모든 태그 선택태그명[속성="값"] : 속성 값이 주어진 값과 동일한 모든 태그 선택태그명[속성 ^= "깂"] : 속성 값이 주어진 값으로 시작하는 모든 태그 선택태그명[속성 $= "값"] : 속성 값이 주어진 값으로 끝나는 모든 태그 선택태그명[속성 *= "값"] : 속성 값이 주어진 값을 포함하는 모든 태그 선택
속성 선택자 예제
attrSelector.html
- input type 선택
- text type 선택
- 속성 type 중 submit, reset 버튼 선택
$(':submit, :reset').css('background', "gold");의 형식으로 축약 가능
- type 중 password 선택
- option 태그 선택
- option 태그의 value 속성이 '웹'으로 시작하는 요소 선택
- select 태그의 하위(자손) option 태그의 value 속성이 '사'로 끝나는 요소 선택
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<script src= "jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 1. input type 선택
$('input[type]').css('background', 'pink');
// 2. text type 선택
$('input[type=text]').css({'color':'blue', 'width':'200px'});
// 3. 속성 type 중 submit, reset 버트느 선택
// $('input[type=submit]', 'input[type=reset]')
// 축약형
$(':submit, :reset').css('background', "gold");
// 4. type 중 password 선택
$(':password').css({'background':'green', 'color':'red'}).css('width', '200px');
// 5. option 태그 선택
$('option[value=프로그래머]').css('color','red');
// 6. option 태그의 value 속성이 '웹'으로 시작하는 요소 선택
$('option[value^=웹]').css('color','blue');
// 7. select 태그의 하위(자손) option 태그의 value 속성이 '사'로 끝나는 요소 선택
$('option[value$=사]').css('color','green');
});
</script>
</head>
<body>
<h1>속성 선택자</h1>
<form id="form1" method="post" action="ok.jsp">
<table>
<tr><td>이름</td><td><input type="text" id="name" value="홍길동"></td></tr>
<tr><td> ID</td><td><input type="text" id="id"></td></tr>
<tr><td>비밀번호</td><td><input type="password" id="passwd"></td></tr>
<tr><td>취미 :</td>
<td><input type="checkbox" id="sports" value="운동">운동
<input type="checkbox" id="fishing" value="낚시">낚시
<input type="checkbox" id="swimming" value="수영">수영</td></tr>
<tr><td>직업</td>
<td><select id="job">
<option value="학생">학생</option>
<option value="프로그래머">프로그래머</option>
<option value="웹디자이너">웹디자이너</option>
<option value="회계사">회계사</option>
<option value="의사">의사</option>
</select></td></tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="완료">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>