본문 바로가기
JQuery

[jQuery] children

by NamGH 2023. 9. 21.
children : 특정 엘리먼트의 자식 엘리먼트를 반환함

매개변수

제거할 엘리먼트를 찾기 위한 셀렉터 표현식

 

예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	span{
		color: blue;
		background: yellow;
	}
</style>
<script src = "../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('button').click(function(){
			
			$('span').parents().css('border-bottom', '3px double red');
		});
	})
</script>
</head>
<body>
	<button> 엘리먼트에 스타일 입히기</button>
	<p> 이곳은 p문장입니다. </p>
	<div> 
		<h1 class="selected">하하하 
		   <span class="selected"> 이곳은 div의 차일드 span 이다.</span> 
		</h1>
		<h2>호호호</h2>
	</div>
	
	<p>
	그리고 <span> 여기는 p의 차일드 span </span> 문장입니다. 
	</p>
	
	<div> 그리고 마지막으로 
	   <span> 이곳은  div의 차일드 span 이고</span>
	   이곳은 div이다. 
	</div>
	
	<div> 
		div
	   <p> p영역
	   		<span class="selected">span</span>
	   </p>
	</div>
</body>
</html>

 

결과

버튼클릭시 다음과 같은 결과가 나온다

'JQuery' 카테고리의 다른 글

[jQuery] append  (0) 2023.09.21
[jQuery] siblings  (0) 2023.09.21
filter  (0) 2023.09.21
add  (0) 2023.09.21
toggle  (0) 2023.09.21