:first 는 찾은 요소 중에 첫번째를 찾는 선택자입니다.
원문 링크 
http://api.jquery.com/first-selector/
- jQuery(':first')
:first 선택자는 :eq(0) 이나 :lt(1) 과 같이 바꿔 사용할 수 있습니다.
예 제
tr 중에 첫번째를 찾아 텍스트를 기울입니다. italic 체로 바꿉니다.
<!DOCTYPE html>
<html>
<head>
<style>
td { color:blue; font-weight:bold; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
<script>$("tr:first").css("font-style", "italic");</script>
</body>
</html>미리보기
이전에 같이 보셨던 :first-child 와 이번의 :first 선택자는 아주 유사해 보입니다. 그 사용법을 봐도 그렇고 첫번째 요소를 선택해 준다는 내용으로 봐도 그렇습니다. 그런데 이 둘 사이에는 큰 차이점이 있습니다. :first-child는 1개 이상의 요소를 선택할 수 있다는 것이고 :first 는 단 하나의 요소만 선택할 수 있습니다. 이 내용을 확인해 보고 싶으시면 아래와 같이 table 을 하나 더 만들어서 테스트 해보시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
td { color:blue; font-weight:bold; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
<script>$("tr:first").css("font-style", "italic");</script>
</body>
</html>이렇게 수정하고 실행 시켜보면 여전에 제일 위에 있는 텍스트만 이탤릭체로 바뀌는 것을 보실 수 있습니다. 하지만 <script>$("tr:first-child").css("font-style", "italic");</script> 로 수정하시면 2개의 테이블의 첫번째 행(tr) 모두가 선택되어 텍스트가 이탤릭으로 바뀐 것을 확인하실 수 있을 겁니다. 이 부분은 꼭 테스트를 하셔서 보시기 바랍니다.
같은 기능을 한다면 이름을 유사하게 2개나 만들지는 않았을 듯 합니다. 헷갈릴 수 있지만 때에 따라 잘 사용하시기 바랍니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 요소명(태그)으로 찾기 : jQuery('element') (0) | 2011.02.07 |
|---|---|
| jQuery 1.5 버젼이 나왔습니다!! (8) | 2011.02.07 |
| jQuery API 정복 - ~보다 작은 요소 선택하기 : jQuery(':lt(index)') (7) | 2011.02.07 |
| jQuery API 정복 - ~보다 큰 요소 선택하기 : jQuery(':gt(index)') (3) | 2011.02.01 |
| jQuery API 정복 - 첫째 자식(?) 찾기 : jQuery(':first-child') (3) | 2011.01.31 |
| jQuery API 정복 - input file 찾기 : jQuery(':file') (0) | 2011.01.29 |
| jQuery API 정복 - 리스트 짝수,홀수 찾기 : jQuery(':even') (2) | 2011.01.28 |
| jQuery API 정복 - 인덱스로 요소 찾기 : jQuery(':eq(index)') (6) | 2011.01.28 |