[jQuery] 자손 요소의 탐색 (.children, .find)
2021. 8. 7. 23:26
728x90
01 .children() 메소드
- 선택한 요소의
자식 요소 를 모두 선택. - 이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수도 있음.
<script>
$(function () {
$("section").children().css("background-color", "blue");
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>자손 요소의 탐색</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
p,
div {
padding: 20px;
}
</style>
<script src="/resource/lib/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$("section").children().css("border", "3px solid red");
$("section").children("div").css("background-color", "blue");
});
</script>
</head>
<body>
<h1 class="title">선택자</h1>
<section>
<div>
<p class="txt1">내용</p>
</div>
</section>
<div>
<h3>
<div>
<h3>
<p class="txt2">내용</p>
</h3>
</div>
</h3>
</div>
</body>
</html>
02 .find() 메소드
- 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는
자손 요소를 모두 선택. - 이때 별표("*")를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택할 수도 있음.
<script>
$(function () {
$("section").find("div").css("background-color", "blue");
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>자손 요소의 탐색</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
p,
div {
padding: 20px;
}
</style>
<script src="/resource/lib/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$("section").find().css("border", "3px solid red");
$("section").find("div").css("background-color", "blue");
});
</script>
</head>
<body>
<h1 class="title">선택자</h1>
<section>
<div>
<p class="txt1">내용</p>
</div>
</section>
<div>
<h3>
<div>
<h3>
<p class="txt2">내용</p>
</h3>
</div>
</h3>
</div>
</body>
</html>728x90
'jQuery > Study' 카테고리의 다른 글
