<body>
<div>
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
<li>EE</li>
</ul>
</div>
</body>
1. body태그를 기준으로 바로 아래 div를 자식. body 아래 모든 태그를 후손
2. 자식선택자
- 형태 : '부모 > 자식'
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$('body > *').css('color','red');
});
</script>
</head>
<body>
<div>
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
<li>EE</li>
</ul>
</div>
</body>
</html>
자식에게만 적용된것을 확인할수 있다.
3. 후손선택자
- 형태 : '요소 A 요소 B'
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$('body *').css('color','red');
});
</script>
</head>
<body>
<div>
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
<li>EE</li>
</ul>
</div>
</body>
</html>
;body 밑으로 모두 속성이 적용된다.
$('body ul').css('color','red');
; ul만 적용됨.
4. 속성선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$('input[type=text]').val("이름을 입력하세요!");
});
</script>
</head>
<body>
<input type="text" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
</body>
</html>
; input 태그 중 type이 text인 것만 적용.
; id를 주면 복잡할수 있으므로.
5. 입력양식 필터 선택자
- 형태 : '요소:값'
-
요소:button |
input태그 중 type속성이button인 문서객체와 button태그를 선택 |
| 요소: checkbox | |
| 요소:file | |
| 요소:image | |
| 요소:password | |
| 요소:radio | |
| 요소:reset | |
| 요소:submit | |
| 요소:text |
**
요소:checked |
check된 입력양식을 선택 |
요소:disabled |
비활성화된 입력양식을 선택 |
| 요소:enabled | 활성화된 입력양식을 선택 |
| 요소:focus | 포커스가 된 입력양식을 선택 |
| 요소:input | 모든 입력양식을 선택 |
| 요소:selected | option중 선택된 입력양식을 선택 |
예) 5초 후 선택된 값을 보여주는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
//5초후 실행
setTimeout(function(){
//변수 선언
var value = $('select > option:selected').val();
alert(value);
}, 5000);
});
</script>
</head>
<body>
<select>
<option>국어</option>
<option>영어</option>
<option>수학</option>
<option>과학</option>
</select>
</body>
</html>
;
6. 필터 선택자
- 위치 관련 필터 선택자 : 테이블에 색상
요소:odd 홀수번재 위치한 문서객체 선택
요소:even 짝수번재 위치한 문서객체 선택
요소:first 첫번재 위치한 문서객체 선택
요소:last 마지막 번재 위치한 문서객체 선택
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> <script src="jquery-1.9.1.js"></script> <script> $(document).ready(function(){ $('tr:odd').css('background','red'); $('tr:even').css('background','blue'); $('tr:first').css('background','orange'); }); </script> </head> <body> <table> <tr><td>요일</td><td>과목</td></tr> <tr><td>월요일</td><td>국어</td></tr> <tr><td>화요일</td><td>영어</td></tr> <tr><td>수요일</td><td>수학</td></tr> <tr><td>목요일</td><td>과학</td></tr> <tr><td>금요일</td><td>사회</td></tr> </table> </body> </html>
'WEB > jQuery' 카테고리의 다른 글
| 1. jQuery 시작 (0) | 2013.04.17 |
|---|