Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
Tags
- Spring
- layout
- HTML
- 메서드
- 생성자
- 국제화
- 에러페이지
- struts2
- 클래스
- AWT
- Eclips
- JSP
- 전화걸기
- 기본
- 메소드
- JavaScript
- paint
- Android
- 안드로이드
- OGNL
- Graphic
- 배열
- 예외처리
- oracle
- mybatis
- 이클립스
- Java
- 어노테이션
- 오버로딩
- Menu
Archives
- Today
- Total
note
필터 선택자 본문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function (){
$('tr:odd').css('background','#f9f9f9');
$('tr:even').css('background','#9f9f9f');
$('tr:first').css('background','#000').css('color','#fff');
});
</script>
</head>
<body>
<table>
<tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
<tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
<tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
<tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
<tr><td>김선화</td><td>O형</td><td>서울 강서구</td></tr>
<tr><td>남기주</td><td>A형</td><td>서울 노량진구</td></tr>
<tr><td>윤하린</td><td>B형</td><td>서울 용산구</td></tr>
</table>
</body>
</html>
tr 이 각 번호라 생각하고
짝수와 홀수 로 구분해서 색이 입혀짐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function (){
$('h3:even').css({
backgroundColor : 'Black',
color : 'White'
});
});
</script>
<body>
<h3>Header-0</h3>
<h3>Header-1</h3>
<h3>Header-2</h3>
<h3>Header-3</h3>
<h3>Header-4</h3>
<h3>Header-5</h3>
</body>
</html>
다른 코드 같은 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function (){
$('h3').filter(':even').css({
backgroundColor : 'Black',
color : 'White'
});
});
</script>
<body>
<h3>Header-0</h3>
<h3>Header-1</h3>
<h3>Header-2</h3>
<h3>Header-3</h3>
<h3>Header-4</h3>
<h3>Header-5</h3>
</body>
</html>
'JavaScript > jQuery' 카테고리의 다른 글
| $.each() 메서드 사용 (0) | 2012.03.20 |
|---|---|
| 함수 필터 선택자 (0) | 2012.03.20 |
| 입력 양식 필터 선택자 (0) | 2012.03.20 |
| 속성 선택자 (0) | 2012.03.20 |
| 자식 선택자 (0) | 2012.03.20 |