[J] JavaScript & jQuery 공부하기 #32

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

37. 요소 간의 관계
* 관계의 요소
- html의 요소 간의 관계를 말함
- 요소들의 관계에는 조상, 자손, 형제가 있음
1. 조상 : 부모, 조부모, 증조부모
2. 자손 : 자식, 손자, 증손자
3. 형제 : 같은 부모 요소를 가진 모든 요소

* parent()
- 특정 요소의 바로 위의 부모 요소
- 부모 요소는 단 하나임
< script type="text/javascript">
$(document).ready(function(){
$("li").parent();
});
</ script>

* parents()
  - 특정 요소부터 루트까지의 모든 요소에서 검색
  < script type="text/javascript">
   $(document).ready(function(){
   $("li").parents();
   });
  </ script>

 * parentUntil()
  - 선택된 두 요소 사이의 모든 요소
  - 앞의 값이 후손 요소, 뒤의 값이 조상 요소
  < script type="text/javascript">
  $(document).ready(function(){
  $("li").parentUntil("div")
  });
  </ script>

 * 자손 요소 선택 함수
  - 특정 요소보다 더 하위의 단계에 포함되는 모든 요소들
  - children()
  < script type="text/javascript">
  $(document).ready(function(){
  $("ul").children();
  });
  </ script>

 * find()
  - 특정 요소의 후손인 모든 요소
  < script type="text/javascript">
  $(document).ready(function(){
  $("ul").find();
  });
  </ script>
  - find()의 경우 어떠한 값을 지정할지 명확히 표기해 주어야 함
  - *의 경우 모든 값을 의미한다.