parent > child 는 parent 에 속한 child를 찾습니다.
원문 링크 
http://api.jquery.com/child-selector/
- jQuery('parent > child')
- parent 유효한 선택요소
- child parent 에 속한 자식 요소
parent > child 는 스타일시트의 표현방식입니다. parent 에 속하는 child 요소에 어떤 스타일을 주고 싶을 때 사용됩니다. 그런데 이 CSS 방법은 IE6 버젼에서는 호환이 되지 않습니다. 그러나 이 선택 방법을 이용하여 jQuery 에서는 해당 요소에 접근할 수 있도록 선택자를 만들었습니다.
부모의 하위에 있는 모든 자식요소들을 선택하는 것이 아닙니다. 바로 직계자식 요소만 선택이 가능합니다. 아래 예제를 잘 보시기 바랍니다.
예 제
"<ul class="topnav"> 요소의 하위 리스트 아이템(LI)를 찾아 빨간색 2중선을 그립니다.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:14px; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>Item 2
<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
</li>
<li>Item 3</li>
</ul>
<script>$("ul.topnav > li").css("border", "3px double red");</script>
</body>
</html>미리보기
잘 보시면 ul 이 LI 에 한번 더 나옵니다. 그러나 그 UL의 하위에 있는 LI 에는 테두리가 없는 걸 볼 수 있습니다. 이 선택자는 바로 자신의 직계 자식요소에만 영향을 받게 하기 위해서 사용할 수 있습니다.
이 내용은 jQuery 보다는 스타일시트 내용을 아느냐가 관건이네요. 사실 WEB 에 관련된 것은 조금씩은 알아야 쓸 수 있습니다. 멀고도 험한 길이네요. 헉헉 :)
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 사용 불가 상태 선택하기 : jQuery(':disabled') (2) | 2011.01.28 |
|---|---|
| jQuery API 정복 - 자식 요소 선택하기 : jQuery('ancestor descendant') (2) | 2011.01.27 |
| jQuery API정복 - 특정 단어 포함 요소 선택하기 : jQuery(':contains(text)') (6) | 2011.01.27 |
| jQuery API 정복 - 클래스명으로 선택하기 : jQuery('.class') (7) | 2011.01.27 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크된 체크박스만 알아내기 (4) | 2011.01.26 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크박스를 찾자 (6) | 2011.01.26 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : button 을 찾자 (3) | 2011.01.25 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name^="value"] (4) | 2011.01.24 |