[Traversing] JQ - children() 메서드 ★ - 모든 자식요소 반환 (= children메서드 = 칠드런메서드)

목차

1. children() 예제 - ul 요소의 자식요소에 스타일주기
2. children() 정의
3. children() 구문

children() 예제 - ul 요소의 자식요소에 스타일주기

 

<style>  

div {

    border:2px solid blue;

 }  

div * { 

    display: block;

    border: 2px solid lightgrey;

    color: lightgrey;

    padding: 5px;

    margin: 15px;

}

</style>

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("ul").children().css({"color": "red", "border": "2px solid red"});

});

</script>

 

<div>div 요소

    <ul> 

      <li>

        <span>홈짱닷컴</span>

      </li>

      <li>

        <span>Homzzang.com</span>

      </li>

    </ul>   

</div>

결과 보기

children() 정의

 

모든 직접 자식요소 반환. (단, 텍스트/주석 노드는 반환 X)

 

---

1. cf.

• children() 메서드 : 선택요소의 직접 자식 요소 반환
• find() 메서드 : 선택요소의 모든 자손 요소 반환
• parent() 메서드 : 선택요소의 직접 부모 요소 반환
• parents() 메서드 : 선택요소의 모든 조상 요소 반환

2. cf.

• children() 메서드 : 텍스트 및 주석 노드는 반환 X.
• contents() 메서드 : 텍스트 및 주석 노드도 반환 O

 

3. 예제 더 보기
https://api.jquery.com/children/

 

children() 구문

 

$(selector).children(filter)

 

---

[매개변수]

 

filter

필수. 자식 요소 검색 범위 좁히는 선택자 표현식.
(예) $("ul").children("li.first").css({"color": "red", "border": "2px solid red"});

 

---

[반환값]

 

모든 직접 자식 요소 반환.