body 구성
<body>
<div>
<ul>
<li>Apple</li>
<li>Bag</li>
<li>Cat</li>
<li>Dog</li>
<li>Hello</li>
</ul>
</div>
</body>전체적인 문서 객체를 모델에 나타내면 위처럼 나타낼 수 있다. body태그를 기준으로 body 태그 바로 아래 있는 div 태그가 자손이며, body 태그의 아래에 있는 모든 문서 객체를 후손이라고 한다.
자손 선택자
<script>
$(document).ready(function() {
$('body > *').css('color', 'red');
});
</script>자손 선택자를 선택하는 선택자이며 '요소A > 요소B'의 형태로 사용한다. 위 코드처럼 body 태그의 자식으로 범위를 한정해 전체가 선택된다.
( div에만 style="color: red" 가 적용된다. )
후손 선택자
<script>
$(document).ready(function() {
$('body *').css('color', 'red');
});
</script>후손 선택자는 이름 그대로 후손을 선택하는 선택자이다. '요소A 요소B'의 형태로 사용하며, 요소A의 후손으로 범위를 한정한다.
( body 태그의 아래에 있는 모든 후손들에게 스타일이 적용된다. div, ul, li )
'가짜 개발자 Shiro > jQuery' 카테고리의 다른 글
| 속성 선택자 (0) | 2020.05.11 |
|---|---|
| 아이디 선택자, 클래스 선택자 (0) | 2020.05.06 |
| 태그 선택자 (0) | 2020.05.02 |
| 전체 선택자 (0) | 2020.04.30 |
| $(document).ready() (0) | 2020.04.29 |