:parent 는 텍스트 노드를 포함한 요소를 가지고 있는 상위 요소를 찾습니다.
원문 링크 
http://api.jquery.com/parent-selector/
- jQuery(':parent')
음, 느낌으로만 보자면 parent 선택자가 마치 부모요소를 찾는 선택자인 것처럼 보입니다만, jQuery.com의 설명은 조금 다릅니다. 부모를 선택하는 것은 맥락상 맞지만 조금 관점이 다른 것 같네요. 부연 설명을 보시죠.
이 선택자는 :empty 선택자와 반대 선택자입니다. (:child 가 아닌것에 주목하세요.)
한가지 중요한 사실은 :parent (또는 :empty) 선택자는 text 노드도 자식 요소로 여긴다는 점입니다.
W3C 에 따르면 <p> 태그는 적어도 하나의 자식 노드를 가져야 합니다. 그것이 비록 텍스트에 불과할지라도 말입니다. 반면 <input>, <img>, <br>, <hr>와 같은 어떤 요소들은 어떤 자식요소도 가질 수 없습니다.
예 제
텍스트를 포함한 자식요소가 있는 td를 찾아서 바탕색을 연하게(알파값) 변화시킵니다.
<!DOCTYPE html>
<html>
<head>
<style>
td { width:40px; background:green; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<table border="1">
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
<script>$("td:parent").fadeTo(1500, 0.3);</script>
</body>
</html>
미리보기 새로고침
td 중에 뭔가를 가지고 있으면 그 색을 변화시킵니다. 그 함수가 재미있네요. 서서히 변화시키게 됩니다. 잘 보지 못하셨다면 새로고침으로 확인해 보세요.
faceTo(a, b)을 잠깐 설명드리자면 a 시간동안 b만큼 알파값을 변화시켜라가 됩니다. a 는 1000 이 1초에 해당하고, b는 0~1 사이의 값입니다. 0은 안보이고 1은 정확하게 보입니다.
parent 선택자가 직관적인 것과는 조금 다르네요. 물론 부모요소가 선택되는 것은 맞지만요. 그리고 faceTo 함수가 또 재미있습니다. 다 재밌어서 큰일이네요. 하하;;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - select 박스에서 선택된 것 찾기 : selected (4) | 2011.02.22 |
|---|---|
| jQuery API 정복 - reset 버튼 찾기 : reset (2) | 2011.02.21 |
| jQuery API 정복 - radio 버튼 찾기 : radio (2) | 2011.02.21 |
| jQuery API 정복 - type=password 인 것 찾기 : password (2) | 2011.02.18 |
| jQuery API 정복 - 유일한 자식 요소 찾기 : only-child (8) | 2011.02.17 |
| jQuery API 정복 - 홀수번째 요소 찾기 : odd (2) | 2011.02.17 |
| jQuery API 정복 - n번째 자식요소 찾기 : nth-child (5) | 2011.02.16 |
| jQuery API 정복 - ~이 아닌 요소 선택하기 : not (3) | 2011.02.16 |