jQuery 기본 강의

jQuery 효과

jQuery 작업 메서드

jQuery 탐색

jQuery Ajax

jQuery 다른

jQuery 참조 설명서

jQuery AJAX 메서드 jQuery 탐색 메서드

jQuery children() 메서드

jQuery 탐색 메서드

children() 메서드는 선택된 요소의 모든 직접 자식 요소를 반환합니다.

주의： children() 메서드는 DOM 트리를 단일 단계만 탐색합니다. 여러 단계를 탐색하려면find()메서드와 유사합니다.

children() 메서드는contents()메서드는 텍스트와 주석 노드를 반환하지 않습니다.

문법：

$(selector).children(selectorExpression)

예제

요소가 DIV의 직접 자식 요소인 경우를 반환합니다：

예제

$(document).ready(function(){
　　$("div").children().css("background-color", "coral");
});

테스트를 해보세요‹/›

DIV에 직접 속한 모든 자식 요소를 반환합니다：

예제

$(document).ready(function(){
　　$("div").children("p").css("background-color", "coral");
});

테스트를 해보세요‹/›

clicked 요소의 모든 자식 요소를 반환합니다：

예제

$("#container").click(function(event){
　　$("*").removeClass("hilite");
　　let　kids　=　$(event.target).children();
　　let　len　=　kids.addClass("hilite").length;
　
　　$("#results　span:first").text(len);
　　$("#results　span:last").text(event.target.tagName);
　
　　event.preventDefault();
});

테스트를 해보세요‹/›

children() 메서드는 단 하나의 DOM 트리 단계만을 탐색합니다. 다음 예제는 div id="box"의 직접 자식 요소를 반환합니다:

body ( 조상 )

div id="box" ( 부모级 )

div ( 직접 자식级 )

div ( 孙级 )

p ( 曾孙级 ) 　　　　　　　　　　　 span ( 曾曾孙级 )

코드 실행

파라미터 값

파라미터	설명
selectorExpression	선택자 표현식을 지정하여 요소를 일치시키는(선택자 표현식을 지정하여 요소를 일치시키는) (선택자 표현식을 지정하여 요소를 일치시키는)

jQuery 탐색 메서드

jQuery AJAX 메서드 jQuery 탐색 메서드