note

필터 선택자 본문

JavaScript/jQuery

필터 선택자

투한 2012. 3. 20. 10:01 








<!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
'JavaScript/jQuery' Related Articles more