[jQuery] find(), children(), parent(), next()

JS 관련/JQuery

[jQuery] find(), children(), parent(), next()

씨네 2022. 2. 14. 08:55

728x90

find("selector") : 선택한 엘리먼트의 자손들 중에 탐색하고자 하는 엘리먼트를 찾는다.

children("selector") : 선택한 엘리먼트의 자식요소들 중에 탐색하고자 하는 엘리먼트를 찾는다.

parent() / parents("selector") : 선택한 엘리먼트의 부모요소를 찾는다.

next("selector") : 선택한 엘리먼트 다음에 따라오는 요소를 찾는다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>

<script type="text/javascript">

	$(document).ready(function(){
		$("div").find("b").css({"font-size": "30pt", "color": "red"});
		$("div").children("#chd").text("2.children()");
		$("b").parent().css("background-color", "hotpink");
		$("p>b").parents("div").css("background-color", "skyblue");
		$("p").eq(0).next().css({"font-size": "50pt", "color": "yellow"});
	})

</script>
</head>
<body>

<pre>
	<b>find("selector") : 선택한 엘리먼트의 자손들 중에 탐색하고자 하는 엘리먼트를 찾는다.</b>
	<b>children("selector") : 선택한 엘리먼트의 자식요소들 중에 탐색하고자 하는 엘리먼트를 찾는다.</b>
	<b>parent() / parents("selector") : 선택한 엘리먼트의 부모요소를 찾는다.</b>
	<b>next("selector") : 선택한 엘리먼트 다음에 따라오는 요소를 찾는다.</b>
</pre>

<div>
	<p><b>1</b></p>
	<p id="chd">2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
</div>

</body>
</html>

위 코드의 실행 결과입니다.

우선 스크립트영역을 순서대로 읽어보겠습니다.

$("div").find("b").css({"font-size": "30pt", "color": "red"});

div태그에서 b태그를 찾아서 폰트의크기를 30으로 바꾸고 빨간색으로 색을 변경합니다.

$("div").children("#chd").text("2.children()");

div태그의 자식요소중 id가 chd인 태그를 찾아서 2.chrildren() 텍스트를 입힙니다.

$("b").parent().css("background-color", "hotpink");

b태그의 부모요소의 배경색을 핫핑크색으로 변경합니다.

$("p>b").parents("div").css("background-color", "skyblue");

p의 자식요소인 b의 부모div 영역의 배경색을 하늘색으로 변경합니다.

$("p").eq(0).next().css({"font-size": "50pt", "color": "yellow"});

p태그중 0번지 ( 가장 첫번째 )의 다음태그의 font를 50으로 바꾸고 노란색을 입힙니다.

위의 명령들을 위에서 부터 순차적으로 읽으며 효과를 적용합니다.

728x90