jQuery - selector 자식,후손 선택자

자식 후손 선택자.

<!--예시를 위한 코드 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!--jquery명령을 사용하기 위해서 필수-->
<div id="subject">
	<p>Java 과정</p>
		<div>
			<p>Java 기본문법</p>
			<p>Java OOP</p>
			<p>Java API</p>
		</div>
		
		<p>JSP 과정</p>
		<div>
			<p>스크립트 요소(Script Element)</p>
			<p>지시어(Directive)</p>
			<p>표준 액션 태그(Standard Action Tag)</p>
		</div>
	</div>

자식 선택자 : 검색된 부모태그에서 첫번째 깊이의 자식태그를 검색하여 제공

$("#subject > p").css({"font-size":"25px","font-weight":"bold"});

$(selector).children([selector]) : 선택자로 검색된 부모태그에서 첫번째 깊이의 자식태그를 검색하여 jQuery 객체로 반환하는 메소드
> children() 메소드의 매개변수에 선택자를 전달하지 않은 경우 모든 자식태그 검색하여 반환

$("#subject").children("p").css({"font-size":"25px","font-weight":"bold"});

후손 선택자 : 검색된 부모태그에서 모든 깊이의 후손태그를 검색하여 제공

$("#subject p").css("color","green");

$(selector).find(selector) : 선택자로 검색된 부모태그에서 모든 깊이의 후손태그를 검색하여 jQuery 객체로 반환하는 메소드

$("#subject").find("p").css("color","green");