:first-child 는 자식 요소 중에에 첫번째로 위치한 요소를 찾는 선택자입니다.
원문 링크 
http://api.jquery.com/first-child-selector/
- jQuery(':first-child')
:first-child 는 :nth-child(1) 로 대체될 수 있습니다.
이 예제를 보다가 jQuery 가 얼마나 사용하기 편한지 다시한번 느끼게 되었습니다. 아래 예제를 제가 순수하게 짠다면 아마 골머리 썩혔을 겁니다. 다시한번 jQuery 라이브러리 작성자들에게 박수를~~
예 제
각각의 div 들의 첫번째 span 태그를 찾아서 텍스트에 밑줄(underline)을 그린 후에, 그 span에 마우스 오버/아웃 이벤트시 글자색을 초록색/원래색으로 바꾸는 작업을 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
span { color:#008; }
span.sogreen { color:green; font-weight: bolder; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>
<div>
<span>Glen,</span>
<span>Tane,</span>
<span>Ralph</span>
</div>
<script>
$("div span:first-child")
.css("text-decoration", "underline")
.hover(function () {
$(this).addClass("sogreen");
}, function () {
$(this).removeClass("sogreen");
});
</script>
</body>
</html>미리보기
.hover() 메소드는 해당 객체에 마우스가 위치되거나 벗어났을 때 효과를 줄 수 있습니다. 마치 A 태그에 CSS 를 통해 효과를 주는 것과 같은 효과를 줄 수 있네요. 이런 부분이 잘 만들어진 라이브러리를 사용하는 즐거움이 아닐까 합니다.
요 내용은 :first-child 보다 hover 함수가 더 눈여겨 볼만하네요. 그리고 함수를 이렇게 이어 붙여도 다 잘 처리해 주는 jQuery 가 마냥 신기할 뿐입니다. :)
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| 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') (1) | 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 |
| jQuery API 정복 - 사용 불가 상태 선택하기 : jQuery(':disabled') (2) | 2011.01.28 |