목차
children() 예제 - ul 요소의 자식요소에 스타일주기
children() 정의
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"});
[반환값]
모든 직접 자식 요소 반환.
주소 복사
랜덤 이동