not set

jQuery 필터 선택자 본문

javascript/jQuery

jQuery 필터 선택자

다크곰 2012. 1. 17. 18:36

 선택자 형태  설명 
 요소:odd  홀수 번째에 위치한 문서 객체를 선택 
 요소:even  짝수 번째에 위치한 문서 객체 선택 
 요소:first  첫번째 위치한 문서 객체 선택 
 요소:last  마지막 위치한 문서 객체 선택 


<!doctype html>

<html>

 <head>

  <title>jquery test</title>

  <script src="http://code.jquery.com/jquery-1.7.min.js"></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>


  <script>

$(document).ready(function () {

$('tr:odd').css('background','#F9F9F9');

$('tr:even').css('background','#9F9F9F');


$('tr:first').css('background','#000000').css('color','#FFFFFF');

});

  </script>


 </body>

</html>


홀수번과 짝수번의 색이 다르게 나타나는 예제

결과



본문 출처 : 모던 웹을 위한 Javascript 입문 및 jQuery입문
저작자표시

'javascript > jQuery' 카테고리의 다른 글

jQuery find()  (0) 2012.01.31
jQuery 객체 확장 $.extend  (0) 2012.01.31
jQuery로 select box 및 check box의 값 가져오는 방법  (0) 2012.01.17
jQuery input box 선택시에 색상 넣기  (0) 2012.01.17
jQuery 속성 선택자  (0) 2012.01.17
'javascript/jQuery' Related Articles more